DevExtreme v24.2 is now available.

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

Your search did not match any results.

React Tree List - Fixed and Sticky Columns

A horizontal scrollbar appears when the total width of all grid columns exceeds the DevExtreme TreeList's overall width. To maintain column visibility when scrolling horizontally, set the columnFixing.enabled property to true.

To fix a column programmatically, set its fixed property to true and specify the desired fixedPosition:

  • 'left' (default if fixed: true)
    The column is fixed to the leftmost edge of the grid.

  • 'right'
    The column is fixed to the rightmost edge of the grid.

  • 'sticky'
    The column "sticks" to the left or rightmost edge when it reaches either side of the grid.

To fix (or unfix) a column, right-click a column header and select the desired operation using the DataGrid’s built-in context menu. To prevent users from fixing/unfixing a column, set its allowFixing property to false.

To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
Backend API