Columns for Blazor TreeGrid

Define columns

In a Blazor Tree Grid, users can explicitly define the required columns. Additionally, the appearance of these columns can be enhanced by setting the header text, text alignment, cell value format, and width.

Auto size

Users can interactively auto size column width to show its full content by double clicking on column borders. Blazor Tree Grid also supports triggering auto sizing to the required columns programmatically.

• Columns auto sizing documentation

Cell styling

Blazor Tree Grid supports customization of cell styles programmatically or by using CSS.

• Cell styling documentation

Text wrap

Wraps the Blazor Tree Grid cell text to the next line when it is too large to fit a cell. Users can wrap the header or content cell`s text by setting the available wrap mode options.

• Example for text wrap
• Text wrap documentation

Column and row spanning

The column and row can automatically merge adjacent cells that contain the same value. Identical values are displayed as a single, unified cell across both rows and columns, improving readability and reducing redundancy in hierarchical data.

Blazor demo for Tree Grid with row and column spanning

Column chooser

The column chooser provides a list of column names paired with check boxes, allowing users to easily toggle visibility. This enables them to control column visibility through an interactive UI.

• Example for column chooser
• Column chooser documentation

Reorder

Reorder Blazor Tree Grid columns either through user interaction or programmatically. Simply dragging a column header to the desired column position will reorder the columns of a Tree Grid.

• Example for column reorder
• Column Reorder documentation

Resize

Users can resize columns by dragging the right corner of the column header. A scroll bar will appear when the content width of the Tree Grid exceeds the width of the element.

• Example for column resize
• Column Resize documentation

Column menu

Allows performing various column-based actions with the help of Blazor Tree Grid column menu. Menu items can also be customized to list only the preferred actions.

• Example for column menu
• Column menu documentation

Checkbox column

Users can select multiple records by using the checkbox column. It is also possible to choose records hierarchically with checkboxes. If a parent’s checkbox is checked, the child checkboxes will also be checked.

• Documentation for checkbox column