Column Virtualization

The KendoReact TreeList supports column virtualization.

To enable column virtualization, set the columnVirtualization property. As a result, the columns outside the current visible aria of the TreeList will not be rendered and the rendering performance of the component will be improved.

In order for the column virtualization to work properly, configure the following options:

  • (Required) Set width of each column.
  • (Required) Set overflow: auto and width in pixels through style of the TreeList.
  • (Required) Set { style: { tableLayout: 'fixed' } } through tableProps of the TreeList.
import React from 'react';
import ReactDOM from 'react-dom';
import { TreeList, mapTree, extendDataItem } from '@progress/kendo-react-treelist';
import { generateData } from './treelist-data';

const numberOfColumns = 100;
const columnWidth = 150;
const numberOfRows = 7;
const subItemsField = 'subItems';
const expandField = 'expanded';

const { columns, data } = generateData(numberOfColumns, columnWidth, numberOfRows, subItemsField);

class App extends React.Component {
    state = { expanded: [ ] }

    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={{ overflow: 'auto', width: '720px' }}
                tableProps={{ style: { tableLayout: 'fixed' } }}
                columns={columns}
                expandField={expandField}
                subItemsField={subItemsField}
                onExpandChange={this.onExpandChange}
                data={this.addExpandField(data)}
                columnVirtualization={true}
            />
        );
    }
}

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