Paginator

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.

10

<Paginator first={basicFirst} rows={basicRows} totalRecords={120} rowsPerPageOptions={[10, 20, 30]} onPageChange={onBasicPageChange}></Paginator>
         

Custom

...
10
Go to
Items per page:
10
1 - 10 of 120
Items per page:
1 - 10 of 120

<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

(1 of 12)
0

<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.

NameElement
p-paginatorContainer element.
p-paginator-firstFirst page element.
p-paginator-prevPrevious page element.
p-paginator-pagesContainer of page links.
p-paginator-pageA page link.
p-paginator-nextNext pge element.
p-paginator-lastLast page element.
p-paginator-rpp-optionsRows per page dropdown.
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

Screen Reader

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.

Keyboard Support

KeyFunction
tabMoves focus through the paginator elements.
enterExecutes the paginator element action.
spaceExecutes the paginator element action.

Rows Per Page Dropdown Keyboard Support

Refer to the dropdown documentation for more details about keyboard support.

Visit the API documentation for detailed information about all the properties, events and methods of the component.