Pagination

Basic

The Pagination component helps you navigate through large sets of data by dividing them into pages. It’s easy to customize how many pages are visible, how many items are on each page, and more.

<Pagination 
    :total="120" 
    :modelValue="1" 
    :sizePage="10">
</Pagination>
<Pagination 
    :total="500" 
    :modelValue="1" 
    :sizePage="20" 
    :isInfoText="true">
</Pagination>
<Pagination 
    :total="300" 
    :modelValue="3" 
    :visibleNumberPages="7">
</Pagination>

To get started, just set the total number of items, the modelValue for the current page, and the sizePage for items per page.

Current Page

This is the page you’re on right now. Use the modelValue prop to control which page is active.

<Pagination :total="100" :modelValue="1"></Pagination>
<Pagination :total="100" :modelValue="5"></Pagination>

Styling Mode

Choose how the pagination looks using the mode prop. You can go for an outlined, filled, or underlined style, depending on your design.

<Pagination :total="100" mode="outlined"></Pagination>
<Pagination :total="100" mode="filled"></Pagination>
<Pagination :total="100" mode="underlined"></Pagination>

Items Per Page

Control how many items appear on each page by setting the sizePage prop.

<Pagination :total="100" :sizePage="10"></Pagination>
<Pagination :total="100" :sizePage="20"></Pagination>

Page Size Selector

Let users pick how many items they want to see per page from a dropdown. Use the sizesSelector prop to define the available options, and enable the selector with isPageSizeSelector.

<Pagination 
    :total="100" 
    :sizePage="10"
    :sizesSelector="[5, 10, 25]" 
    :isPageSizeSelector="true">
</Pagination>
<Pagination 
    :total="100" 
    :sizePage="10"
    :sizesSelector="[10, 20, 50]" 
    :isPageSizeSelector="true">
</Pagination>

Number of Visible Pages

If you have a lot of pages, you can control how many page numbers are shown in the navigation using visibleNumberPages.

<Pagination :total="100" :visibleNumberPages="5"></Pagination>
<Pagination :total="100" :visibleNumberPages="7"></Pagination>

Total Items

Set the total number of items you’re paginating through with the total prop. This determines how many pages will be created.

<Pagination :total="50"></Pagination>
<Pagination :total="200"></Pagination>

Informational Text

Turn on helpful text that shows which items are currently displayed out of the total by setting isInfoText to true.

<Pagination :total="100" :isInfoText="true"></Pagination>

Page Size Selector Toggle

Want to let users change how many items appear on a page? Turn this feature on with isPageSizeSelector.

<Pagination :total="100" :isPageSizeSelector="true"></Pagination>

Hide Navigation Buttons

If you want a cleaner look and don’t need the "Next" or "Previous" buttons, you can hide them by setting isHiddenNavigationButtons to true.

<Pagination :total="100" :isHiddenNavigationButtons="true"></Pagination>

Custom Styles

If you need to tweak the look even further, you can add your own CSS classes using the class prop.

<Pagination :total="100" class="custom-pagination-class"></Pagination>