Paging

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

Getting Started

To enable paging:

  1. Set the pageable, pageSize, and skip options of the Grid. As a result, the Grid renders a paging UI navigation to the bottom of the Grid and enhances user interaction.
  2. Handle the emitted onPageChange event. The onPageChange event fires upon user interaction with the pager, processes the data, and returns the requested page to the Grid. To implement the processing of the data programmatically, send a request to the server to execute the paging on the server side or use the process method of the DataQuery library which automatically processes the data.

The following example demonstrates the minimum required configuration for paging the Grid records.

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn } from '@progress/kendo-react-grid';

import products from './products.json';

class App extends React.PureComponent {
    state = { skip: 0, take: 10 }

    pageChange = (event) => {
        this.setState({
            skip: event.page.skip,
            take: event.page.take
        });
    }

    render() {
        return (
            <div>
                <Grid
                    style={{ height: '400px' }}
                    data={products.slice(this.state.skip, this.state.take + this.state.skip)}
                    skip={this.state.skip}
                    take={this.state.take}
                    total={products.length}
                    pageable={true}
                    onPageChange={this.pageChange}
                >
                    <GridColumn field="ProductID" />
                    <GridColumn field="ProductName" title="Product Name" />
                    <GridColumn field="UnitPrice" title="Unit Price" />
                </Grid>
            </div >
        );
    }
}

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

Pager Types

The pager types of the Grid are:

  • Numeric—Renders buttons with numbers.
  • Input—Renders an input field for typing the page number.

To set the pager types, pass the PagerSettings object to the pageable option of the Grid.

The PagerSettings object has the following fields:

  • buttonCount—Sets the maximum numeric buttons count before the buttons are collapsed.
  • info—Toggles the information about the current page and the total number of records.
  • type—Accepts the numeric (buttons with numbers) and input (input for typing the page number) values.
  • pageSizes—Shows a menu for selecting the page size.
  • previousNext—Toggles the Previous and Next buttons.
import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';

import products from './products.json';

class App extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = this.createState(0, 10);
        this.pageChange = this.pageChange.bind(this);
        this.updatePagerState = this.updatePagerState.bind(this);
    }

    pageChange(event) {
        this.setState(this.createState(event.page.skip, event.page.take));
    }

    createState(skip, take) {
        return {
            items: products.slice(skip, skip + take),
            total: products.length,
            skip: skip,
            pageSize: take,
            pageable: this.state ? this.state.pageable : {
                buttonCount: 5,
                info: true,
                type: 'numeric',
                pageSizes: true,
                previousNext: true
            }
        };
    }

    updatePagerState(key, value) {
        const newPageableState = Object.assign({}, this.state.pageable, { [key]: value });
        this.setState(Object.assign({}, this.state, { pageable: newPageableState }));
    }

    render() {
        return (
            <div>
                <div className="example-config row">
                    <div className="col-md-6">
                        <dl>
                            <dt>
                                Pager type:
                        </dt>
                            <dd>
                                <input
                                    type="radio"
                                    name="pager"
                                    id="numeric"
                                    className="k-radio"
                                    value="numeric"
                                    defaultChecked={true}
                                    onChange={e => { this.updatePagerState('type', e.target.value); }}
                                />
                                <label
                                    style={{ margin: "7px 3em 7px 0px", lineHeight: '1.2' }}
                                    className="k-radio-label"
                                    htmlFor="numeric"
                                >
                                    Numeric&nbsp;
                                </label>

                                <input
                                    type="radio"
                                    name="pager"
                                    id="input"
                                    className="k-radio"
                                    value="input"
                                    onChange={e => { this.updatePagerState('type', e.target.value); }}
                                />
                                <label
                                    style={{ margin: "7px 3em 7px 0px", lineHeight: '1.2' }}
                                    className="k-radio-label"
                                    htmlFor="input"
                                >
                                    Input&nbsp;
                                </label>
                            </dd>
                        </dl>
                        <dl>
                            <dt>
                                Max. number of buttons:
                        </dt>
                            <dd>
                                <input
                                    defaultValue="5"
                                    className="k-textbox"
                                    type="number"
                                    onChange={e => { this.updatePagerState('buttonCount', e.target.valueAsNumber); }}
                                />
                            </dd>
                        </dl>
                    </div>
                    <div className="col-md-6 row">
                        <div className="col-md-12">
                            <input
                                className="k-checkbox"
                                defaultChecked={true}
                                id="showInfo"
                                type="checkbox"
                                onChange={e => { this.updatePagerState('info', e.target.checked); }}
                            />
                            <label
                                htmlFor="showInfo"
                                className="k-checkbox-label"
                            >
                                Show info
                        </label>
                        </div>

                        <div className="col-md-12">
                            <input
                                className="k-checkbox"
                                defaultChecked={true}
                                id="pageSize"
                                type="checkbox"
                                onChange={e => { this.updatePagerState('pageSizes', e.target.checked); }}
                            />
                            <label
                                htmlFor="pageSize"
                                className="k-checkbox-label"
                            >
                                Show page sizes
                        </label>
                        </div>


                        <div className="col-md-12">
                            <input
                                className="k-checkbox"
                                defaultChecked={true}
                                id="previousNext"
                                type="checkbox"
                                onChange={e => { this.updatePagerState('previousNext', e.target.checked); }}
                            />
                            <label
                                htmlFor="previousNext"
                                className="k-checkbox-label"
                            >
                                Show previous / next buttons
                        </label>
                        </div>
                    </div>
                </div>
                <Grid
                    style={{ height: '280px' }}
                    data={this.state.items}
                    onPageChange={this.pageChange}
                    total={this.state.total}
                    skip={this.state.skip}
                    pageable={this.state.pageable}
                    pageSize={this.state.pageSize}
                >
                    <Column field="ProductID" />
                    <Column field="ProductName" title="Product Name" />
                    <Column field="UnitPrice" title="Unit Price" />
                </Grid>
            </div >
        );
    }
}

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