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:
Install Dependencies
To export PivotGrid data to Excel, you first need to install the following third-party libraries:
- npm install --save exceljs file-saver
Enable the Export Button
PivotGrid has a built-in "Export" button. To enable this button, set the export.enabled property to true
.
- //...
- function App() {
- // ...
- return (
- <PivotGrid ... >
- <Export enabled={true} />
- </PivotGrid>
- );
- }
- export default App;
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:
- 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");
- });
- });
Export to CSV
You can also export PivotGrid to CSV. To do this, call the exportPivotGrid(options) method as follows:
- 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:
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:
- 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:
If you have technical questions, please create a support ticket in the DevExpress Support Center.