DevExtreme v24.2 is now available.

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

Your search did not match any results.

JavaScript/jQuery 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
$(() => { $('#gridContainer').dxDataGrid({ dataSource: countries, keyExpr: 'ID', showBorders: true, export: { enabled: true, }, onExporting(e) { const workbook = new ExcelJS.Workbook(); const worksheet = workbook.addWorksheet('CountriesPopulation'); DevExpress.excelExporter.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' }; }).then(() => { workbook.xlsx.writeBuffer().then((buffer) => { saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'CountriesPopulation.xlsx'); }); }); }, columns: [ 'Country', 'Area', { caption: 'Population', columns: [{ caption: 'Total', dataField: 'Population_Total', format: 'fixedPoint', }, { caption: 'Urban', dataField: 'Population_Urban', dataType: 'number', format: { type: 'percent' }, }], }, { caption: 'Nominal GDP', columns: [{ caption: 'Total, mln $', dataField: 'GDP_Total', format: 'fixedPoint', sortOrder: 'desc', }, { caption: 'By Sector', columns: [{ caption: 'Agriculture', dataField: 'GDP_Agriculture', width: 95, format: { type: 'percent', precision: 1, }, }, { caption: 'Industry', dataField: 'GDP_Industry', width: 80, format: { type: 'percent', precision: 1, }, }, { caption: 'Services', dataField: 'GDP_Services', width: 85, format: { type: 'percent', precision: 1, }, }], }], }, ], }); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" 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" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.12.1/polyfill.min.js" integrity="sha384-FCwalFIn/oY5yqK5WoHWMqsdHAQgG5e8hoHwtQ/stzqubOMOvFXsWocs/XvlofdX" crossorigin="anonymous" ></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.4.0/exceljs.min.js" integrity="sha384-Pqp51FUN2/qzfxZxBCtF0stpc9ONI6MYZpVqmo8m20SoaQCzf+arZvACkLkirlPz" crossorigin="anonymous" ></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js" integrity="sha384-PlRSzpewlarQuj5alIadXwjNUX+2eNMKwr0f07ShWYLy8B6TjEbm7ZlcN/ScSbwy" crossorigin="anonymous" ></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.2.3/css/dx.light.css" /> <script src="js/dx.all.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="data.js"></script> <script src="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="gridContainer"></div> </div> </body> </html>
#gridContainer 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; }
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, }];