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.

ninja-iconThe Custom Pagination feature of the Grid is part of KendoReact premium, an enterprise-grade UI library with 120+ free and premium components for building polished, performant apps. Test-drive all features with a free 30-day trial.Start Free Trial

Implementing a Custom Pager

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

To use a custom pager:

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