Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

React Data Grid: Excel Export - Customising Content

Customising Cell and Row Group values

The grid cell and row group values exported to Excel can be customised using the following function params for a call to exportDataAsExcel API method or in the defaultExcelExportParams.

gridApi.exportDataAsExcel({
    processCellCallback(params) {
        const value = params.value
        return value === undefined ? '' : `_${value}_`
    },
    processRowGroupCallback(params) {
        return `row group: ${params.node.key}`
    }
})

See below the functions on the ExcelExportParams interface to customise exported grid cell and row group values.

processCellCallback
Function
A callback function invoked once per cell in the grid. Return a string value to be displayed in the export. For example this is useful for formatting date values.
processCellCallback = (
    params: ProcessCellForExportParams
) => string;

interface ProcessCellForExportParams<TData = any> {
  value: any;
  accumulatedRowIndex?: number;
  node?: RowNode<TData> | null;
  column: Column;
  type: string;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
processRowGroupCallback
Function
A callback function invoked once per row group. Return a string to be displayed in the group cell.
processRowGroupCallback = (
    params: ProcessRowGroupForExportParams
) => string;

interface ProcessRowGroupForExportParams<TData = any> {
  // Row node. 
  node: RowNode<TData>;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}

The following example shows Excel customisations where the exported document has the following:

  • All row groups with the prefix row group:
  • All cell values surrounded by _, unless they are undefined, in which case they are empty

Row group column cells are also cells. This means that each row group column cell will first have the processRowGroupCallback invoked for it, and then the returned value will have processCellCallback invoked for it. This is why exported row group cell values will have the _ surrounding the value, which is applied by the processCellCallback.

Customising Column Headers and Group Header Values

The column headers and group headers exported to Excel can be customised using the following function params for a call to exportDataAsExcel API method or in the defaultExcelExportParams.

gridApi.exportDataAsExcel({
    processGroupHeaderCallback(params) {
        return `group header: ${params.columnApi.getDisplayNameForColumnGroup(params.columnGroup, null)}`
    },
    processHeaderCallback(params) {
        return `header: ${params.columnApi.getDisplayNameForColumn(params.column, null)}`
    }
})

See below the functions on the ExcelExportParams interface to customise exported column group headers and headers.

processHeaderCallback
Function
A callback function invoked once per column. Return a string to be displayed in the column header.
processHeaderCallback = (
    params: ProcessHeaderForExportParams
) => string;

interface ProcessHeaderForExportParams<TData = any> {
  column: Column;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
processGroupHeaderCallback
Function
A callback function invoked once per column group. Return a string to be displayed in the column group header. Note that column groups are exported by default, this option will not work with skipColumnGroupHeaders=true.
processGroupHeaderCallback = (
    params: ProcessGroupHeaderForExportParams
) => string;

interface ProcessGroupHeaderForExportParams<TData = any> {
  columnGroup: ColumnGroup;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}

The following example shows Excel customisations where the exported document has the following:

  • Group headers with the prefix group header:
  • Headers with the prefix header:

Next Up

Continue to the next section: Images.