React PivotGrid - Export

You can export PivotGrid data to Excel. Follow the steps outlined in this help topic to complete the process. For PivotGrid export demos, see:

View Demo

Install Dependencies

To export PivotGrid data to Excel, you first need to install the following third-party libraries:

Installation command
  • npm install --save exceljs file-saver
IMPORTANT
For details about potential vulnerabilities when using an older ExcelJS version and applying CSP rules, refer to the ExcelJS CSP Treats section.

Enable the Export Button

PivotGrid has a built-in "Export" button. To enable this button, set the export.enabled property to true.

App.tsx
  • //...
  •  
  • function App() {
  • // ...
  • return (
  • <PivotGrid ... >
  • <Export enabled={true} />
  • </PivotGrid>
  • );
  • }
  •  
  • export default App;
NOTE
When users click the "Export" button in PivotGrid, the onExporting event handler is executed.

Export to XLSX

All export operations use the exportPivotGrid(options) method from the excelExporter module.

Before starting with exportPivotGrid, obtain:

  • A PivotGrid instance.
  • A target Excel worksheet.

An instance can be obtained through an event handler like onExporting, while the worksheet needs pre-creation:

JavaScript
  • const workbook = new ExcelJS.Workbook();
  • const worksheet = workbook.addWorksheet('Main sheet');

The following code snippet exports PivotGrid data as a blob that is then saved to an XLSX file.

  • exportPivotGrid({
  • worksheet: worksheet,
  • component: pivotGridInstance
  • }).then(function() {
  • workbook.xlsx.writeBuffer().then(function(buffer: BlobPart) {
  • saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Sales.xlsx");
  • });
  • });
NOTE
You can pass a PivotGrid instance, a worksheet, and other properties to exportPivotGrid to customize your Excel sheet. For a full list, refer to PivotGridExportOptions.

Export to CSV

IMPORTANT
Refer to the CSV Injection section for information about CSV Injection Attacks.

You can also export PivotGrid to CSV. To do this, call the exportPivotGrid(options) method as follows:

App.tsx
  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  • import PivotGrid, { PivotGridTypes } from 'devextreme-react/pivot-grid';
  • import { Workbook } from 'exceljs';
  • import { saveAs } from 'file-saver-es';
  • import { exportPivotGrid } from 'devextreme/excel_exporter';
  •  
  • const onExporting = (e: PivotGridTypes.ExportingEvent) => {
  • const workbook = new Workbook();
  • const worksheet = workbook.addWorksheet('Employees');
  • exportPivotGrid({
  • component: e.component,
  • worksheet: worksheet
  • }).then(function() {
  • workbook.csv.writeBuffer().then(function(buffer) {
  • saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Report.csv");
  • });
  • });
  • };
  •  
  • export default function App() {
  • return (
  • <PivotGrid ...
  • onExporting={onExporting}
  • />
  • );
  • }

Export Field Panel

PivotGrid does not export field panel headers. To enable their export, pass the following properties to exportPivotGrid:

View Demo

Customize Cells

Use the customizeCell function inside the exportPivotGrid method to customize exported cells.

For instance, to outline (group) data in an Excel worksheet, define customizeCell as shown below:

App.js
  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  • import PivotGrid, { PivotGridTypes } from 'devextreme-react/pivot-grid';
  • import { Workbook } from 'exceljs';
  • import { saveAs } from 'file-saver-es';
  • import { exportPivotGrid } from 'devextreme/excel_exporter';
  •  
  • const onExporting = (e: PivotGridTypes.ExportingEvent) => {
  • const workbook = new Workbook();
  • const worksheet = workbook.addWorksheet('Companies');
  • exportPivotGrid({
  • component: e.component,
  • worksheet: worksheet,
  • customizeCell(e) {
  • if (e.pivotCell.area === 'row' && e.pivotCell.path?.length > 0) {
  • worksheet.getRow(e.pivotCell.rowIndex + 1).outlineLevel = e.pivotCell.path.length - 1;
  • }
  • }
  • }).then(function() {
  • workbook.xlsx.writeBuffer().then(function(buffer: BlobPart) {
  • saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Companies.xlsx");
  • });
  • });
  • };
  •  
  • export default function App() {
  • return (
  • <PivotGrid ...
  • onExporting={onExporting}
  • />
  • );
  • }

For another example of customizing your exported PivotGrid, see the following demo:

View Demo