DevExtreme React Grid – Export to Excel (v20.1)

DevExtreme Team Blog
09 June 2020
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.

What’s New in v20.1

To explore the scope, breadth and capabilities of our new products/features, please visit: https://www.devexpress.com/Subscriptions/New-2020-1.xml.
No Comments

Please login or register to post comments.