Type: GridReportViewer

declare class GridReportViewer extends ReportViewer {
    constructor(
        container: string | HTMLDivElement,
        grid: GridView,
        options?: GridReportOptions,
    );
    /**
     * 컨테이너에 미리보기 랜더링
     */
    preview(): void;
}

interface GridReportOptions extends ReportOptions {
    paper?: GridReportPaperOptions; // 종이 영역 설정
    title?: GridReportTitle; // 보고서 제목 영역
    subTitle?: GridReportTitle; // 보고서 부제목 영역
    gridHeader?: GridReportHeader; // 보고서 헤더 영역
    pageHeader?: PageHeader; // 보고서에서 반복되서 출력되는 헤더 영역
    pageFooter?: PageFooter; // 보고서에서 반복되서 출력되는 푸터 영역
    layout: GridReportLayout; // 보고서에 표현되는 리얼그리드 관련 레이아웃 설정
}

interface GridReportPaperOptions {
    orientation: 'portrait' | 'landscape'; // 종이 방향 설정
    paperSize: 'A0' | 'A1' | 'A2' | 'A3' | 'A4' | 'A5' | 'A6' | 'A7' | 'A8'; // 종이 용지 설정
    marginLeft: number; // px 단위
    marginRight: number; // px 단위
    marginTop: number; // px 단위
    marginBottom: number; // px 단위
}

type GridReportHeader {
    items: TextItem[]
}

/**
 * 그리드 리포트 레이아웃 정보
 */
export type GridReportLayout = {
    /**
     * 보고서 생성시 제외할 그리드의 컬럼이름
     */
    exclude?: ColumnName[];
    /**
     * 활성화 할 경우 그리드의 컬럼의 비율에 맞게 리포트 종이영역에서 자동 조정
     */
    autoWidth?: boolean;
    /**
     * 데이터 행의 최소 높이
     */
    minRowHeight?: number;
    /**
     * 그리드 리포트 헤더 영역 전체 설정
     */
    header?: GridReportLayoutHeader;
    /**
     * 로우 인디케이터 영역 설정
     */
    rowIndicator?: {
        visible: boolean;
        header?: {
            styles?: CommonStyles;
        };
        styles?: CommonStyles;
    };
    /**
     * 각 컬럼 레이아웃에 대한 설정
     */
    columns?: LayoutColumn[];
    /**
     * 데이터 행 영역에 대한 셀 스타일 Callback 설정
     */
    cellStyleCallback?: (
        ctx: PrintContext,
        cell: TableCell,
        row: number,
        value: any,
    ) => CommonStyles;
};
 
/**
 * 그리드 리포트 헤더 레이아웃 정보
 */
export interface GridReportLayoutHeader {
    styles: CommonStyles;
}
 
type TableCell = {
    row: number;
    col: number;
    fieldName: string;
};
 
/**
 * 레이아웃 기본 스타일
 */
type CommonStyleName =
    | 'color'
    | 'backgroundColor'
    | 'fontSize'
    | 'fontWeight'
    | 'textAlign'
    | 'padding'
    | 'paddingLeft'
    | 'paddingRight'
    | 'paddingTop'
    | 'paddingBottom';
 
type CommonStyles = {
    [key in CommonStyleName]?: string | undefined;
};
 
/**
 * 컬럼 이름
 */
type ColumnName = string;
 
/**
 * GridReportLayout.layout.columns 옵션
 */
export type LayoutColumn = {
    name: string;
    header?: {
        styles?: HeaderStyles;
    };
    styles: ColumnStyles;
};

const options = {
    layout: {
        autoWidth: true,
        // 리얼그리드 인디케이터 표시 여부 설정
        rowIndicator: {
            visible: true,
        },
        header: {
            styles: {
                backgroundColor: 'lightblue',
            },
        },
        columns: [
            // 리얼그리드 KorNameColumn 컬럼을 리포트로 출력할 때 설정
            {
                name: 'KorNameColumn',
                styles: {
                    backgroundColor: '#cae8ff',
                },
            },
            {
                // 리얼그리드 SeColumn 컬럼을 리포트로 출력할 때 설정
                name: 'SeColumn',
                styles: {
                    backgroundColor: '#78bbfa',
                },
            },
            // 리얼그리드 PhoneNumberColumn 컬럼을 리포트로 출력할 때 설정
            {
                name: 'PhoneNumberColumn',
                styles: {
                    backgroundColor: '#3892f3',
                },
            },
            // 리얼그리드 DateColumn 컬럼을 리포트로 출력할 때 설정
            {
                name: 'DateColumn',
                styles: {
                    fontWeight: 'bold',
                },
            },
        ],
    },
};
 
viewer = new RealReport.GridReportViewer(container, gridView, options);
viewer.preview({ async: true, pageMark: false, noScroll: true });