Your search did not match any results.
Data Grid

Export Multiple Grids

The exportDataGrid() method allows users to export multiple grids to one Excel document. Grids are exported consequently in a chain of Promises.

In this demo, this functionality is used to export two DataGrids into separate worksheets in the same workbook. Starting position of each exported grid is set using the topLeftCell property.

Use the customizeCell method to customize the exported worksheets.

Backend API
Copy to CodeSandBox
Apply
Reset
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 { Workbook } from 'exceljs'; import { saveAs } from 'file-saver-es'; // Our demo infrastructure requires us to use 'file-saver-es'. // We recommend that you use the official 'file-saver' package in your applications. 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', key: 'Product_ID', }, 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', key: 'Product_ID', }, 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 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: ({ gridCell, excelCell }) => { context.setAlternatingRowsBackground(gridCell, excelCell); }, }).then(() => exportDataGrid({ worksheet: ratingSheet, component: context.ratingDataGrid, topLeftCell: { row: 4, column: 2 }, customizeCell: ({ gridCell, excelCell }) => { context.setAlternatingRowsBackground(gridCell, excelCell); }, })).then(() => { workbook.xlsx.writeBuffer().then((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;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('app'), );
<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.3/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.3/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.js"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
#priceDataGrid, #ratingDataGrid { padding: 10px; } #exportContainer { text-align: right; } #tabPanel { padding-top: 10px; }
window.config = { transpiler: 'plugin-babel', meta: { 'devextreme/localization.js': { 'esModule': true, }, 'exceljs': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, defaultExtension: 'js', map: { 'react': 'npm:react@17.0.2/umd/react.development.js', 'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.7.2/prop-types.js', 'exceljs': 'npm:exceljs@3.8.0/dist/exceljs.min.js', 'file-saver-es': 'npm:file-saver-es@2.0.5/dist/FileSaver.min.js', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@21.2.3/cjs', 'devextreme-react': 'npm:devextreme-react@21.2.3', 'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.5.5/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.1.37/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@3.1.24/dist/dx-gantt.js', '@devextreme/vdom': 'npm:@devextreme/vdom@2.2.3', '@devextreme/runtime': 'npm:@devextreme/runtime@2.3.8', 'inferno': 'npm:inferno@7.4.10/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat@7.4.10/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.10/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom@1.0.7/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.10/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.10/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class@7.4.10/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras@7.4.10/dist/inferno-extras.min.js', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', }, packages: { 'devextreme': { defaultExtension: 'js', }, '@devextreme/vdom': { defaultExtension: 'js', }, 'devextreme-react': { main: 'index.js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@2.3.8/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, react: true, }, }; System.config(window.config);