Paginator

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

Events

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Accessibility

This section is under development. After the necessary tests and improvements are made, it will be shared with the users as soon as possible.

Dependencies

None.