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
import React from 'react'; import DataGrid, { Column } from 'devextreme-react/data-grid'; import { countries } from './data.js'; const gdpFormat = { type: 'percent', precision: 1 }; class App extends React.Component { render() { return ( <DataGrid id={'grid'} dataSource={countries} columnAutoWidth={true} allowColumnReordering={true} showBorders={true} > <Column dataField={'Country'} /> <Column dataField={'Area'} headerCellRender={this.renderAreaCellHeader} /> <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> ); } renderAreaCellHeader() { return <div>Area, km<sup>2</sup></div>; } } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('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.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.5/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>
#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; }
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/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16/umd/react.development.js', 'react-dom': 'npm:react-dom@16/umd/react-dom.development.js', 'prop-types': 'npm:prop-types/prop-types.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-react': 'npm:devextreme-react@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', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });