Resizing

The KendoReact Data TreeList enables you to resize its columns by dragging the edges (resize handles) of the header cells.

To enable column resizing, set the resizable property of the TreeList to true.

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: 'name', title: 'Name', width: 310, expandable: true },
    { field: 'position', title: 'Position', width: 260 },
    { field: 'hireDate', title: 'Hire Date', width: 160, format: '{0:d}' },
    { field: 'timeInPosition', title: 'Year(s) in Position', width: 160 },
    { field: 'fullTime', title: 'Full Time', width: 150 }
];

class App extends React.Component {
    state = { expanded: [1, 2, 32], columns }
    table = null;

    onColumnResize = (event) => {
        if (this.table) {
            this.table.style.width = `${event.totalWidth}px`;
        }
        if (event.end) {
            this.setState({ columns: event.columns });
        }
    }

    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
                tableProps={{ ref: table => this.table = table }}
                style={{ maxHeight: '510px', overflow: 'auto', display: 'inline-block' }}
                expandField={expandField}
                subItemsField={subItemsField}
                onExpandChange={this.onExpandChange}
                data={this.addExpandField(employees)}
                columns={this.state.columns}
                resizable={true}
                onColumnResize={this.onColumnResize}
            />
        );
    }
}

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