Virtual Scrolling

Virtual scrolling provides an alternative to paging.

While the user is scrolling the table, the TreeList is only rendering a part of the data based on the scroll position.

Getting Started

TreeList virtual scrolling requires you to set the following configuration:

import React from 'react';
import ReactDOM from 'react-dom';
import {
    TreeList,
    mapTreeItem,
    extendDataItem
} from '@progress/kendo-react-treelist';

import { generateData } from './treelist-data';

const numberOfColumns = 100;
const columnWidth = 200;
const numberOfRows = 25000;
const subItemsField = 'subItems';
const expandField = 'expanded';

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

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

    onExpandChange = (event) => {
        const expanded = !event.value;
        const tree = [...this.state.data];

        mapTreeItem(
            tree,
            event.level,
            subItemsField,
            item => extendDataItem(item, subItemsField, { [expandField]: expanded })
        );

        this.setState({
            data: tree,
            expanded: event.value ?
                this.state.expanded.filter(id => id !== event.dataItem.id) :
                [ ...this.state.expanded, event.dataItem.id ]
        });
    }

    render() {
        return (
            <TreeList
                style={{ height: '430px', overflow: 'auto', width: '720px' }}
                tableProps={{
                    style: {
                        tableLayout: 'fixed',
                        width: numberOfColumns * columnWidth
                    }
                }}
                rowHeight={40}
                scrollable="virtual"
                columnVirtualization={numberOfColumns > 15}

                data={this.state.data}
                expandField={expandField}
                subItemsField={subItemsField}
                onExpandChange={this.onExpandChange}
                columns={columns}
            />
        );
    }
}

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