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 option.

Use the customizeCell method to customize the exported worksheets.

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 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;
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/20.1.7/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.7/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; }
System.config({ transpiler: 'plugin-babel', meta: { }, paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16/umd/react.development.js', 'react-dom': 'npm:react-dom@16/umd/react-dom.development.js', 'prop-types': 'npm:prop-types/prop-types.js', 'exceljs': 'npm:exceljs@3.3.1/dist/exceljs.js', 'file-saver': 'npm:file-saver@1.3.8/FileSaver.js', 'devextreme': 'npm:devextreme@20.1', 'devextreme-react': 'npm:devextreme-react@20.1', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram@1.0.14', 'devexpress-gantt': 'npm:devexpress-gantt@1.0.7', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, }, babelOptions: { sourceMaps: false, stage0: true, react: true } });