DevExtreme React - Column Sizing

If you do not explicitly specify certain columns' width, the TreeList distributes the available space equally among columns at startup. As a result, cell values may appear truncated. Use the columnMinWidth option to specify a minimum width for all columns and the minWidth for an individual column. Note that all these settings may cause horizontal scrolling if columns cannot fit into the widget's width.

JavaScript
  • $(function() {
  • $("#treeListContainer").dxTreeList({
  • // ...
  • columnMinWidth: 100,
  • columns: [{
  • dataField: "Title",
  • width: 200
  • }, {
  • dataField: "Address",
  • minWidth: 150
  • }]
  • });
  • });

Set the columnAutoWidth option to true to make all columns adjust their widths to their content.

JavaScript
  • $(function() {
  • $("#treeListContainer").dxTreeList({
  • // ...
  • columnAutoWidth: true
  • });
  • });

The widget allows a user to resize columns in two different modes: by changing the next column's width or the widget's width. To enable this functionality and set the mode, specify the allowColumnResizing and columnResizingMode options, respectively. Note that you can prevent a specific column from being resized by assigning false to its allowResizing option.

JavaScript
  • $(function() {
  • $("#treeListContainer").dxTreeList({
  • // ...
  • allowColumnResizing: true,
  • columnResizingMode: 'widget', // or 'nextColumn'
  • columns: [{
  • dataField: "Title",
  • allowResizing: false
  • }, // ...
  • ]
  • });
  • });

View Demo

See Also