Export Multiple Grids

import React from 'react'; import Button from 'devextreme-react/button'; import TabPanel, { Item } from 'devextreme-react/tab-panel'; import DataGrid, { Column } from 'devextreme-react/data-grid'; import ExcelJS from 'exceljs'; import saveAs from 'file-saver'; /* // Use this import for codeSandBox import FileSaver from 'file-saver'; */ import { exportDataGrid } from 'devextreme/excel_exporter'; import 'devextreme/data/odata/store'; const priceDataSource = { store: { type: 'odata', url: 'https://js.devexpress.com/Demos/DevAV/odata/Products' }, select: ['Product_ID', 'Product_Name', 'Product_Sale_Price', 'Product_Retail_Price'], filter: ['Product_ID', '<', 10] }; const ratingDataSource = { store: { type: 'odata', url: 'https://js.devexpress.com/Demos/DevAV/odata/Products' }, select: ['Product_ID', 'Product_Name', 'Product_Consumer_Rating', 'Product_Category'], filter: ['Product_ID', '<', 10] }; class App extends React.Component { constructor(props) { super(props); this.priceGridRef = React.createRef(); this.ratingGridRef = React.createRef(); } render() { return ( <div> <div id="exportContainer"> <Button text="Export multiple grids" icon="xlsxfile" onClick={this.exportGrids} /> </div> <TabPanel id="tabPanel" deferRendering={false}> <Item title="Price"> <DataGrid id="priceDataGrid" ref={this.priceGridRef} dataSource={priceDataSource} showBorders={true} rowAlternationEnabled={true}> <Column dataField="Product_ID" caption="ID" width={50} /> <Column dataField="Product_Name" caption="Name" /> <Column dataField="Product_Sale_Price" caption="Sale Price" dataType="number" format="currency" /> <Column dataField="Product_Retail_Price" caption="Retail Price" dataType="number" format="currency" /> </DataGrid> </Item> <Item title="Rating"> <DataGrid id="ratingDataGrid" ref={this.ratingGridRef} dataSource={ratingDataSource} showBorders={true} rowAlternationEnabled={true}> <Column dataField="Product_ID" caption="ID" width={50} /> <Column dataField="Product_Name" caption="Name" /> <Column dataField="Product_Consumer_Rating" caption="Rating" /> <Column dataField="Product_Category" caption="Category" /> </DataGrid> </Item> </TabPanel> </div> ); } exportGrids = () => { const context = this; const workbook = new ExcelJS.Workbook(); const priceSheet = workbook.addWorksheet('Price'); const ratingSheet = workbook.addWorksheet('Rating'); priceSheet.getRow(2).getCell(2).value = 'Price'; priceSheet.getRow(2).getCell(2).font = { bold: true, size: 16, underline: 'double' }; ratingSheet.getRow(2).getCell(2).value = 'Rating'; ratingSheet.getRow(2).getCell(2).font = { bold: true, size: 16, underline: 'double' }; exportDataGrid({ worksheet: priceSheet, component: context.priceDataGrid, topLeftCell: { row: 4, column: 2 }, customizeCell: function(options) { context.setAlternatingRowsBackground(options.gridCell, options.excelCell); } }).then(function() { return exportDataGrid({ worksheet: ratingSheet, component: context.ratingDataGrid, topLeftCell: { row: 4, column: 2 }, customizeCell: function(options) { context.setAlternatingRowsBackground(options.gridCell, options.excelCell); } }); }).then(function() { workbook.xlsx.writeBuffer().then(function(buffer) { saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'MultipleGrids.xlsx'); }); }); } setAlternatingRowsBackground(gridCell, excelCell) { if(gridCell.rowType === 'header' || gridCell.rowType === 'data') { if(excelCell.fullAddress.row % 2 === 0) { excelCell.fill = { type: 'pattern', pattern : 'solid', fgColor: { argb: 'D3D3D3' }, bgColor: { argb: 'D3D3D3' } }; } } } get priceDataGrid() { return this.priceGridRef.current.instance; } get ratingDataGrid() { return this.ratingGridRef.current.instance; } } export default App;