New to Kendo UI for Vue? Start a free 30-day trial
Kendo UI for Vue Data Grid Custom Pagination
Updated on Feb 9, 2026
Custom paging in the Kendo UI for Vue Data Grid allows you to replace the default pager with a custom component tailored to your needs.
Implementing a Custom Pager
You can render a custom Pager component in the Grid through its pager property.
To use a custom pager:
- Set the pageable property to true.
- Define the pager property with a custom component.
- Handle the onPageChange or onDataStateChange event to manage the paging state.
The following example demonstrates how to implement a custom pager using a Slider and NumericTextBox to navigate between pages.
Change Theme
Theme
Loading ...
Custom Responsive Pager
It is possible to render a custom responsive pager by passing a component to the Grid pager prop. In the below example a Pager component is used with its responsive prop set to true
Change Theme
Theme
Loading ...