KendoReact Data Grid Numeric Pagination

Numeric paging in the KendoReact Data Grid allows users to navigate through pages using numbered buttons and a dropdown component allowing you to control the items per page.

Enabling Numeric Paging

To enable numeric paging in Grid, follow these steps:

1. Enable the autoProcessData prop to allow the Grid to handle paging automatically.
2. Set the pageable prop of the Grid to enable pagination.
3. (Optional) Set the defaultTake prop to define the number of items rendered initially.
4. (Optional) Use the defaultSkip prop to specify the number of items to be skipped initially, determining the starting page.

The following example demonstrates how to implement numeric paging using the built-in state management of the KendoReact Grid.

Change Theme

Theme

Loading ...

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.

Change Theme

Theme

Loading ...

KendoReact Data Grid Paging APIs

• Grid Pageable Prop
• Grid Pager Prop
• API Reference of the PagerSettings

Suggested Links

• React Data Grid
• React Data Grid High-Level Overview
• Custom Paging