Paginator

Paginator is a generic widget to display content in paged format.

Import#


import { Paginator } from 'primereact/paginator';

Basic#

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 Template#

Custom

...Go to

Items per page: 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#

Left and Right Content

(1 of 12)


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

Style#

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.

Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

Accessibility#

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

Key	Function
tab	Moves focus through the paginator elements.
enter	Executes the paginator element action.
space	Executes the paginator element action.

Rows Per Page Dropdown Keyboard Support

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

API#

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

Paginator