DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React 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
Backend API
import React from 'react'; import DataGrid, { Column, DataGridTypes, Export } from 'devextreme-react/data-grid'; import { Workbook } from 'exceljs'; import { saveAs } from 'file-saver-es'; import { exportDataGrid } from 'devextreme/excel_exporter'; import { countries } from './data.ts'; const gdpFormat = { type: 'percent', precision: 1, }; const onExporting = (e: DataGridTypes.ExportingEvent) => { const workbook = new Workbook(); const worksheet = workbook.addWorksheet('CountriesPopulation'); exportDataGrid({ component: e.component, 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' }; workbook.xlsx.writeBuffer().then((buffer) => { saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'CountriesPopulation.xlsx'); }); }); }; const App = () => ( <> <div id="long-title"> <h3>Country Area, Population, and GDP Structure</h3> </div> <DataGrid dataSource={countries} keyExpr="ID" showBorders={true} onExporting={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> </> ); export default App;
import React from 'react'; import DataGrid, { Column, Export } from 'devextreme-react/data-grid'; import { Workbook } from 'exceljs'; import { saveAs } from 'file-saver-es'; import { exportDataGrid } from 'devextreme/excel_exporter'; import { countries } from './data.js'; const gdpFormat = { type: 'percent', precision: 1, }; const onExporting = (e) => { const workbook = new Workbook(); const worksheet = workbook.addWorksheet('CountriesPopulation'); exportDataGrid({ component: e.component, 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' }; workbook.xlsx.writeBuffer().then((buffer) => { saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'CountriesPopulation.xlsx'); }); }); }; const App = () => ( <React.Fragment> <div id="long-title"> <h3>Country Area, Population, and GDP Structure</h3> </div> <DataGrid dataSource={countries} keyExpr="ID" showBorders={true} onExporting={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> </React.Fragment> ); export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );
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, }];
window.exports = window.exports || {}; window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, jsx: 'react', }, meta: { 'react': { 'esModule': true, }, 'typescript': { 'exports': 'ts', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, 'exceljs': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, defaultExtension: 'js', map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', '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.8.1/prop-types.js', 'exceljs': 'npm:exceljs@4.4.0/dist/exceljs.min.js', 'file-saver-es': 'npm:file-saver-es@2.0.5/dist/FileSaver.min.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@24.1.7/cjs', 'devextreme-react': 'npm:devextreme-react@24.1.7/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.12/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', 'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3', // 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', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'devextreme': { defaultExtension: 'js', }, 'devextreme-react': { main: 'index.js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/localization/messages': { format: 'json', defaultExtension: 'json', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.13/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, react: true, }, }; System.config(window.config);
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));
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, }, ];
<!DOCTYPE html> <html lang="en"> <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=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.7/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/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.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <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; }