Paging

The KendoReact Data TreeList enables you to split its content into pages.

Getting Started

To enable paging:

  1. Set the pager component, skip, and take options of the TreeList.
  2. Handle the onPageChange event and pass the new skip and take values to the TreeList props.

The following example demonstrates the required configuration for paging the TreeList records.

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

import { TreeListPager } from './pager.jsx';

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

const numberOfColumns = 4;
const columnWidth = 200;
const numberOfRows = 5000;
const subItemsField = 'subItems';
const expandField = 'expanded';

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

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

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

    onPageChange = (event) => {
        const { skip, take } = event;
        this.setState({ skip, take });
    }

    render() {
        return (
            <TreeList
                pager={TreeListPager}
                onPageChange={this.onPageChange}
                skip={this.state.skip}
                take={this.state.take}

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

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