React Grid - Export

React Grid users can export grid data to an Excel document.

Note that the plugin order is important.

Basic Setup

  1. Configure the GridExporter

    Import the GridExporter and place it after the Grid component. Specify the ref, columns, and rows properties of the GridExporter:

    const exporterRef = useRef();
    ...
    <Grid>
    ...
    </Grid>
    <GridExporter
     ref={exporterRef}
     columns={columns}
     rows={rows}
    />
  2. Configure the ExportPanel

    Import the ExportPanel plugin and add it to the Grid.

  3. Initiate export

    The GridExporter provides an exportGrid method that initiates export. Use the ref from the first step to call this method. In the following code, we call it in the startExport callback of the ExportPanel plugin, but it can be called anywhere else in your code.

    const startExport = (options) => {
     exporterRef.current.exportGrid(options);
    };
    ...
    <ExportPanel startExport={startExport} />
  4. Save the file

    To save the file to the user's local storage at runtime, implement the onSave callback for the GridExporter component. In the following code, the file is saved via the file-saver package, but you can use any other similar package.

    import saveAs from 'file-saver';
    ...
    const onSave = (workbook) => {
     workbook.xlsx.writeBuffer().then((buffer) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx');
     });
    };

The following demo shows export in action:

Supported Grid Features

To apply the Grid's data shaping settings to an exported Excel document, pass the settings to the following GridExporter properties:

  • sorting
  • filtering
  • grouping
  • selection
  • totalSummaryItems and groupSummaryItems

Excel Document Customization

Cell Customization

Use the customizeCell and customizeSummaryCell functions to change the appearance of data cells or summary cells, respectively.

Use the customizeHeader and customizeFooter functions to add a header and a footer.