Locked columns

Locked (frozen or sticky) columns are the columns that are visible at all times while the user scrolls the TreeList horizontally.

By default, the columns of the TreeList are not locked.

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: 300, expandable: true, locked: true },
    { field: 'position', title: 'Position', width: 300 },
    { field: 'hireDate', title: 'Hire Date', width: 200, format: '{0:d}' },
    { field: 'phone', title: 'Phone', width: 200 },
    { field: 'extension', title: 'Extension', width: 200 },
    { field: 'fullTime', title: 'Full Time', width: 100, locked: true },
    { field: 'timeInPosition', title: 'Year(s) in Position', width: 200 }
];

class App extends React.Component {
    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', width: '720px', overflow: 'auto' }}
                tableProps={{ style: { width: '1500px' } }}
                expandField={expandField}
                subItemsField={subItemsField}
                onExpandChange={this.onExpandChange}
                data={this.addExpandField(employees)}
                columns={columns}
            />
        );
    }
}

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