DevExtreme v23.1 is now available.

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

Free Trial Buy

Band Columns

Unlike data columns, band columns do not hold any data. Instead, they collect two or more data columns under one column header.

DevExtreme HTML5 JavaScript DataGrid BandColumns MultiRowHeaders BandedLayout

To set up this layout, describe the hierarchy of columns directly in an object of the columns array. For example, the following code bands three columns under the "Contacts" header.

jQuery
JavaScript
$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [{
            caption: "Contacts",
            columns: ["Email", "Mobile_Phone", "Skype"]
        }]
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxi-column caption="Contacts">
        <dxi-column dataField="Email"></dxi-column>
        <dxi-column dataField="Mobile_Phone"></dxi-column>
        <dxi-column dataField="Skype"></dxi-column>
    </dxi-column>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

View Demo

If you use the customizeColumns function to configure columns, the hierarchy cannot be described declaratively. To band columns in this case, use the isBand and ownerBand options. Using the same options, you can distinguish band and nested columns from other columns in code.

jQuery
JavaScript
$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        customizeColumns: function(columns) {
            columns.push({ // Pushes the "Contacts" band column into the "columns" array
                caption: "Contacts",
                isBand: true
            });

            var contactsFields = ["Email", "Mobile_Phone", "Skype"];
            for (var i = 0; i < columns.length - 1; i++) {
                if (contactsFields.indexOf(columns[i].dataField) > -1) // If the column belongs to "Contacts",
                    columns[i].ownerBand = columns.length - 1; // assigns "Contacts" as the owner band column
            }
        }
    });
});
Angular
TypeScript
HTML
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    customizeColumns (columns) {
        columns.push({ // Pushes the "Contacts" band column into the "columns" array
            caption: "Contacts",
            isBand: true
        });

        var contactsFields = ["Email", "Mobile_Phone", "Skype"];
        for (var i = 0; i < columns.length - 1; i++) {
            if (contactsFields.indexOf(columns[i].dataField) > -1) // If the column belongs to "Contacts",
                columns[i].ownerBand = columns.length - 1; // assigns "Contacts" as the owner band column
        }
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
<dx-data-grid ...
    [customizeColumns]="customizeColumns">
</dx-data-grid>
NOTE
Nested columns have almost every option of a data column, except fixed and fixedPosition. Band columns, on the contrary, support a very limited set of options; all of them are listed in the isBand option's description.

Band columns support hierarchies of any nesting level making the following structure acceptable.

jQuery
JavaScript
$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [{
            caption: 'A',
            columns: [ 'A1', 'A2', {
                caption: 'A3',
                columns: ['A31', 'A32', {
                    caption: 'A33',
                    columns: ['A331', 'A332', 'A333']
                }]
            }]
        }]
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxi-column caption="A">
        <dxi-column dataField="A1"></dxi-column>
        <dxi-column dataField="A2"></dxi-column>
        <dxi-column caption="A3">
            <dxi-column dataField="A31"></dxi-column>
            <dxi-column dataField="A32"></dxi-column>
            <dxi-column caption="A33">
                <dxi-column dataField="A331"></dxi-column>
                <dxi-column dataField="A332"></dxi-column>
                <dxi-column dataField="A333"></dxi-column>
            </dxi-column>
        </dxi-column>
    </dxi-column>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})