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

Import

import {Paginator} from 'primeng/primeng';

Getting Started

Paginator is defined using p-paginator element.

<p-paginator></p-paginator>

Rows and TotalRecords

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

<p-paginator rows="10" totalRecords="100"></p-paginator>

PageLinks

PageLinks provide shortcuts to jump to a specific page, use pageLinkSize property to define the number of links to display. Default is 5.

<p-paginator rows="10" totalRecords="100" pageLinkSize="3"></p-paginator>

Attributes

Name Type Default Description
totalRecords number 0 Number of total records.
rows number 0 Data count to display per page.
page number 0 Zero based index of the active page.
pageLinkSize number 5 Number of page links to display.
style string null Inline style of the component.
styleClass string null Style class of the component.

Events

Name Parameters Description
onPageChange 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.
<p-paginator rows="10" totalRecords="100" (onPageChange)="paginate($event)"></p-paginator>
export class MyComponent {

    paginate(event) {
        //event.first = Index of the 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
    }

}

Styling

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

Name Element
ui-paginator Container element.
ui-paginator-first First page element.
ui-paginator-prev Previous page element.
ui-paginator-pages Container of page links.
ui-paginator-page A page link.
ui-paginator-next Next pge element.
ui-paginator-last Last page element.

Dependencies

Native component that requires PrimeUI paginator widget css.

<p-paginator rows="10" totalRecords="100"></p-paginator>