Paginator is a generic widget to display content in paged format.
import { Paginator } from 'primereact/paginator';
Paginator is a generic widget to display content in paged format.
<Paginator first={basicFirst} rows={basicRows} totalRecords={120} rowsPerPageOptions={[10, 20, 30]} onPageChange={onBasicPageChange}></Paginator>
Custom
<Paginator template={template1} first={customFirst1} rows={customRows1} totalRecords={120} onPageChange={onCustomPageChange1}></Paginator>
<Paginator template={template2} first={customFirst2} rows={customRows2} totalRecords={120} onPageChange={onCustomPageChange2} className="justify-content-end my-3"></Paginator>
<Paginator template={template3} first={customFirst3} rows={customRows3} totalRecords={120} onPageChange={onCustomPageChange3} className="justify-content-start my-3"></Paginator>
Left and Right Content
<Paginator first={contentFirst} rows={1} totalRecords={12} onPageChange={onContentPageChange}
leftContent={leftContent} rightContent={rightContent}
template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"></Paginator
<div className="p-3 text-center">
<img alt={contentFirst} src={`/images/nature/nature${contentFirst + 1}.jpg`} />
</div>
Following is the list of structural style classes, for theming classes visit theming page.
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.lastPageLabelproperties of the locale API respectively.
Page links are also button elements with an aria-label attribute derived from the aria.pageLabel of the locale API. Current page is marked with aria-current set to "page" as well.
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 dropdown documentation for accessibility details. Additionally, the dropdown uses an aria-labelfrom the aria.rowsPerPage property of the locale API.
Jump to page input is an input element with an aria-label that refers to the aria.jumpToPage property of the locale API.
Key | Function |
---|---|
tab | Moves focus through the paginator elements. |
enter | Executes the paginator element action. |
space | Executes the paginator element action. |
Refer to the dropdown documentation for more details about keyboard support.