import Paginator from 'primevue/paginator';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
rows and totalRecords are the required properties of the Paginator.
<Paginator :rows="10" :totalRecords="totalItemsCount"></Paginator>
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>
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>
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.
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;
There are two templates available named start and end 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 #start="slotProps">
Page: {{slotProps.state.page}}
First: {{slotProps.state.first}}
Rows: {{slotProps.state.rows}}
</template>
<template #end>
<Button type="button" icon="pi pi-search" />
</template>
</Paginator>
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
}
| Name | Type | Default | Description |
|---|---|---|---|
| totalRecords | number | 0 | Number of total records. |
| rows | number | 0 | Data count to display per page. |
| first | number | 0 | Zero-relative number of the first row to be displayed. |
| pageLinkSize | number | 5 | Number of page links to display. |
| rowsPerPageOptions | array | null | Array of integer values to display inside rows per page dropdown. |
| template | string | FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown | Template of the paginator. |
| currentPageReportTemplate | string | ({currentPage} of {totalPages}) | Template of the current page report element. Available placeholders are {currentPage},{totalPages},{rows},{first},{last} and {totalRecords} |
| alwaysShow | boolean | true | Whether to show the paginator even there is only one page. |
| Name | Parameters | Description |
|---|---|---|
| page |
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 |
Callback to invoke when page changes, the event object contains information about the new state. |
| Name | Parameters |
|---|---|
| start | state: State of the paginator |
| end | state: State of the paginator |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-paginator | Container element. |
| p-paginator-first | First page element. |
| p-paginator-prev | Previous page element. |
| p-paginator-pages | Container of page links. |
| p-paginator-page | A page link. |
| p-paginator-next | Next pge element. |
| p-paginator-last | Last page element. |
| p-paginator-rpp-options | Rows per page dropdown. |
None.