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>

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.


<p-paginator rows="10" totalRecords="120" [rowsPerPageOptions]="[10,20,30]"></p-paginator>

Attributes

Name Type Default Description
totalRecords number 0 Number of total records.
rows number 0 Data count to display per page.
first number 0 Zero-relative number of the first row to be displayed.
pageLinkSize number 5 Number of page links to display.
rowsPerPageOptions array null Array of integer values to display inside rows per page dropdown.
style string null Inline style of the component.
styleClass string null Style class of the component.

Events

Name Parameters Description
onPageChange event.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.

<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.
ui-paginator-rpp-options Rows per page dropdown.

Dependencies

Native component that requires css of PrimeUI Paginator.


<p-paginator rows="10" totalRecords="120" [rowsPerPageOptions]="[10,20,30]"></p-paginator>