React Grid Exporting

    The Ignite UI for React Grid provides data export functionality through the Grid Toolbar Exporter component. You can export the displayed data to Excel, CSV, or PDF formats. Excel exports use the MS Excel table format, which supports features like filtering and sorting. To enable exporting, place the IgrGridToolbarExporter inside the grid's toolbar. By default, all export formats are enabled.

    React Exporting Example

    Export Grouped Data

    To export grouped data, group the IgrGrid by one or more columns. The browser will download a file named "ExportedDataFile.xlsx" that contains the data from the IgrGrid component in Excel format, grouped by the selected columns. You can find an example at the beginning of the topic.

    Export Multi Column Headers Grid

    You can export IgrGrid with defined multi-column headers. All headers are reflected in the exported Excel file as they are displayed in the IgrGrid. If you want to exclude the defined multi-column headers from the exported data, set the ExporterOption IgnoreMultiColumnHeaders to true.

    [!Note] The exported IgrGrid will not be formatted as a table, since Excel tables do not support multiple column headers.

    [!Note] IgrGridToolbarExporter is also configured to demonstrate how you can control which export formats are available to end users. Use the toolbar exporter options to toggle Excel, CSV, or PDF buttons:

    • exportExcel, exportCsv, exportPdf

    Export Grid with Frozen Column Headers

    By default, the Excel Exporter service exports the grid with scrollable (unfrozen) column headers. In many scenarios you may want to freeze all headers at the top of the exported Excel file so they always stay in view as the user scrolls through the records. To achieve this, set the ExporterOption FreezeHeaders to true.

    [!Note] PDF exports automatically include the column header row at the top of the document, so readers retain the same context when they open or print the file.

    function exportEventFreezeHeaders(args: IgrExporterEventArgs) {
    args.detail.options.freezeHeaders = true;
  }

<IgrGridToolbar>
  <IgrGridToolbarActions>
    <IgrGridToolbarExporter onExportStarted={exportEventFreezeHeaders}></IgrGridToolbarExporter>
  </IgrGridToolbarActions>
</IgrGridToolbar>

    Known Limitations

    Limitation Description
    Max worksheet size The maximum worksheet size supported by Excel is 1,048,576 rows by 16,384 columns.
    Cell Styling The Excel exporter service does not support exporting a custom style applied to a cell component. In such scenarios we recommend using the Excel Library.
    Wide PDF layouts Very wide grids can force PDF columns to shrink to fit the page. Apply column widths or hide low-priority fields before exporting to keep the document legible.

    API References

    Additional Resources

    Our community is active and always welcoming to new ideas.