React TreeList - columns.columns

Configures columns.

Selector: Column
Type:

Array<TreeList Column | String>

Default Value: undefined

Unlike normal columns, band columns do not hold data. Instead, they collect two or more columns under one column header. To set up this layout, declare the band column using a hierarchical structure. For this, assign the nested columns to the columns field of the band column. For example, the following code declares the "Address" band column and nests three columns within it.

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [{
            caption: "Address",
            columns: ["City", "Street", "Apartment"]
        }, {
            // ...
        }]
    });
});
Angular
HTML
TypeScript
<dx-tree-list ... >
    <dxi-column caption="Address">
        <dxi-column dataField="City"></dxi-column>
        <dxi-column dataField="Street"></dxi-column>
        <dxi-column dataField="Apartment"></dxi-column>
    </dxi-column>
</dx-tree-list>
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxTreeList ... >
        <DxColumn caption="Address">
            <DxColumn data-field="City" />
            <DxColumn data-field="Street" />
            <DxColumn data-field="Apartment" />
        </DxColumn>
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList, {
    DxColumn
} from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList,
        DxColumn
    },
    // ...
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import TreeList, {
    Column
} from 'devextreme-react/tree-list';

export default function App() {
    return (
        <TreeList ... >
            <Column caption="Address">
                <Column dataField="City" />
                <Column dataField="Street" />
                <Column dataField="Apartment" />
            </Column>
        </TreeList>
    );
}

A nested column has almost every property a regular column has. These properties are described in the columns section of the Reference.

NOTE
There is an exception though: nested columns cannot be fixed alone, therefore specifying the fixed and fixedPosition properties for them is useless. However, the whole band column can be fixed as usual.

For example, the following code specifies the width and sortOrder properties of the "Street" column nested within the fixed "Address" band column.

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [{
            caption: "Address",
            fixed: true,
            fixedPosition: "right",
            columns: [
                "City", {
                    dataField: "Street",
                    width: 100,
                    sortOrder: "asc"
                },
                "Apartment"
            ]
        }, {
            // ...
        }]
    });
});
Angular
HTML
TypeScript
<dx-tree-list ... >
    <dxi-column
        caption="Address"
        [fixed]="true"
        fixedPosition="right">
        <dxi-column dataField="City"></dxi-column>
        <dxi-column dataField="Street" [width]="100" sortOrder="asc"></dxi-column>
        <dxi-column dataField="Apartment"></dxi-column>
    </dxi-column>
</dx-tree-list>
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxTreeList ... >
        <DxColumn
            caption="Address"
            :fixed="true"
            fixed-position="right">
            <DxColumn data-field="City" />
            <DxColumn data-field="Street" :width="100" sort-order="asc" />
            <DxColumn data-field="Apartment" />
        </DxColumn>
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList, {
    DxColumn
} from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList,
        DxColumn
    },
    // ...
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import TreeList, {
    Column
} from 'devextreme-react/tree-list';

export default function App() {
    return (
        <TreeList ... >
            <Column
                caption="Address"
                fixed={true}
                fixedPosition="right">
                <Column dataField="City" />
                <Column dataField="Street" width={100} sortOrder="asc" />
                <Column dataField="Apartment" />
            </Column>
        </TreeList>
    );
}

Band columns support hierarchies of any nesting level. It means that the following structure is acceptable.

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [{
            caption: "A",
            columns: [ "A1", "A2", {
                caption: "A3",
                columns: ["A31", "A32", {
                    caption: "A33",
                    columns: ["A331", "A332", "A333"]
                }]
            }]
        }, {
            caption: "B",
            columns: // ...
        }]
    });
});
Angular
HTML
TypeScript
<dx-tree-list ... >
    <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>
    <dxi-column caption="B">
        ...
    </dxi-column>
</dx-tree-list>
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxTreeList ... >
        <DxColumn caption="A">
            <DxColumn data-field="A1" />
            <DxColumn data-field="A2" />
            <DxColumn caption="A3">
                <DxColumn data-field="A31" />
                <DxColumn data-field="A32" />
                <DxColumn caption="A33">
                    <DxColumn data-field="A331" />
                    <DxColumn data-field="A332" />
                    <DxColumn data-field="A333" />
                </DxColumn>
            </DxColumn>
        </DxColumn>
        <DxColumn caption="B">
            ...
        </DxColumn>
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList, {
    DxColumn
} from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList,
        DxColumn
    },
    // ...
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import TreeList, {
    Column
} from 'devextreme-react/tree-list';

export default function App() {
    return (
        <TreeList ... >
            <Column caption="A">
                <Column dataField="A1" />
                <Column dataField="A2" />
                <Column caption="A3">
                    <Column dataField="A31" />
                    <Column dataField="A32" />
                    <Column caption="A33">
                        <Column dataField="A331" />
                        <Column dataField="A332" />
                        <Column dataField="A333" />
                    </Column>
                </Column>
            </Column>
            <Column caption="B">
                ...
            </Column>
        </TreeList>
    );
}

Band columns have the isBand flag. Banded columns have the ownerBand property set. Use these properties to distinguish band and banded columns from regular ones in code.

See Also