React Tree Grid/Tree Table/Tree List
Column Behaviors

Define columns

Define columns explicitly and configure header text, text alignment, value formatting, and width. Column configuration is suitable for datasets that require controlled presentation of individual fields.

Auto size

Automatically adjust column width based on the displayed header or cell content through interaction or programmatically. Column autofit is suitable for columns that require their content to determine the displayed width.

• Column auto-sizing documentation

Cell Attributes

Customize individual cells with attributes, CSS classes, and style settings. Cell customization is suitable for applying field-specific styling or presentation rules within Tree Grid rows.

• Custom attributes documentation

Text wrap

Wrap header or cell text onto multiple lines based on the configured wrap mode. Text wrapping is suitable for columns that contain lengthy content within defined widths.

• Text wrap example
• Text wrap documentation

Reorder

Reorder columns interactively by dragging column headers or programmatically through configuration. Column reordering is suitable for layouts that require fields to appear in a different sequence.

• Column reorder example
• Column reorder documentation

Resize

Resize columns by dragging the column header boundary or by configuring column widths programmatically. Column resizing is suitable for adjusting the space allocated to individual fields within the Tree Grid.

• Column resize documentation

Column menu

Access column-related actions through the column menu and customize which commands are displayed. Column menu configuration is suitable for interfaces that require selected column operations to be available from the header.

• Column menu example
• Column menu documentation

Value accessors

Define how a column retrieves and displays a value from its row data. Value accessors are suitable for datasets that require calculated, transformed, or nested values to be presented in a column.

• Value accessor documentation

Cell styling

The React Tree Grid supports customization of cell styles by using CSS or programmatically

• Cell styling documentation

Column chooser

Display available columns in a column chooser with controls for changing their visibility. Column chooser is suitable for Tree Grids that require columns to be shown or hidden interactively.

• Example for column chooser