📄 primereact/paginator

File: paginator.md | Updated: 11/15/2025

Source: https://primereact.org/paginator/

Introducing PrimeReact v11 Alpha 🥁Learn More

Paginator

Paginator displays data in paged format and provides navigation between pages.

Import#

import { Paginator } from 'primereact/paginator';

Copy

Basic#

Paginator is used as a controlled component with first, rows and onPageChange properties to manage the first index and number of records to display per page. Total number of records need to be with totalRecords property. Default template includes a dropdown to change the rows so rowsPerPageOptions is also necessary for the dropdown options.

12345

10

10

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

Copy

Layout#

Order and content of the default UI elements of the paginator is defined with the layout option of the template property. Default token names for the elements are as follows;

  • FirstPageLink
  • PrevPageLink
  • NextPageLink
  • LastPageLink
  • PageLinks
  • RowsPerPageDropdown
  • CurrentPageReport
  • JumpToPageInput

(1 of 5)

<Paginator first={first} rows={10} totalRecords={50} onPageChange={onPageChange} 
    template={{ layout: 'PrevPageLink CurrentPageReport NextPageLink' }} />

Copy

Template#

Templating allows overriding the default content of the UI elements by defining callbacks using the element name. The parameters passed to theese callbacks contain properties for binding to your custom elements like the event handler to trigger pagination. Additional leftContent and rightContent properties are available to insert content at both sides of the paginator.

Previous1234...Next

10

10

Go to

Items per page:

10

10

1 - 10 of 120

Items per page:

123451 - 10 of 120

<Paginator template={template1} first={first[0]} rows={rows[0]} totalRecords={120} onPageChange={(e) => onPageChange(e, 0)} leftContent={leftContent} rightContent={rightContent} />
<Paginator template={template2} first={first[1]} rows={rows[1]} totalRecords={120} onPageChange={(e) => onPageChange(e, 1)} className="justify-content-end" />
<Paginator template={template3} first={first[2]} rows={rows[2]} totalRecords={120} onPageChange={(e) => onPageChange(e, 2)} className="justify-content-start" />

Copy

Images#

Sample image gallery implementation using paginator.

(1 of 12)

0

<Paginator first={first} rows={1} totalRecords={12} onPageChange={onPageChange} template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />

<div className="p-3 text-center">
    <img alt={first} src={`https://primefaces.org/cdn/primereact/images/nature/nature${first + 1}.jpg`} className="shadow-2 border-round max-w-full" />
</div>

Copy

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

  • Import

  • Basic

  • Layout

  • Template

  • Images

  • Accessibility

PrimeReact 10.9.7 by PrimeTek