You can now export React Grid’s data to an Excel document with ease.
In our most recent update, we introduced a new GridExporter component that retains React Grid configurations during the export process. It also makes it easy to customize the export based on specific business requirements. Customization options include custom cell appearance, header and footer rendering, etc.
Basic Export to Excel Configuration
To enable the Export to Excel feature in your React Grid, you need to use two new components:
- ExportPanel renders a panel within the Grid’s UI with an ‘Export to Excel’ button;
- GridExporter creates Excel documents and handles export customizations.
Data Shaping Configuration
In line with our native React product-line philosophy, we gave you full control over exported data and associated data shaping options. You can apply, skip or modify the following Grid’s configurations during Excel data export:
The primary Export configuration principle is simple. GridExporter accepts the same properties as the React Grid’s state plugins. Let’s review how this works.
Sorting and Filtering
To retain the Grid’s sorting and filtering configurations in exported Excel documents, simply pass the `sorting` property value of the SortingState plugin and the `filters` property value of the FilteringState plugin to corresponding GridExporter properties as shown below:
<Grid>
…
<SortingState sorting={sorting} />
<FilteringState filters={filters} />
…
</Grid>
<GridExporter
…
filters={filters}
sorting={sorting}
/>As you can see, sorting and filtering are applied to the exported document:
Grouping
Grouped rows are exported as follows:
- Group captions (aka Group Rows) occupy individual Excel sheet rows;
- Grouped rows are exported as Excel expandable groups.
Multiple group levels are supported:
Selection
React Grid allows end-users to only export selected rows. To export selected rows, pass the `selection` property value of the SelectionState plugin to GridExporter. In this instance, the Export panel automatically renders two items: One to export all data or and to limite export to selected rows.
Summaries
Total Summaries and Group Summaries are exported as Excel formulas. This ensures that summaries are recalculated if data is modified in the exported Excel document.
Export Customization
Cell Customization
Use the ‘customizeCell’ and ‘customizeSummaryCell’ callback properties of GridExporter to alter cell value, display format, or appearance.
Header and Footer Customization
The GridExporter’s ‘customizeHeader’ and ‘customizeFooter’ callback properties allow you to add a header and a footer.
Advanced Customization
Internally, GridExporter uses the ExcelJS open-source library to generate Excel documents. You can access the ExcelJS workbook being exported by handling the ‘onSave’ event. With ExcelJS, you can add extra worksheets or modify the exported worksheet as needed.
The example below demonstrates this approach in action:
const onSave = (workbook) => {
// modify data here
workbook.addWorksheet('My Sheet');
workbook.xlsx.writeBuffer().then((buffer) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'MyWorkbook.xlsx')
});
};
...
<GridExporter
...
onSave={onSave}
/>Refer to the ExcelJS GitHub repository to learn more about its capabilities.
Try it Yourself
To see this new feature in action, please explore our step-by-step guide.
Feedback
As always, we welcome your feedback. Please comment below and let us know what you think of our React Data Grid’s export feature.