Paging

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

Getting Started

To enable paging:

1. Set the pageable prop for the Grid. As a result, the Grid renders a paging UI navigation to the bottom of the Grid and enhances user interaction.
2. Use the skip prop, which is used to calculate the current page.
3. Set the pageSize or the take options of the Grid to specify how many items will be rendered on the page.
4. Use the total prop to notify the Grid how many records are in total, which is needed to calculate the correct total pages.
5. Handle the onPageChange or the onDataStateChange event of the Grid. The onDataStateChange event is recommended when the Grid will have other data operations as it provides the complete dataState in a single event.
6. Page the data on the client by using the slice method or our built-in process method. The data can also be paged on the server by making a request using the event parameters.

The slice method is recommended when using the onPageChange event and the process method is recommended when using the onDataStateChange event.

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

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.

Custom Pager

The Grid allows rending a custom component through its pager property.

In the following example we render a Slider and a NumericTextBox components to change the current page.

Responsive Pager

The responsive Pager is enabled by default. To disable the responsive functionality, set the responsive property of the GridPagerSettings object to false

The following example demonstrates the responsive Pager in action.

Custom Responsive Pager

It is possible to render a custom responsive pager by passing a component to the Grid pager prop. In the below example a Pager component is used with its responsive prop set to true

Suggested Links

• PagerSettings
• API Reference of the Grid
• API Index of the Grid
• React Data Grid High-Level Overview