Data Tools / Pager
material theme

Pager Overview

The KendoReact Pager provides options for splitting content into pages.

The KendoReact Pager is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-data-tools package.

Basic Usage

You can configure the Pager by using the following properties:

  • 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—Displays a menu for selecting the page size.
  • previousNext—Toggles the Previous and Next buttons.
import React from 'react';
import ReactDOM from 'react-dom';
import { Pager } from '@progress/kendo-react-data-tools';
import { DemoConfigurator } from './configurator.jsx';
import { products } from './products.js';

class App extends React.Component {
    total = products.length;
    pageSizes = [5, 10, 20];

    state = {
        skip: 0,
        take: 5,
        buttonCount: 5,
        type: 'numeric',
        info: true,
        pageSizes: true,
        previousNext: true
    };

    render() {
        const { skip, take, ...rest } = this.state;

        console.log(products.slice(skip, skip + take));
        return (
            <React.Fragment>
                <DemoConfigurator
                    onChange={data => this.setState(data)}
                    values={rest}
                />
                <Pager
                    skip={skip}
                    take={take}
                    total={this.total}
                    buttonCount={this.state.buttonCount}
                    info={this.state.info}
                    type={this.state.type}
                    pageSizes={this.state.pageSizes ? this.pageSizes : undefined}
                    previousNext={this.state.previousNext}
                    onPageChange={this.handlePageChange}
                />
            </React.Fragment>
        );
    }

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

        console.log(`Page Change: skip ${skip}, take ${take}`);
    };
}

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

Functionality and Features

The Pager provides globalization support.

 /