Kendo UI for Vue Data Grid Numeric Pagination

Updated on Aug 14, 2026

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 prop to allow the Grid to handle paging automatically.
2. Set the pageable prop of the Grid to enable pagination.
3. (Optional) Set the defaultTake prop to define the number of items rendered initially.
4. (Optional) Use the 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.

Loading ...

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 property of the GridPagerSettings object that you pass to the 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.

Loading ...

Paging API Reference

• pageable Grid prop
• pager Grid prop
• GridPagerSettings API

See Also

• Grid Overview
• Vue Data Grid High-Level Overview
• Custom Paging