Angular TreeList - Column Sizing

TreeList columns have equal widths in the default configuration (width is set to "auto"). The total column width matches the component (container) width. Configure the following properties to change the column layout:

Your data or component configuration may result in column layout issues:

  • Truncated cell values.
  • Collapsed (hidden) columns.
  • Columns with excess blank space.

To resolve these issues, specify column width or minimum width values, or enable auto-width.

When the specified width of all columns exceeds the component's width, TreeList activates horizontal scrolling.

jQuery
index.js
$("#tree-list-container").dxTreeList({
    columnMinWidth: 100,
    columns: [{
        dataField: "Title",
        width: 200,
    }, {
        dataField: "Address",
        minWidth: 150,
    }, ... ]
});
Angular
app.component.html
app.component.ts
<dx-tree-list ...
    [columnMinWidth]="100"
>
    <dxi-tree-list-column dataField="Title" [width]="200"></dxi-tree-list-column>
    <dxi-tree-list-column dataField="Address" [minWidth]="150"></dxi-tree-list-column>
    <!-- ... -->
</dx-tree-list>
import { DxTreeListModule } from "devextreme-angular";

// ...
@NgModule({
    imports: [
        DxTreeListModule
    ],
})
Vue
App.vue
<template>
    <DxTreeList ...
        :column-min-width="100"
    >
        <DxColumn data-field="Title" :width="200" />
        <DxColumn data-field="Address" :min-width="150" />
        <!-- ... -->
    </DxTreeList>
</template>

<script>
import { DxTreeList, DxColumn } from 'devextreme-vue/tree-list';
// ...

</script>
React
App.tsx
import { TreeList, Column } from 'devextreme-react/tree-list';

function App() {
    return (
        <TreeList ...
            columnMinWidth={100}
        >
            <Column dataField="Title" width={200} />
            <Column dataField="Address" minWidth={150} />
            {/* ... */}
        </TreeList>
    );
}

TreeList also allows you to use the mouse to resize columns at runtime. To activate this feature, set allowColumnResizing to true and select a columnResizingMode:

  • "nextColumn": Adjusts the width of the two columns on either side of a column separator.
  • "widget": Adjusts the width of the column to the left of a column separator and the component width.

View Demo

To disable mouse resizing for a specific column, set columns[].allowResizing to false.

jQuery
index.js
$("#tree-list-container").dxTreeList({
    allowColumnResizing: true,
    columnResizingMode: 'widget',
    columns: [{
        dataField: "Title",
        allowResizing: false
    }, ... ]
});
Angular
app.component.html
<dx-tree-list ...
    [allowColumnResizing]="true"
    columnResizingMode="widget"
>
    <dxi-tree-list-column dataField="Title" [allowResizing]="false"></dxi-tree-list-column>
    <!-- ... -->
</dx-tree-list>
Vue
App.vue
<template>
    <DxTreeList ...
        :allow-column-resizing="true"
        column-resizing-mode="widget"
    >
        <DxColumn data-field="Title" :allow-resizing="false" />
        <!-- ... -->
    </DxTreeList>
</template>

<script>
import { DxTreeList, DxColumn } from 'devextreme-vue/tree-list';
// ...

</script>
React
App.tsx
import { TreeList, Column } from 'devextreme-react/tree-list';

function App() {
    return (
        <TreeList ...
            allowColumnResizing={true}
            columnResizingMode="widget"
        >
            <Column dataField="Title" allowResizing={false} />
            {/* ... */}
        </TreeList>
    );
}
See Also