React TreeList - 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 property 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 UI component's width.
- 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 ...
- columnMinWidth={100}>
- <Column dataField="Title" width={200} />
- <Column dataField="Address" minWidth={150} />
- </TreeList>
- );
- }
Set the columnAutoWidth property to true to make all columns adjust their widths to their content.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import TreeList from 'devextreme-react/tree-list';
- export default function App() {
- return (
- <TreeList ...
- columnAutoWidth={true}>
- </TreeList>
- );
- }
The UI component allows a user to resize columns in two different modes: by changing the next column's width or the UI component's width. To enable this functionality and set the mode, specify the allowColumnResizing and columnResizingMode properties, respectively. Note that you can prevent a specific column from being resized by assigning false to its allowResizing property.
- 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 ...
- allowColumnResizing={true}
- columnResizingMode="widget"> <!-- or 'nextColumn' -->
- <Column dataField="Title" allowResizing={false} />
- </TreeList>
- );
- }
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.