New to KendoReact? Start a free 30-day trial

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: