React Paginator

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

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

import { Paginator } from 'primereact/paginator';

Getting Started

Paginator is used as a controlled component with first, rows (optional) and onPageChange properties.

<Paginator first={first} rows={rows} onPageChange={(e) => setFirst(e.first)}></Paginator>

Rows and TotalRecords

Rows and TotalRecords define how many pages the paginator should display. Paginator below will have 10 pages.

<Paginator rows={10} totalRecords={120} first={first} onPageChange={(e) => setFirst(e.first)}></Paginator>

Rows Per Page

Number of items per page can be changed by the user using a dropdown if you define rowsPerPageOptions as an array of possible values. In this case, rows property should also be updated

const onPageChange = (e) => {
    setFirst(e.first);
    setRows(e.rows);
}

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

Template

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.

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

CurrentPageReport

Current page report item in the itemplate displays information about the pagination state. Default value is ({currentPage} of {totalPages}) whereas available placeholders are the following;

• {currentPage}
• {totalPages}
• {rows}
• {first}
• {last}
• {totalRecords}

Theming

Paginator supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeReact Paginator showcase for demos and documentation.