New to Kendo UI for Vue? Start a free 30-day trial


The native Vue Grid by Kendo UI enables you to split its content into pages.

Getting Started

To enable paging:

  1. Set the pageable, pageSize, and skip options of the Grid. As a result, the Grid renders a paging UI navigation to the bottom of the Grid and enhances user interaction.
  2. Handle the emitted onPageChange event. The onPageChange event fires when the user interacts with the Grid through the pager, then processes the data, and returns the requested page to the Grid. To implement the processing of the data programmatically, send a request to the server to execute the paging on server-side, or use the process method of the DataQuery library which automatically processes the data.

The following example demonstrates the minimum required configuration for paging the Grid records.

View Source
Edit In Stackblitz  
Change Theme:

Pager Types

The pager types of the Grid are:

  • NumericRenders buttons with numbers.
  • InputRenders an input field for typing the page number.

To set the pager types, pass the PagerSettings object to the pageable option of the Grid.

The PagerSettings object has the following fields:

  • buttonCountSets the maximum numeric buttons count before the buttons are collapsed.
  • infoToggles the information about the current page and the total number of records.
  • typeAccepts the numeric (buttons with numbers) and input (input for typing the page number) values.
  • pageSizesShows a menu for selecting the page size.
  • previousNextToggles the Previous and Next buttons.
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?