Your search did not match any results.
Data Grid

Multi-Row Headers (Bands)

Documentation

The DataGrid widget allows you to group column headers logically to implement a banded layout. In this demo, the columns array has a hierarchical structure, although such a layout can be built on a flat-structured array as well. Note that despite being banded, the nested columns remain interactive.

www.wikipedia.org
Copy to CodeSandBox
Apply
Reset
<template> <dx-data-grid id="grid" :data-source="countries" :column-auto-width="true" :allow-column-reordering="true" :show-borders="true" > <dx-column data-field="Country"/> <dx-column data-field="Area" header-cell-template="headerTemplate" /> <dx-column caption="Population"> <dx-column caption="Total" data-field="Population_Total" format="fixedPoint" /> <dx-column caption="Urban" data-field="Population_Urban" format="percent" /> </dx-column> <dx-column caption="Nominal GDP"> <dx-column caption="Total, mln $" data-field="GDP_Total" format="fixedPoint" sort-order="desc" /> <dx-column caption="By Sector"> <dx-column :width="95" :format="gdpFormat" caption="Agriculture" data-field="GDP_Agriculture" /> <dx-column :width="80" :format="gdpFormat" caption="Industry" data-field="GDP_Industry" /> <dx-column :width="85" :format="gdpFormat" caption="Services" data-field="GDP_Services" /> </dx-column> </dx-column> <div slot="headerTemplate" slot-scope="{ data }" > <div>Area, km<sup>2</sup></div> </div> </dx-data-grid> </template> <script> import DxDataGrid, { DxColumn } from 'devextreme-vue/data-grid'; import { countries } from './data.js'; export default { components: { DxDataGrid, DxColumn }, data() { return { countries: countries, gdpFormat: { type: 'percent', precision: 1 } }; } }; </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/19.1.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.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>Countries 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', paths: { 'npm:': 'https://unpkg.com/' }, map: { vue: 'npm:vue@2.6.3/dist/vue.esm.browser.js', 'vue-loader': 'npm:systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-vue': 'npm:devextreme-vue@19.1', jszip: 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.6/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'devextreme-aspnet-data-nojquery': 'npm:devextreme-aspnet-data-nojquery@2.2.1', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, meta: { '*.vue': { loader: 'vue-loader' }, 'devextreme-aspnet-data-nojquery': { 'esModule': true } }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });