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 every data column option except fixed, fixedPosition, type, and buttons. Band columns only support the options listed in the isBand option's description.

Band columns support hierarchies of any nesting level and enables you to use the following structure:

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
    ],
    // ...
})