
# realgrid style realreport

You can easily convert the grid data and layout into a report for printing using [GridReportViewer](https://realreport.co.kr/docs/viewer/grid-report/01-install).

Additional demos and documents are provided on the [Real Report](https://realreport.co.kr/) homepage.

Grid report output outputs the values displayed on the screen as a report.
When printing a report, you can specify the style of the report as the same as the grid with the style property.

```js
const fields = [
  { fieldName: 'KorCountry', dataType: 'text' },
  { fieldName: 'ProductId', dataType: 'text' },
  { fieldName: 'OrderDate', dataType: 'datetime' },
  { fieldName: 'ToMonth', dataType: 'number' },
  { fieldName: 'Month', dataType: 'number' },
  { fieldName: 'SaveCost', dataType: 'number' },
];

const columns = [
  {
    name: 'KorCountry',
    fieldName: 'KorCountry',
    width: '180',
    header: { text: 'Investment Country', styleName: 'orange-column' },
    renderer: { type: 'text' },
    styleName: 'blue-color',
  },
  {
    name: 'ProductId',
    fieldName: 'ProductId',
    width: '150',
    header: { text: 'Product ID' },
  },
  {
    name: 'OrderDate',
    fieldName: 'OrderDate',
    width: '100',
    header: { text: 'Order Date' },
  },
  {
    name: 'ToMonth',
    fieldName: 'ToMonth',
    width: '80',
    numberFormat: '#,##0',
    header: { text: 'Payment Count' },
  },
  {
    name: 'SaveCost',
    fieldName: 'SaveCost',
    width: '100',
    numberFormat: '#,##0',
    header: { text: 'Payment Amount' },
  },
];

const reportOptions = {
  title: {
    text: 'Report Style',
    top: '20px',
    styles: {
      fontFamily: 'Arial',
      fontwhenze: '3em',
      fontWeight: '700',
      borderBottom: '2px solid blue',
    },
  },
  subTitle: {
    text: 'Investment Country Style',
    top: '70px',
    styles: {
      fontwhenze: '14px',
      fontStyle: 'italic',
      textDecoration: 'underline',
      paddingTop: '30px',
      paddingBottom: '30px',
    },
  },
  pageHeader: {
    items: [
      { value: '${page}', top: '0', right: '20px' },
      { top: '0', text: '/', right: '10px' },
      { value: '${pages}', right: '0', top: '0' },
    ],
  },
  gridHeader: {
    items: [
      { text: 'First Half', left: '0', styles: { fontwhenze: '14px' } },
      { text: new Date().toLocaleDateString('en-CA'), right: '0px', styles: { color: 'blue' } },
    ],
  },
  pageFooter: {
    items: [{ value: '${page}', align: 'center' }],
  },
  layout: {
    autoWidth: false,
    columns: [
      {
        name: 'KorCountry',
        styles: { backgroundColor: '#92c4f6' },
        header: { styles: { backgroundColor: '#fb8e27' } },
      },
    ],
  },
};

let gridReportWindowPopup = null;

function onGridReportPreviewPopup() {
  const w = Math.min(screen.width, 1024);
  const h = Math.min(screen.height, 768);
  const x = (screen.width - w) / 2;
  const y = (screen.height - h) / 2;
  const options = 'left=' + x + ',top=' + y + ',width=' + w + ',height=' + h;

  if (gridReportWindowPopup === null || gridReportWindowPopup.closed) {
    gridReportWindowPopup = window.open('./preview.html', 'print', options);
    gridReportWindowPopup.gridView = gridView;
    gridReportWindowPopup.dataProvider = dataProvider;
    gridReportWindowPopup.reportOptions = reportOptions;
    gridReportWindowPopup.onload = () => {
      const gridReportPreviewFn = gridReportWindowPopup['previewGridReport'];
      gridReportPreviewFn(gridView, reportOptions);
      gridReportWindowPopup.window.hidePrintPopup();
    };
  } else {
    const gridReportPreviewFn = gridReportWindowPopup['previewGridReport'];
    gridReportPreviewFn(gridView, reportOptions);
    gridReportWindowPopup.window.hidePrintPopup();
    gridReportWindowPopup.focus();
  }
}

function setAutoWidth() {
  reportOptions.layout.autoWidth = document.getElementById('reportAutoWidth').checked;
}

const { gridView, dataProvider } = RealGrid.createGrid('realgrid', {
  columns,
  header: {
    height: 40,
  },
  display: {
    rowHeight: 36,
    emptyMessage: 'No data to display.',
  },
  footer: {
    height: 40,
  },
  stateBar: {
    width: 16,
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data200.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  },
}, {
  fields,
});

window.gridView = gridView;
window.dataProvider = dataProvider;
```

When creating a report viewer, you can use the grid object to output a report that matches the currently displayed columns and data.

```js
var reportOptions ={
    title: {
        text: '투자 제품 목록',
        top: '20px',
        styles: {
            fontFamily: 'Arial',
            fontSize: '3em',
            fontWeight: '700',
            borderBottom: '2px solid blue',
        },
    },
    subTitle: {
        text: '2025년 제품 목록',
        top: '70px',
        styles: {
            fontSize: '14px',
            fontStyle: 'italic',
            textDecoration: 'underline',
            paddingTop: '30px',
            paddingBottom: '30px',
        },
    },
    pageHeader: {
        items: [
            {
                value: '${page}',
                top: '0',
                right: '20px',
            },
            {
                top: '0',
                text: '/',
                right: '10px',
            },
            {
                value: '${pages}',
                right: '0',
                top: '0',
            },
        ],
    },
    gridHeader: {
        items: [
            {
                text: '상반기',
                left: '0',
                styles: {
                    fontSize: '14px',
                },
            },
            {
                text: new Date().toLocaleDateString('en-CA'),
                right: '0px',
                styles: {
                    color: 'blue',
                },
            },
        ],
    },
    pageFooter: {
        items: [
            {
                value: '${page}',
                align: 'center',
            },
        ],
    },
    layout: {
        autoWidth: false,
        columns: [
            // 리얼그리드 투자국가 컬럼을 리포트로 출력할 때 설정
            {
                name: 'KorCountry',
                styles: {
                    backgroundColor: "#92c4f6"
                },
                header: {
                    styles:{
                        backgroundColor: "#fb8e27"
                    }
                }
            }
        ],
    }
}

document.addEventListener('DOMContentLoaded', function () { 
    const viewer = new RealReport.GridReportViewer ( 
        "realreport", 
        gridView, 
        reportOptions 
    ); 
    viewer.preview()
})
```

## Dynamic style report output

If you use the cellStyleCallback function of the report to specify the same conditions and styles as the grid dynamic style, a report with the same color applied will be output.

```js
const fields = [
  { fieldName: 'KorCountry', dataType: 'text' },
  { fieldName: 'ProductId', dataType: 'text' },
  { fieldName: 'OrderDate', dataType: 'datetime' },
  { fieldName: 'ToMonth', dataType: 'number' },
  { fieldName: 'Month', dataType: 'number' },
  { fieldName: 'SaveCost', dataType: 'number' },
];

const columns = [
  {
    name: 'KorCountry',
    fieldName: 'KorCountry',
    width: '180',
    header: { text: 'Investment Country' },
    renderer: { type: 'text' },
  },
  {
    name: 'ProductId',
    fieldName: 'ProductId',
    width: '150',
    header: { text: 'Product ID' },
  },
  {
    name: 'OrderDate',
    fieldName: 'OrderDate',
    width: '100',
    header: { text: 'Order Date' },
  },
  {
    name: 'ToMonth',
    fieldName: 'ToMonth',
    width: '80',
    numberFormat: '#,##0',
    header: { text: 'Payment Count' },
    styleCallback: function (grid, dataCell) {
      const ret = {};
      if (dataCell.value <= 10) {
        ret.styleName = 'red-column';
      } else if (dataCell.value >= 20) {
        ret.styleName = 'blue-column';
      } else {
        ret.styleName = 'orange-column';
      }
      return ret;
    },
  },
  {
    name: 'SaveCost',
    fieldName: 'SaveCost',
    width: '100',
    numberFormat: '#,##0',
    header: { text: 'Payment Amount' },
    styleCallback: function (grid, dataCell) {
      const ret = {};
      if (dataCell.value <= 50000) {
        ret.styleName = 'red-column';
      } else if (dataCell.value >= 100000) {
        ret.styleName = 'blue-column';
      } else {
        ret.styleName = 'orange-column';
      }
      return ret;
    },
  },
];

const reportOptions = {
  title: {
    text: 'Report Style',
    top: '20px',
    styles: {
      fontFamily: 'Arial',
      fontwhenze: '3em',
      fontWeight: '700',
      borderBottom: '2px solid blue',
    },
  },
  subTitle: {
    text: 'Dynamic Style',
    top: '70px',
    styles: {
      fontwhenze: '14px',
      fontStyle: 'italic',
      textDecoration: 'underline',
      paddingTop: '30px',
      paddingBottom: '30px',
    },
  },
  pageHeader: {
    items: [
      { value: '${page}', top: '0', right: '20px' },
      { top: '0', text: '/', right: '10px' },
      { value: '${pages}', right: '0', top: '0' },
    ],
  },
  gridHeader: {
    items: [
      { text: 'First Half', left: '0', styles: { fontwhenze: '14px' } },
      { text: new Date().toLocaleDateString('en-CA'), right: '0px', styles: { color: 'blue' } },
    ],
  },
  pageFooter: {
    items: [{ value: '${page}', align: 'center' }],
  },
  layout: {
    autoWidth: false,
    cellStyleCallback: (ctx, cell, row, value) => {
      if (cell.fieldName === 'ToMonth') {
        if (value <= 10) {
          return { backgroundColor: '#f63619' };
        } else if (value >= 20) {
          return { backgroundColor: '#92c4f6' };
        } else {
          return { backgroundColor: '#ff8b00' };
        }
      }
      if (cell.fieldName === 'SaveCost') {
        if (value <= 50000) {
          return { backgroundColor: '#f63619' };
        } else if (value >= 100000) {
          return { backgroundColor: '#92c4f6' };
        } else {
          return { backgroundColor: '#ff8b00' };
        }
      }
    },
  },
};

let gridReportWindowPopup = null;

function onGridReportPreviewPopup() {
  const w = Math.min(screen.width, 1024);
  const h = Math.min(screen.height, 768);
  const x = (screen.width - w) / 2;
  const y = (screen.height - h) / 2;
  const options = 'left=' + x + ',top=' + y + ',width=' + w + ',height=' + h;

  if (gridReportWindowPopup === null || gridReportWindowPopup.closed) {
    gridReportWindowPopup = window.open('./preview.html', 'print', options);
    gridReportWindowPopup.gridView = gridView;
    gridReportWindowPopup.dataProvider = dataProvider;
    gridReportWindowPopup.reportOptions = reportOptions;
    gridReportWindowPopup.onload = () => {
      const gridReportPreviewFn = gridReportWindowPopup['previewGridReport'];
      gridReportPreviewFn(gridView, reportOptions);
      gridReportWindowPopup.window.hidePrintPopup();
    };
  } else {
    const gridReportPreviewFn = gridReportWindowPopup['previewGridReport'];
    gridReportPreviewFn(gridView, reportOptions);
    gridReportWindowPopup.window.hidePrintPopup();
    gridReportWindowPopup.focus();
  }
}

function setAutoWidth() {
  reportOptions.layout.autoWidth = document.getElementById('reportAutoWidth').checked;
}

const { gridView, dataProvider } = RealGrid.createGrid('realgrid', {
  columns,
  header: {
    height: 40,
  },
  display: {
    rowHeight: 36,
    emptyMessage: 'No data to display.',
  },
  footer: {
    height: 40,
  },
  stateBar: {
    width: 16,
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data200.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  },
}, {
  fields,
});

window.gridView = gridView;
window.dataProvider = dataProvider;
```

```js
var reportOptions ={
    title: {
        text: '리포트 스타일',
        top: '20px',
        styles: {
            fontFamily: 'Arial',
            fontSize: '3em',
            fontWeight: '700',
            borderBottom: '2px solid blue',
        },
    },
    subTitle: {
        text: '동적 스타일',
        top: '70px',
        styles: {
            fontSize: '14px',
            fontStyle: 'italic',
            textDecoration: 'underline',
            paddingTop: '30px',
            paddingBottom: '30px',
        },
    },
    pageHeader: {
        items: [
            {
                value: '${page}',
                top: '0',
                right: '20px',
            },
            {
                top: '0',
                text: '/',
                right: '10px',
            },
            {
                value: '${pages}',
                right: '0',
                top: '0',
            },
        ],
    },
    gridHeader: {
        items: [
            {
                text: '상반기',
                left: '0',
                styles: {
                    fontSize: '14px',
                },
            },
            {
                text: new Date().toLocaleDateString('en-CA'),
                right: '0px',
                styles: {
                    color: 'blue',
                },
            },
        ],
    },
    pageFooter: {
        items: [
            {
                value: '${page}',
                align: 'center',
            },
        ],
    },
    layout: {
        autoWidth: false,
        cellStyleCallback: (ctx, cell, row, value) => {
            if(cell.fieldName == "ToMonth"){
                if(value <= 10){
                    return {backgroundColor: "#f63619"}
                }else if (value >= 20){
                    return {backgroundColor: "#8fe51f"}
                }else {
                    return {backgroundColor: "#ff8b00"}
                }
            }

            if(cell.fieldName == "SaveCost"){
                if(value <= 50000){
                    return {backgroundColor: "#f63619"}
                    }else if (value >= 100000){
                    return {backgroundColor: "#8fe51f"}
                    }else {
                    return {backgroundColor: "#ff8b00"}
                    }
            }
        }
    }
}

document.addEventListener('DOMContentLoaded', function () {
    const viewer = new RealReport.GridReportViewer (
            "realreport",
            gridView,
            reportOptions
        );
    viewer.preview()
})
```