# Vue Grid Paging Overview

Paging divides the Kendo UI for Vue Data Grid data into pages so users can navigate large datasets more easily. Use built-in state management for local data that the Grid can process, or use controlled paging when your application manages the paging state and processes data on the client or loads it from a remote service.

## Using Built-in State Management for Paging

To enable basic numeric paging using the built-in state management mechanism, 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. 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. 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 Paging in Controlled Mode

Use controlled paging when the complete data set is available in the client and the application needs to manage the Grid state. To enable numeric paging in controlled mode, follow these steps:

1. Set the [`pageable`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#pageable) prop of the Grid to enable paging.
2. Bind the [`skip`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#skip) prop to specify the number of records to skip before the current page.
3. Set the [`pageSize`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#pagesize) prop to specify the number of records per page. The [`take`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#take) prop is an alias that is useful when your paging state uses the `skip` and `take` names, such as with the `process` method. Both props set the page size, so do not set them together because `take` takes precedence.
4. Bind the [`total`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#total) prop to the total number of records across all pages so that the Pager calculates the available pages.
5. 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 update the paging values or full data [`state`](https://www.telerik.com/kendo-vue-ui-develop/components/dataquery/api/state).
6. Use the [`slice()` method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) or the [`process()` method](https://www.telerik.com/kendo-vue-ui-develop/components/dataquery/api/process) to return the current page.

The following example demonstrates how to implement basic numeric paging in controlled mode.

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

## Using Server-Side Paging

Server-side paging is controlled paging for remote data. Use it when loading the complete data set in the client is impractical. Handle the [`pagechange`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#onpagechange) event, update the bound `skip` and `take` values from `event.page`, and request the new page from the service. Bind the returned `data` and `total` values to the Grid. The `total` value is required for the Pager to calculate the page count.

The following demo posts the serialized paging state to the server-operations endpoint. The service returns `data` for the current page and `total` for the full result set.

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

## Configuring Pager Types

The Grid supports different pager types:

* [Numeric](https://www.telerik.com/kendo-vue-ui-develop/components/grid/paging/basic-paging)—Renders buttons with numbers.
* [Input (responsive)](https://www.telerik.com/kendo-vue-ui-develop/components/grid/paging/basic-paging#responsive-pager)—Renders an input field for typing the page number.
* [Custom Pager](https://www.telerik.com/kendo-vue-ui-develop/components/grid/paging/custom-paging)—Allows you to change entirely the Pager rendering.

The `PagerSettings` object has the following fields:

* [`buttonCount`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#pageable)—Sets the maximum number of numeric buttons before they collapse.
* [`info`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#pageable)—Toggles information about the current page and total number of records.
* [`type`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#pageable)—Accepts the `numeric` value for numbered buttons and the `input` value for a page-number input.
* [`pageSizes`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#pageable)—Shows a menu for selecting the page size.
* [`previousNext`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#pageable)—Toggles the **Previous** and **Next** buttons.

To configure pager types, pass the [`PagerSettings`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridpagersettings) object to the [`pageable`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#pageable) prop of the Grid.

The following example demonstrates all pager types allowed in the Kendo UI for Vue Data Grid. Choose the pager type from the configuration panel above the Grid to see how each type works.

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

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