Vue3 Paginator

Vue3 Paginator is a generic component to display content in paged format. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.

Setup

Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.

Import

import Paginator from 'primevue/paginator';

Getting Started

rows and totalRecords are the required properties of the Paginator.

<Paginator :rows="10" :totalRecords="totalItemsCount"></Paginator>

Start Index

first property defines the index of the first item displayed by the paginator.

<Paginator :first="offset" :rows="10" :totalRecords="totalItemsCount"></Paginator>

Use the v-model directive to enable two-way binding, this is useful in cases where you need to programmatically control the paginator.

<Paginator v-model:first="offset" :rows="10" :totalRecords="totalItemsCount"></Paginator>

Rows Per Page

Number of items per page can be changed by the user using a dropdown with the rowsPerPageOptions property which accepts an array of possible values.

<Paginator v-model:first="offset" :rows="rows" :totalRecords="totalItemsCount" :rowsPerPageOptions="[10,20,30]"></Paginator>

As rows also change when the dropdown changes, use the optional v-model directive if you need two-way binding.

<Paginator v-model:first="offset" v-model:rows="rows" :totalRecords="totalItemsCount" :rowsPerPageOptions="[10,20,30]"></Paginator>

Template

Paginator elements can be customized using the template property using the predefined keys, default value is "FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown". Here are the available elements that can be placed inside a paginator in any order.

• FirstPageLink
• PrevPageLink
• PageLinks
• NextPageLink
• LastPageLink
• RowsPerPageDropdown
• CurrentPageReport

CurrentPageReport

Current page report item in the template displays information about the pagination state. Default value is ({currentPage} of {totalPages}) whereas available placeholders are the following;

• {currentPage}
• {totalPages}
• {rows}
• {first}
• {last}
• {totalRecords}

Custom Content

There are two templates available named "left" and "right" to add custom content to these locations. Both templates get a state object as a slot property to provide the current page, first index and the rows.

<Paginator v-model:first="offset" :rows="10" :totalRecords="totalItemsCount">
    <template #left="slotProps">
        Page: {{slotProps.state.page}}
        First: {{slotProps.state.first}}
        Rows: {{slotProps.state.rows}}
    </template>
    <template #right>
        <Button type="button" icon="pi pi-search" />
    </template>
</Paginator>

Page Change Event

Paginator provides only one event called page that passes all the information about the change event.

<Paginator :rows="10" :totalRecords="totalItemsCount" @page="onPage($event)"></Paginator>

onPage(event) {
    //event.page: New page number
    //event.first: Index of first record
    //event.rows: Number of rows to display in new page
    //event.pageCount: Total number of pages
}

Theming

Paginator supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeVue Paginator showcase for demos and documentation.