Your search did not match any results.
Data Grid

Header and Footer

ExcelJS library allows you to customize worksheets outside the exported cell area. This demo uses this functionality to add a header (a title before exported data) and a footer (a note after exported data).

Review the onExporting handler to see the data export code. The functions that create header and footer sections utilize the following customization features:

www.wikipedia.org
Copy to CodeSandBox
Apply
Reset
import React from 'react'; import DataGrid, { Column, Export } 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 { countries } from './data.js'; const gdpFormat = { type: 'percent', precision: 1 }; class App extends React.Component { constructor(props) { super(props); this.onExporting = this.onExporting.bind(this); } render() { return ( <DataGrid dataSource={countries} showBorders={true} onExporting={this.onExporting} > <Export enabled={true} /> <Column dataField="Country" /> <Column dataField="Area" /> <Column caption="Population"> <Column dataField="Population_Total" caption="Total" format="fixedPoint" /> <Column dataField="Population_Urban" caption="Urban" format="percent" /> </Column> <Column caption="Nominal GDP"> <Column dataField="GDP_Total" caption="Total, mln $" format="fixedPoint" sortOrder="desc" /> <Column caption="By Sector"> <Column dataField="GDP_Agriculture" caption="Agriculture" format={gdpFormat} width={95} /> <Column dataField="GDP_Industry" caption="Industry" format={gdpFormat} width={80} /> <Column dataField="GDP_Services" caption="Services" format={gdpFormat} width={85} /> </Column> </Column> </DataGrid> ); } onExporting(e) { const workbook = new ExcelJS.Workbook(); const worksheet = workbook.addWorksheet('CountriesPopulation'); exportDataGrid({ component: e.component, worksheet: worksheet, topLeftCell: { row: 4, column: 1 } }).then((cellRange) => { // header const headerRow = worksheet.getRow(2); headerRow.height = 30; worksheet.mergeCells(2, 1, 2, 8); headerRow.getCell(1).value = 'Country Area, Population, and GDP Structure'; headerRow.getCell(1).font = { name: 'Segoe UI Light', size: 22 }; headerRow.getCell(1).alignment = { horizontal: 'center' }; // footer const footerRowIndex = cellRange.to.row + 2; const footerRow = worksheet.getRow(footerRowIndex); worksheet.mergeCells(footerRowIndex, 1, footerRowIndex, 8); footerRow.getCell(1).value = 'www.wikipedia.org'; footerRow.getCell(1).font = { color: { argb: 'BFBFBF' }, italic: true }; footerRow.getCell(1).alignment = { horizontal: 'right' }; }).then(() => { workbook.xlsx.writeBuffer().then((buffer) => { saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'CountriesPopulation.xlsx'); }); }); e.cancel = true; } } 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.2.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/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 class="long-title"> <h3>Country Area, Population, and GDP Structure</h3> </div> <div id="app"></div> </div> </body> </html>
#grid sup { font-size: 0.8em; vertical-align: super; line-height: 0; } .long-title h3 { font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-weight: 200; font-size: 28px; text-align: center; margin-bottom: 20px; }
export const countries = [{ 'ID': 1, 'Country': 'Brazil', 'Area': 8515767, 'Population_Urban': 0.85, 'Population_Rural': 0.15, 'Population_Total': 205809000, 'GDP_Agriculture': 0.054, 'GDP_Industry': 0.274, 'GDP_Services': 0.672, 'GDP_Total': 2353025 }, { 'ID': 2, 'Country': 'China', 'Area': 9388211, 'Population_Urban': 0.54, 'Population_Rural': 0.46, 'Population_Total': 1375530000, 'GDP_Agriculture': 0.091, 'GDP_Industry': 0.426, 'GDP_Services': 0.483, 'GDP_Total': 10380380 }, { 'ID': 3, 'Country': 'France', 'Area': 675417, 'Population_Urban': 0.79, 'Population_Rural': 0.21, 'Population_Total': 64529000, 'GDP_Agriculture': 0.019, 'GDP_Industry': 0.183, 'GDP_Services': 0.798, 'GDP_Total': 2846889 }, { 'ID': 4, 'Country': 'Germany', 'Area': 357021, 'Population_Urban': 0.75, 'Population_Rural': 0.25, 'Population_Total': 81459000, 'GDP_Agriculture': 0.008, 'GDP_Industry': 0.281, 'GDP_Services': 0.711, 'GDP_Total': 3859547 }, { 'ID': 5, 'Country': 'India', 'Area': 3287590, 'Population_Urban': 0.32, 'Population_Rural': 0.68, 'Population_Total': 1286260000, 'GDP_Agriculture': 0.174, 'GDP_Industry': 0.258, 'GDP_Services': 0.569, 'GDP_Total': 2047811 }, { 'ID': 6, 'Country': 'Italy', 'Area': 301230, 'Population_Urban': 0.69, 'Population_Rural': 0.31, 'Population_Total': 60676361, 'GDP_Agriculture': 0.02, 'GDP_Industry': 0.242, 'GDP_Services': 0.738, 'GDP_Total': 2147952 }, { 'ID': 7, 'Country': 'Japan', 'Area': 377835, 'Population_Urban': 0.93, 'Population_Rural': 0.07, 'Population_Total': 126920000, 'GDP_Agriculture': 0.012, 'GDP_Industry': 0.275, 'GDP_Services': 0.714, 'GDP_Total': 4616335 }, { 'ID': 8, 'Country': 'Russia', 'Area': 17098242, 'Population_Urban': 0.74, 'Population_Rural': 0.26, 'Population_Total': 146544710, 'GDP_Agriculture': 0.039, 'GDP_Industry': 0.36, 'GDP_Services': 0.601, 'GDP_Total': 1857461 }, { 'ID': 9, 'Country': 'United States', 'Area': 9147420, 'Population_Urban': 0.81, 'Population_Rural': 0.19, 'Population_Total': 323097000, 'GDP_Agriculture': 0.0112, 'GDP_Industry': 0.191, 'GDP_Services': 0.797, 'GDP_Total': 17418925 }, { 'ID': 10, 'Country': 'United Kingdom', 'Area': 244820, 'Population_Urban': 0.82, 'Population_Rural': 0.18, 'Population_Total': 65097000, 'GDP_Agriculture': 0.007, 'GDP_Industry': 0.21, 'GDP_Services': 0.783, 'GDP_Total': 2945146 }];
System.config({ transpiler: 'plugin-babel', meta: { }, paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16.14.0/umd/react.development.js', 'react-dom': 'npm:react-dom@16.14.0/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.7.2/prop-types.js', 'exceljs': 'npm:exceljs@1.7.0/dist/exceljs.js', 'file-saver': 'npm:file-saver@1.3.8/FileSaver.js', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.25.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@20.2.4', 'devextreme-react': 'npm:devextreme-react@20.2.4', 'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@0.9.7/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.0.5/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@2.0.8/dist/dx-gantt.js', 'preact': 'npm:preact@10.5.7/dist/preact.js', 'preact/hooks': 'npm:preact@10.5.7/hooks/dist/hooks.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-react': { main: 'index.js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });