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
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
window.onload = function() {
var viewModel = {
gridOptions: {
dataSource: countries,
columnAutoWidth: true,
allowColumnReordering: true,
showBorders: true,
columns: ["Country", {
headerCellTemplate: function(container) {
container.append($("<div>Area, km<sup>2</sup></div>"));
},
dataField: "Area"
}, {
caption: "Population",
columns: [{
caption: "Total",
dataField: "Population_Total",
format: "fixedPoint"
}, {
caption: "Urban",
dataField: "Population_Urban",
format: "percent"
}]
}, {
caption: "Nominal GDP",
columns: [{
caption: "Total, mln $",
dataField: "GDP_Total",
format: "fixedPoint",
sortOrder: "desc"
}, {
caption: "By Sector",
columns: [{
caption: "Agriculture",
width: 95,
dataField: "GDP_Agriculture",
format: {
type: "percent",
precision: 1
}
}, {
caption: "Industry",
width: 80,
dataField: "GDP_Industry",
format: {
type: "percent",
precision: 1
}
}, {
caption: "Services",
width: 85,
dataField: "GDP_Services",
format: {
type: "percent",
precision: 1
}
}]
}]
}]
}
};
ko.applyBindings(viewModel, document.getElementById("grid"));
};
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<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" />
<script src="https://cdn3.devexpress.com/jslib/19.1.5/js/dx.all.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="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="grid">
<div id="gridContainer" data-bind="dxDataGrid: gridOptions"></div>
<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;
}
var 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
}];