DEV Community

loading...
Cover image for Vue3 Paginator

Vue3 Paginator

primetek profile image PrimeTek ・2 min read

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';
Enter fullscreen mode Exit fullscreen mode

Getting Started

rows and totalRecords are the required properties of the Paginator.

<Paginator :rows="10" :totalRecords="totalItemsCount"></Paginator>
Enter fullscreen mode Exit fullscreen mode

Start Index

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

<Paginator :first="offset" :rows="10" :totalRecords="totalItemsCount"></Paginator>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
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
}
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

pic
Editor guide