Multi-Column Headers

The KendoReact TreeList supports multi-column headers.

To implement multi-column headers, define an array of columns as children of the particular column.

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';

const columns = [
    { field: 'Personal Information', width: 300, children: [
        { field: 'name', title: 'Name', width: 300, expandable: true },
        { title: 'Contact Information', width: 300, children: [
            { field: 'phone', title: 'Phone', width: 200 },
            { field: 'extension', title: 'Extension', width: 200 }
        ] }
    ] },
    { title: 'Employee Details', width: 300, children: [
        { field: 'position', title: 'Position', width: 300 },
        { field: 'fullTime', title: 'Full Time', width: 100 }
    ] }
];

class App extends React.PureComponent {
    state = { 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 ]
        });
    }

    addExpandField = (dataTree) => {
        const expanded = this.state.expanded;
        return mapTree(dataTree, subItemsField, (item) =>
            extendDataItem(item, subItemsField, {
                [expandField]: expanded.includes(item.id)
            })
        );
    }

    render() {
        return (
            <TreeList
                style={{ maxHeight: '510px', overflow: 'auto' }}
                expandField={expandField}
                subItemsField={subItemsField}
                onExpandChange={this.onExpandChange}
                data={this.addExpandField(employees)}
                columns={columns}
            />
        );
    }
}

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