DevExtreme v26.1 is now available.

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

Your search did not match any results.

Vue Data Grid - Header and Footer

The DataGrid allows you to customize a header and a footer in the exported PDF file.

www.wikipedia.org
Backend API
<template> <div id="long-title"> <h3>Country Area, Population, and GDP Structure</h3> </div> <DxDataGrid id="grid" key-expr="ID" :data-source="countries" :show-borders="true" @exporting="onExporting" > <DxExport :enabled="true" :formats="['pdf']" /> <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 setup lang="ts"> import DxDataGrid, { DxColumn, DxExport, type DxDataGridTypes } from 'devextreme-vue/data-grid'; import { jsPDF } from 'jspdf'; import { exportDataGrid } from 'devextreme-vue/common/export/pdf'; import { countries } from './data.ts'; const gdpFormat = { type: 'percent', precision: 1, }; const onExporting = (e: DxDataGridTypes.ExportingEvent) => { const doc = new jsPDF(); const lastPoint = { x: 0, y: 0 }; exportDataGrid({ jsPDFDocument: doc, component: e.component, topLeft: { x: 1, y: 15 }, columnWidths: [30, 20, 30, 15, 22, 22, 20, 20], customDrawCell({ rect }: { rect?: { x: number; y: number; h: number; w: number } }) { if (rect) { if (lastPoint.x < rect.x + rect.w) { lastPoint.x = rect.x + rect.w; } if (lastPoint.y < rect.y + rect.h) { lastPoint.y = rect.y + rect.h; } } }, }).then(() => { // header const header = 'Country Area, Population, and GDP Structure'; const pageWidth = doc.internal.pageSize.getWidth(); const headerWidth = doc.getTextDimensions(header).w; doc.setFontSize(15); doc.text(header, (pageWidth - headerWidth) / 2, 20); // footer const footer = 'www.wikipedia.org'; const footerWidth = doc.getTextDimensions(footer).w; doc.setFontSize(9); doc.setTextColor('#cccccc'); doc.text(footer, (lastPoint.x - footerWidth), lastPoint.y + 5); doc.save('Companies.pdf'); }); }; </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>
export type Country = { ID: number; Country: string; Area: number; Population_Urban: number; Population_Rural: number; Population_Total: number; GDP_Agriculture: number; GDP_Industry: number; GDP_Services: number; GDP_Total: number; }; export const countries: Country[] = [{ 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, }];
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');
<!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/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> <script src="bundles/vendor/vue.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>

Follow the steps below to configure a header/footer:

  1. Call the exportDataGrid(options) method.

  2. Use the following API to specify header/footer layout settings:

    • For a header
      Use the topLeft object to specify a start position for DataGrid export. This position should be below the header.

    • For a footer
      Use the customDrawCell function to calculate the coordinates of the last right cell of the DataGrid.

  3. Execute a promise after the exportDataGrid(options) method. In this promise, specify position and appearance of the header/footer.