May 19, 2016
Mehul Harry (DevExpress)

HTML5 Data Grid - Banded Column Layout (Coming soon in v16.1)

We're introducing a great new DataGrid feature – Banded Column Layout. With this feature, you can organize columns into the logical groups (bands), so that you can easily display and reorder entire column sets.

HTML5 Data Grid - Banded Column Layout

While a column is banded, all existing column features still work great:

  • Column Resizing
  • Column Reordering
  • Column Fixing
  • Column Chooser
  • Export

In fact, here's the column chooser in a banded layout:

HTML5 Data Grid - Banded Column Layout - Column Chooser

Banded Column Layout is easy to define and customize. Here's a snippet that shows how the population column from the image above is banded:

$("#gridContainer").dxDataGrid({
    dataSource: countries,
    columnAutoWidth: true,
    allowColumnReordering: 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"
        }, {

This feature is a part of the DevExtreme v16.1 release. Thanks!