KendoReact Data Grid Excel Export OverviewPremium
The KendoReact Data Grid provides you the option to export its data to excel by utilizing the KendoReact Excel Export library.
The KendoReact Data Grid Excel Export in Action
The following example demonstrates the basic implementation of the Excel export functionality of the Grid.
Getting Started with the KendoReact Data Grid Excel Export
To enable the Excel export:
-
Install
kendo-react-excel-exportpackage.shnpm i @progress/kendo-react-excel-export -
Import the ExcelExport component in your React Application.
jsximport { ExcelExport } from '@progress/kendo-react-excel-export'; -
Wrap the Grid in the ExcelExport component and use the ExcelExport
savefunction to export the Grid and save it to excel file.
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.
The ExcelExport enables you to:
- Wrap the Grid in an ExcelExport component
- Pass the Grid columns to the ExcelExport component
- Export specific data
- Export filtered data
- Customize the exported columns of the Grid
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.
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.
Passing the Grid Columns
The Grid exposes its columns through its columns field. To pass the Grid columns, pass its data and columns to the save function of the ExcelExport component.
The following example demonstrates how to export Grid columns by explicitly passing the Grid's columns reference and data to the ExcelExport.save() function.
Exporting Specific Data
To export specific data, pass the data to the save function of the ExcelExport component. For example, if the Grid has its paging enabled but you need to export all pages, pass the unprocessed data to the save function.
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.
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.
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.
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.
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.
- When you use the ExcelExport in older browsers, such as Internet Explorer 9 and Safari, you have to implement a server proxy using the
proxyUrlproperty of the ExcelExport component. You can refer to this Knowledge Base article for an example.