# Vue Grid Paging Basics

Numeric paging in the Kendo UI for Vue Data Grid lets users navigate with numbered buttons and select the number of records per page.

## Enabling Numeric Paging

To enable numeric paging in the Grid, follow these steps:

1. Enable the [`autoProcessData`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#autoprocessdata) prop to allow the Grid to handle paging automatically.
2. Set the [`pageable`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#pageable) prop of the Grid to enable pagination.
3. (Optional) Set the [`defaultTake`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#defaulttake) prop to define the number of items rendered initially.
4. (Optional) Use the [`defaultSkip`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#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 Kendo UI for Vue Grid.

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

## Using a Responsive Pager

The responsive Pager adapts its layout to the available space and is enabled by default. When the numeric page buttons no longer fit, the Pager switches to a compact dropdown. To disable this behavior, set the [`responsive`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridpagersettings#responsive) property of the [`GridPagerSettings`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridpagersettings) object that you pass to the [`pageable`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#pageable) prop to `false`.

The following example lets you resize the Grid and toggle the responsive setting to see how the Pager changes when the available space is limited.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/responsive-pager/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)
* [Custom Paging](https://www.telerik.com/kendo-vue-ui-develop/components/grid/paging/custom-paging)