KendoReact Data Grid Custom Pagination

Premium

Custom paging in the KendoReact Data Grid allows you to replace the default pager with a custom component tailored to your needs.

Implementing a Custom Pager

You can render a custom Pager component in the Grid through its pager property.

To use a custom pager:

• Set the pageable property to true.
• Define the pager property with a custom component.
• Handle the onPageChange or onDataStateChange event to manage the paging state.

The following example demonstrates how to implement a custom pager using a Slider and NumericTextBox to navigate between pages.

Change Theme

Theme

Loading ...

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

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
• Numeric Paging