New to KendoReact? Start a free 30-day trial

Column Widths
Premium

By default, the KendoReact TreeList is responsive and has no fix width—the component behaves like an HTML table and expands to the width of the parent element.

Getting Started

By default, the TreeList will equally divide its width between its columns and it will responsively expand or shrink them when the width of its parent container is changed.

To set the column widths of the TreeList, use the width property of the TreeListColumnProps. The width values will be passed to the HTML col elements of the underlying table element as they are.
To set the width of the TreeList wrapper element, use the TreeList style property.
To set the width and any other property of the underlying HTML table, use the tableProps property of the TreeList which allows you to quickly resize the TreeList in the desired units.

Setting Column Widths in Percentage

To set the TreeList column widths in percentage, set the width values through the width property of the TreeListColumnProps. The width of the wrapper and table HTML block elements of the TreeList defaults to auto and the browser will expand them according to the available space. If your project requires you to limit the TreeList width, set the wrapper width through the TreeList style property.

Change Theme

Theme

Loading ...

Setting Fixed Column Width

To set the TreeList column widths in pixels, set the width values through the width property of the TreeListColumnProps, and the wrapper and table HTML widths which will be the sum of the widths of all columns.