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.

import React from 'react';
import ReactDOM from 'react-dom';
import {
    TreeList, mapTree, extendDataItem
} from '@progress/kendo-react-treelist';
import employees from './data';

const subItemsField = 'employees';
const expandField = 'expanded';

class MyCell extends React.Component {
    render() {
        const { dataItem, field } = this.props;
        const cellData = dataItem[field];
        return (
            <td>
                <span style={{ color: cellData ? 'green' : 'red' }}>{String(cellData)}</span>
            </td>
        );
    }
}

class App extends React.Component {
    state = {
        data: employees.slice(),
        expanded: [1, 2, 32]
    }

    onExpandChange = (e) => {
        this.setState({
            expanded: e.value ?
                this.state.expanded.filter(id => id !== e.dataItem.id) :
                [...this.state.expanded, e.dataItem.id]
        });
    }
    updateFields = (dataArr) => {
        const { expanded } = this.state;
        return mapTree(dataArr, subItemsField, (item) =>
            extendDataItem(item, subItemsField, {
                expanded: expanded.includes(item.id)
            })
        );
    }
    render() {
        return (
            <TreeList
                style={{ maxHeight: '510px', overflow: 'auto' }}
                data={this.updateFields(this.state.data)}
                expandField={expandField}
                subItemsField={subItemsField}
                onExpandChange={this.onExpandChange}
                columns={[
                    { field: 'name', title: 'Name', expandable: true, width: '40%' },
                    { field: 'position', title: 'Position', width: '40%' },
                    { field: 'fullTime', title: 'Full Time', width: '20%', cell: MyCell }
                ]}
            />
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
 /