# Vue Grid Custom Pagination

Custom paging in the Kendo UI for Vue Data Grid lets you replace the default Pager with a component that matches your requirements.

## Implementing a Custom Pager

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

To use a custom pager:

* Set the [`pageable`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#pageable) prop to `true`.
* Set the [`pager`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#pager) prop to a custom component.
* Handle the [`pagechange`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#onpagechange) or [`datastatechange`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#ondatastatechange) event to manage paging state.

The following example demonstrates a custom Pager that uses a [Slider](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/slider) and [NumericTextBox](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/numerictextbox) to navigate between pages.

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

## Using a Custom Responsive Pager

To render a custom responsive Pager, pass a component to the Grid [`pager`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#pager) prop. The following example uses a [Pager](https://www.telerik.com/kendo-vue-ui-develop/components/datatools/pager) component with its [`responsive`](https://www.telerik.com/kendo-vue-ui-develop/components/datatools/api/pagerprops#responsive) prop set to `true`.

The following example demonstrates how to implement a custom responsive pager.

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

## Paging API Reference

* [`pageable` Grid prop](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#pageable)
* [`pager` Grid prop](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#pager)
* [`GridPagerSettings` API](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridpagersettings)

## See Also

* [Grid Overview](https://www.telerik.com/kendo-vue-ui-develop/components/grid)
* [Vue Data Grid High-Level Overview](https://www.telerik.com/kendo-vue-ui/grid)
* [Numeric Paging](https://www.telerik.com/kendo-vue-ui-develop/components/grid/paging/basic-paging)