lara-light-indigo

Paginator

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

Basic
10
Custom Template
...
10
Go to
Items per page:
10
1 - 10 of 120
Items per page:
1 - 10 of 120
Left and Right Content
(1 of 12)
Import via Module

import { Paginator } from 'primereact/paginator';
 
Import via CDN

<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/paginator/paginator.min.js"></script>
 
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
  • JumpToPageInput
  • CurrentPageReport

The pagination element is fully customizable. To make special paginators, an object can be given to the template property as below.


const template = {
    layout: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown CurrentPageReport', // The above keys can be set in the desired order.
    'FirstPageLink': (options) => {
        // options.onClick: Click event for the default element.
        // options.className: Style class of the default element.
        // options.iconClassName: Style class of the default icon element.
        // options.disabled: Indicates whether the element is disabled.
        // options.element: Default element created by the component.
        // options.props: Component props.

        return CustomElement;
    },
    'PrevPageLink': (options) => {
        // options.onClick: Click event for the default element.
        // options.className: Style class of the default element.
        // options.iconClassName: Style class of the default icon element.
        // options.disabled: Indicates whether the element is disabled.
        // options.element: Default element created by the component.
        // options.props: Component props.

        return CustomElement;
    },
    'PageLinks': (options) => {
        // options.onClick: Click event for the default element.
        // options.className: Style class of the default element.
        // options.view: {
        //     startPage: // First page displayed in view
        //     endPage:   // Last page displayed in view
        // }
        // options.page: Current page in loop.
        // options.currentPage: Current selected page.
        // options.totalPages: Total pages in paginator
        // options.element: Default element created by the component.
        // options.props: Component props.

        return CustomElement;
    },
    'NextPageLink': (options) => {
        // options.onClick: Click event for the default element.
        // options.className: Style class of the default element.
        // options.iconClassName: Style class of the default icon element.
        // options.disabled: Indicates whether the element is disabled.
        // options.element: Default element created by the component.
        // options.props: Component props.

        return CustomElement;
    },
    'LastPageLink': (options) => {
        // options.onClick: Click event for the default element.
        // options.className: Style class of the default element.
        // options.iconClassName: Style class of the default icon element.
        // options.disabled: Indicates whether the element is disabled.
        // options.element: Default element created by the component.
        // options.props: Component props.

        return CustomElement;
    },
    'RowsPerPageDropdown': (options) => {
        // options.value: Current selected value in the default element.
        // options.onChange: Change event for default element.
        // options.currentPage: Current selected page.
        // options.totalPages: Total pages in paginator.
        // options.totalRecords: Total records in paginator.
        // options.element: Default element created by the component.
        // options.props: Component props.

        return CustomElement;
    },
    'CurrentPageReport': (options) => {
        // options.currentPage: Current selected page.
        // options.totalPages: Total pages in paginator.
        // options.first: Zero-relative number of the first row to be displayed.
        // options.last: The number of the last row to be displayed.
        // options.rows: Row count in a page.
        // options.totalRecords: Total records in paginator.
        // options.className: Style class of the default element.
        // options.element: Default element created by the component.
        // options.props: Component props.

        return CustomElement;
    }
};
 

<Paginator template={template} first={this.state.customFirst} rows={this.state.customRows} totalRecords={120} onPageChange={this.onCustomPageChange}></Paginator>
 
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}
Properties
NameTypeDefaultDescription
totalRecordsnumber0Number of total records.
rowsnumber0Data count to display per page.
firstnumber0Zero-relative number of the first row to be displayed.
pageLinkSizenumber5Number of page links to display.
rowsPerPageOptionsarraynullArray of integer values to display inside rows per page dropdown.
stylestringnullInline style of the element.
classNamestringnullStyle class of the element.
templatestring|objectFirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdownTemplate of the paginator.
leftContentanynullContent to inject into the left side of the paginator.
rightContentanynullContent to inject into the right side of the paginator.
currentPageReportTemplatestring({currentPage} of {totalPages})Template of the current page report element. Available placeholders are {currentPage},{totalPages},{rows},{first},{last} and {totalRecords}
dropdownAppendToDOM element | stringdocument.bodyDOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
Events
NameParametersDescription
onPageChangeevent.page: New page number
event.first: Index of first record
event.rows: Number of rows to display in new page
event.page: Index of the new page
event.pageCount: Total number of pages
Callback to invoke when page changes, the event object contains information about the new state.
Styling

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

None.

Component Scale

Input Style

Ripple Effect

Free Themes

Built-in component themes created by the PrimeReact Theme Designer.

Bootstrap
Blue
Purple
Blue
Purple
Material Design
Indigo
Deep Purple
Indigo
Deep Purple
Material Design Compact
Indigo
Deep Purple
Indigo
Deep Purple
Tailwind
Tailwind Light
Fluent UI
Blue
PrimeOne Design - 2022 NEW
Lara Indigo
Lara Blue
Lara Purple
Lara Teal
Lara Indigo
Lara Blue
Lara Purple
Lara Teal
PrimeOne Design - 2021
Saga Blue
Saga Green
Saga Orange
Saga Purple
Vela Blue
Vela Green
Vela Orange
Vela Purple
Arya Blue
Arya Green
Arya Orange
Arya Purple
Premium Themes

Premium themes are only available exclusively for PrimeReact Theme Designer subscribers and therefore not included in PrimeReact core.

Soho Light
Soho Dark
Viva Light
Viva Dark
Mira
Nano

Legacy Free Themes

Nova
Nova Alt
Nova Accent
Luna Blue
Luna Green
Luna Amber
Luna Pink
Rhea

Premium Create-React-App Templates

Beautifully crafted premium create-react-app application templates by the PrimeTek design team.

Sakai
Atlantis
Freya
Ultima
Diamond
Sapphire
Serenity
Babylon
Avalon
Apollo
Roma