Cells

The KendoReact TreeList provides options for customizing its cell content by allowing you to define different types of cells.

Supported Cell Types

TreeList Cells

The TreeListCell component represents a React component that accepts TreeListCellProps and returns a <td /> element. The TreeList initializes its cells by using the values from the corresponding data item for each of its rows and columns. You can replace a cell with a custom cell by using the cell property of the column.

Filter Cells

The TreeListTextFilter, TreeListNumericFilter, TreeListDateFilter, and TreeListBooleanFilter represent React components. The TreeList renders a single filter cell for each column inside the filter row. The filter cells take their values from the value of the filter property. You can replace a filter cell with a custom cell by using the filterCell property of the column.

Edit Cells

The TreeListTextEditor, TreeListNumericEditor, TreeListDateEditor, and TreeListBooleanEditor components represent React components that accept TreeListCellProps. The TreeList renders a single edit cell for each column where a data item is in edit mode. Each edit cell triggers the TreeListItemChangeEvent event and takes its value from the corresponding data item. You can replace an edit cell with a custom cell by using the editCell property of the column.

Header Cells

The TreeListHeaderCell component represents a React component that accepts TreeListHeaderCellProps. The TreeList renders a single header cell for the header of each column. Each header cell displays the data field or the title property together with the sorting indicators. You can replace a header cell with a custom cell by using the headerCell property of the column.

Customizing the Cells

The following example demonstrates how to set a custom cell in the TreeList.

Example
View Source
Edit In Stackblitz  
Change Theme: