Your search did not match any results.
Data Grid

Header and Footer

ExcelJS library allows you to customize worksheets outside of 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 demo illustrates the following customization features:

www.wikipedia.org
Copy to CodeSandBox
Apply
Reset
<template> <DxDataGrid id="grid" :data-source="countries" :show-borders="true" @exporting="onExporting" > <DxExport :enabled="true"/> <DxColumn data-field="Country"/> <DxColumn data-field="Area"/> <DxColumn caption="Population"> <DxColumn caption="Total" data-field="Population_Total" format="fixedPoint" /> <DxColumn caption="Urban" data-field="Population_Urban" format="percent" /> </DxColumn> <DxColumn caption="Nominal GDP"> <DxColumn caption="Total, mln $" data-field="GDP_Total" format="fixedPoint" sort-order="desc" /> <DxColumn caption="By Sector"> <DxColumn :width="95" :format="gdpFormat" caption="Agriculture" data-field="GDP_Agriculture" /> <DxColumn :width="80" :format="gdpFormat" caption="Industry" data-field="GDP_Industry" /> <DxColumn :width="85" :format="gdpFormat" caption="Services" data-field="GDP_Services" /> </DxColumn> </DxColumn> </DxDataGrid> </template> <script> import DxDataGrid, { DxColumn, DxExport } from 'devextreme-vue/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'; export default { components: { DxDataGrid, DxColumn, DxExport }, data() { return { countries: countries, gdpFormat: { type: 'percent', precision: 1 } }; }, methods: { onExporting(e) { const workbook = new ExcelJS.Workbook(); const worksheet = workbook.addWorksheet('CountriesPopulation'); exportDataGrid({ component: e.component, worksheet: worksheet, topLeftCell: { row: 4, column: 1 } }).then(function(dataGridRange) { // header // https://github.com/exceljs/exceljs#rows const headerRow = worksheet.getRow(2); headerRow.height = 30; // https://github.com/exceljs/exceljs#merged-cells worksheet.mergeCells(2, 1, 2, 8); // https://github.com/exceljs/exceljs#value-types headerRow.getCell(1).value = 'Country Area, Population, and GDP Structure'; // https://github.com/exceljs/exceljs#fonts headerRow.getCell(1).font = { name: 'Segoe UI Light', size: 22 }; // https://github.com/exceljs/exceljs#alignment headerRow.getCell(1).alignment = { horizontal: 'center' }; // footer const footerRowIndex = dataGridRange.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(function() { // https://github.com/exceljs/exceljs#writing-xlsx workbook.xlsx.writeBuffer().then(function(buffer) { saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'CountriesPopulation.xlsx'); }); }); e.cancel = true; } } }; </script> <style> #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; } </style>
import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<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.8/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.8/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>
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: { '*.vue': { loader: 'vue-loader' }, }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'vue': 'npm:vue@2.6.3/dist/vue.esm.browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@latest/index.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-vue': 'npm:devextreme-vue@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.17', 'devexpress-gantt': 'npm:devexpress-gantt@1.0.10', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, }, babelOptions: { sourceMaps: false, stage0: true } });