# KendoReact Grid Custom Pagination

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

<CtaPanelOverview></CtaPanelOverview>

## Implementing a Custom Pager

You can render a custom Pager component in the Grid through its [`pager`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#pager) property.

To use a custom pager:

* Set the [pageable](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#pageable) property to true.
* Define the [pager](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#pager) property with a custom component.
* Handle the [onPageChange](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#onpagechange) or [onDataStateChange](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#ondatastatechange) event to manage the paging state.

The following example demonstrates how to implement a custom pager using a [Slider](https://www.telerik.com/kendo-react-ui-develop/components/inputs/slider) and [NumericTextBox](https://www.telerik.com/kendo-react-ui-develop/components/inputs/numerictextbox) to navigate between pages.

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/paging-custom-pager/func/source.txt)

## Custom Responsive Pager

It is possible to render a custom responsive pager by passing a component to the Grid [`pager`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#pager) prop. In the below example a [Pager](https://www.telerik.com/kendo-react-ui-develop/components/datatools/pager) component is used with its [`responsive`](https://www.telerik.com/kendo-react-ui-develop/components/datatools/api/pagerprops#responsive) prop set to `true`

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/custom-pager-responsive/func/source.txt)

## KendoReact Grid Paging APIs

* [Grid Pageable Prop](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#pageable)
* [Grid Pager Prop](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#pager)
* [API Reference of the PagerSettings](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridpagersettings)

## Suggested Links

* [Pager Component](https://www.telerik.com/kendo-react-ui-develop/components/datatools/pager)
* [Numeric Paging](https://www.telerik.com/kendo-react-ui-develop/components/grid/paging/basic-paging)