DevExtreme React - Column Fixing

In some cases, the widget contains so many columns that they cause horizontal scrolling. If specific columns should be on screen constantly regardless of how far the widget is scrolled, a user can fix them.

DevExtreme HTML5 JavaScript jQuery Angular Knockout Widget TreeList ColumnFixing

To allow this, set the columnFixing.enabled option to true. If a user should never fix (or unfix) a specific column, set its allowFixing option to false.

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        columnFixing: {
            enabled: true
        },
        columns: [{
            // ...
            allowFixing: false
        }]
    });
});
Angular
HTML
TypeScript
<dx-tree-list ... >
    <dxo-column-fixing [enabled]="true"></dxo-column-fixing>
    <dxi-column [allowFixing]="true" ... ></dxi-column>
</dx-tree-list>
import { DxTreeListModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

If a column should be fixed initially, assign true to its fixed option and specify its target position in the widget using the fixedPosition option.

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        columns: [{
            // ...
            fixed: true,
            fixedPosition: "left"
        }]
    });
});
Angular
HTML
TypeScript
<dx-tree-list ... >
    <dxi-column [fixed]="true" fixedPosition="left" ... ></dxi-column>
</dx-tree-list>
import { DxTreeListModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
NOTE
Once you assign true to the columnFixing.enabled or fixed option, command columns become fixed automatically.

Since column fixing is effective only with horizontal scrolling, using it makes sense only if the columnAutoWidth option is false and when the total width of columns exceeds the container width. Otherwise, fixed columns behave just like regular ones.

View Demo

See Also