New to KendoReact? Start a free 30-day trial

KendoReact Data Grid Excel Export Overview
Premium

Updated on Jul 22, 2026

The KendoReact Data Grid provides the option to export its data to Excel by using the KendoReact Excel Export library.

The following example demonstrates the basic implementation of the Excel export functionality of the Grid.

Change Theme

Theme

Loading ...

Getting Started with the KendoReact Data Grid Excel Export

To enable the Excel export:

Install the @progress/kendo-react-excel-export package.
sh
```
npm i @progress/kendo-react-excel-export
```

Import the ExcelExport component in your React application.

jsx

import { ExcelExport } from '@progress/kendo-react-excel-export';

Wrap the Grid in the ExcelExport component and use the save function to generate the workbook file.

tsx

const exportRef = React.useRef<ExcelExport | null>(null);

const handleExport = () => {
    if (exportRef.current) {
        exportRef.current.save();
    }
};

<ExcelExport data={products} ref={exportRef}>
    <Grid data={products}>
        <GridToolbar>
            <Button type="button" onClick={handleExport}>
                Export to Excel
            </Button>
        </GridToolbar>
        <GridColumn field="ProductName" />
    </Grid>
</ExcelExport>

In the most common setup, you place the export trigger in a GridToolbar and keep a ref to the ExcelExport instance. This keeps the export action close to other Grid actions while still letting you decide exactly which data and columns are written to the file.

When you call save() without additional arguments, the ExcelExport component uses the data and column configuration currently supplied to it. Pass explicit data or columns only when the exported workbook should differ from the Grid content that is currently rendered.

Configuration

You can entirely control the Excel export configuration through the arguments that are passed to the save function of the KendoReact Excel Export component.

Use the following configuration options to choose how closely the exported workbook should match the rendered Grid.

Approach	Use it when
Wrap the Grid in `ExcelExport`	The exported columns should match the rendered Grid and the data is already available in memory
Pass the Grid columns explicitly	The export is triggered outside the wrapper flow or you need to control the exact Grid instance and column collection
Export specific data	The workbook should contain more data than the currently visible rows, such as all pages in a paged or virtualized Grid
Export filtered data	The workbook should contain only the rows that match the active Grid filter
Customize exported columns	The workbook structure should differ from the on-screen Grid, for example for reporting or grouped headers

Wrapping the Grid

If the Grid is passed as a child to the ExcelExport and its columns are defined declaratively by using the GridColumn components, they will be automatically detected. You still need to pass the data of the Grid to the save function or as a data property to the ExcelExport component.

This is the simplest setup when the exported columns should match the Grid columns and the data is already available in memory.

The following example demonstrates the wrapped Grid approach, where GridColumn components are detected automatically and the Grid is passed as a child to the ExcelExport component.

Change Theme

Theme

Loading ...

Passing the Grid Columns

The Grid exposes its columns through the columns field on its ref handle. Supply both the data and the column collection to the save function of the ExcelExport component.

Use this approach when the export is triggered outside the ExcelExport wrapper flow or when you need to be explicit about which Grid instance and column collection are used.

The following example demonstrates how to export Grid columns by explicitly passing the Grid's columns reference and data to the ExcelExport.save() function.

Change Theme

Theme

Loading ...

Exporting Specific Data

To export specific data, pass the data to the save function of the ExcelExport component.

This is the recommended setup for paged or virtualized Grids when users expect the Excel file to contain the full data set instead of only the currently visible rows.

The following example demonstrates how to export all pages of a paged Grid by passing the full unprocessed data array to the save function instead of only the current page.

Change Theme

Theme

Loading ...

Exporting Filtered Data

When the Grid has filtering enabled, apply the active filter to the data before exporting by using the filterBy function from @progress/kendo-data-query and passing the filtered result to the save function. This ensures the exported Excel file contains only the rows that match the current filter.

The following example demonstrates how to export only the rows that match the active Grid filter. Apply the filter, click Export to Excel, and the downloaded file will contain only the filtered data.

Change Theme

Theme

Loading ...

Customizing Exported Columns

You can use the same data as the Grid and customize the exported columns. To export columns that are different from the current Grid columns, include the ExcelExportColumn and ExcelExportColumnGroup components as children to the ExcelExport.

Choose custom export columns when the Excel document needs a different structure than the on-screen Grid, for example when some columns are hidden in the UI or when reporting requires grouped headers.

The following example demonstrates how to define custom export columns using ExcelExportColumn components, producing an Excel file with different column definitions than what is displayed in the Grid.

Change Theme

Theme

Loading ...

Known Limitations

During the export to Excel, the Grid does not use column formats. Column formats are incompatible with Excel. For more information, refer to the page on the Excel-supported formats.
The maximum size of the exported file to Excel has a system-specific limit. For large data sets, it is highly recommended that you use a server-side solution.