Vue Grid Custom Pagination

Updated on Sep 9, 2026

Custom paging in the Kendo UI for Vue Data Grid lets you replace the default Pager with a component that matches your requirements.

Implementing a Custom Pager

You can render a custom Pager component in the Grid through its pager prop.

To use a custom pager:

• Set the pageable prop to true.
• Set the pager prop to a custom component.
• Handle the pagechange or datastatechange event to manage paging state.

The following example demonstrates a custom Pager that uses a Slider and NumericTextBox to navigate between pages.

Example

View Source

Loading ...

Using a Custom Responsive Pager

To render a custom responsive Pager, pass a component to the Grid pager prop. The following example uses a Pager component with its responsive prop set to true.

The following example demonstrates how to implement a custom responsive pager.

Example

View Source

Loading ...

Paging API Reference

• pageable Grid prop
• pager Grid prop
• GridPagerSettings API

See Also

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