Reordering

The KendoReact TreeList enables you to reorder its columns by dragging the header cells.

To enable column reordering, set the reorderable property to true and update the TreeList columns collection using onColumnReorder event.

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 }

    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)
            })
        );
    }

    onColumnReorder = (event) => {
        this.setState({ columns: event.columns });
    }

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

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