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;
Paginator elements can be customized per screen size by defining a template per breakpoint. Note that breakpoints are based on max-width setting, if default key is omitted then the default template would be used. Example below has 4 settings; up to 640px, between 641px-960px, between 961px-1300px and larger than 1301px which is the default.
<Paginator
:template="{
'640px': 'PrevPageLink CurrentPageReport NextPageLink',
'960px': 'FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink',
'1300px': 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink',
default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink JumpToPageDropdown'
}"
:rows="10"
:totalRecords="totalRecords">
</Paginator>
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 | object, string | FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown | Template of the paginator, can either be a string or an object with key-value pairs to define templates per breakpoint. |
| 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. |
Paginator is placed inside a nav element to indicate a navigation section. All of the paginator elements can be customized using templating however the default behavious is listed below.
First, previous, next and last page navigators elements with aria-label attributes referring to the aria.firstPageLabel, aria.prevPageLabel, aria.nextPageLabel and aria.lastPageLabel properties of
the
Page links are also button elements with an aria-label attribute derived from the aria.pageLabel of the
Current page report uses aria-live="polite" to instruct screen reader about the changes to the pagination state.
Rows per page dropdown internally uses a dropdown component, refer to the
Jump to page input is an input element with an aria-label that refers to the aria.jumpToPageInputLabel property and jump to page dropdown internally uses a dropdown component, with an aria-label that refers
to the aria.jumpToPageDropdownLabel property of the
| Key | Function |
|---|---|
| tab | Moves focus through the paginator elements. |
| enter | Executes the paginator element action. |
| space | Executes the paginator element action. |
Refer to the
None.