CellsPremium
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
To replace a default cell with a custom one, create a React component that accepts TreeListCellProps and returns a <td /> element, then pass it to the cell property of the column.
const MyCell = (props: TreeListCellProps) => {
const cellData = props.dataItem[props.field || ''];
return (
<td>
<span style={{ color: cellData ? 'green' : 'red' }}>{String(cellData)}</span>
</td>
);
};
const columns = [
{ field: 'fullTime', title: 'Full Time', cell: MyCell }
];The following example demonstrates how to replace the default Full Time column cell with a custom cell that renders the boolean value in green or red.