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.