Paginator

Paginator displays data in paged format and provides navigation between pages.


import { PaginatorModule } from 'primeng/paginator';

Paginator is used as a controlled component with first, rows and onPageChange properties to manage the first index and number of records to display per page. Total number of records need to be with totalRecords property. Default template includes a dropdown to change the rows so rowsPerPageOptions is also necessary for the dropdown options.


<p-paginator 
    (onPageChange)="onPageChange($event)" 
    [first]="first"
    [rows]="rows" 
    [totalRecords]="120" 
    [rowsPerPageOptions]="[10, 20, 30]" />

Localization information such as page numbers and rows per page options are defined with the locale property which defaults to the user locale.


<div class="flex-auto">
    <p-paginator 
        (onPageChange)="onPageChange($event)" 
        [first]="first" 
        [rows]="rows" 
        [totalRecords]="120" 
        [rowsPerPageOptions]="[10, 20, 30]" />
</div>

<div class="flex-auto">
    <p-paginator 
        locale="en-US" 
        (onPageChange)="onPageChange($event)" 
        [first]="first"
        [rows]="rows" 
        [totalRecords]="120" 
        [rowsPerPageOptions]="[10, 20, 30]" />
</div>

<div class="flex-auto">
    <p-paginator 
        locale="fa-IR" 
        (onPageChange)="onPageChange($event)" 
        [first]="first" 
        [rows]="rows" 
        [totalRecords]="120" 
        [rowsPerPageOptions]="[10, 20, 30]" />
</div>


Templating allows overriding the default content of the UI elements by defining callbacks using the element name.

Items per page:
1 - 10 of 120
Items per page:
1 - 10 of 120

<div class="flex align-items-center justify-content-center">
    <div>
        <p-button icon="pi pi-star" styleClass="p-button-outlined" />
    </div>
    <div class="flex-1">
        <p-paginator (onPageChange)="onPageChange1($event)" [first]="first1" [rows]="rows1" [totalRecords]="120" [rowsPerPageOptions]="[10, 20, 30]" [showFirstLastIcon]="false" />
    </div>
    <div class="justify-content-end">
        <p-button icon="pi pi-search" />
    </div>
</div>

<div class="flex align-items-center justify-content-end">
    <span class="mx-1 text-color">Items per page: </span>
    <p-dropdown [options]="options" optionLabel="label" optionValue="value" [(ngModel)]="rows2" (ngModelChange)="first2 = 0" />
    <p-paginator [first]="first2" [rows]="rows2" [totalRecords]="120" (onPageChange)="onPageChange2($event)" [showCurrentPageReport]="true"
        currentPageReportTemplate="{first} - {last} of {totalRecords}" [showPageLinks]="false" [showFirstLastIcon]="false" ></p-paginator>
</div>

<div class="flex align-items-center justify-content-start">
    <div class="flex justify-content-center align-items-center gap-3">
        <span>Items per page: </span>
        <p-slider [(ngModel)]="rows3" (ngModelChange)="first3 = 0" [style]="{ width: '10rem' }" [min]="10" [max]="120" [step]="30" />
    </div>
    <p-paginator (onPageChange)="onPageChange3($event)" [first]="first3" [rows]="rows3" [totalRecords]="totalRecords" [showFirstLastIcon]="false" 
        [showCurrentPageReport]="true" currentPageReportTemplate="{first} - {last} of {totalRecords}" ></p-paginator>
</div>

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

  • {currentPage}
  • {totalPages}
  • {rows}
  • {first}
  • {last}
  • {totalRecords}
Showing 1 to 10 of 120

<p-paginator
    (onPageChange)="onPageChange($event)"
    [first]="first"
    [rows]="rows"
    [totalRecords]="120"
    [showCurrentPageReport]="true"
    [showPageLinks]="false"
    [showJumpToPageDropdown]="false"
    currentPageReportTemplate="Showing {first} to {last} of {totalRecords}" />

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 page element.
p-paginator-lastLast page element.
p-paginator-rpp-optionsRows per page dropdown.
p-paginator-page-optionsJump to per page dropdown.

Screen Reader

Paginator is placed inside a nav element to indicate a navigation section. All of the paginator elements can be customized using templating however the default behavious is listed below.

First, previous, next and last page navigators elements with aria-label attributes referring to the aria.firstPageLabel, aria.prevPageLabel, aria.nextPageLabel and aria.lastPageLabelproperties of the locale API respectively.

Page links are also button elements with an aria-label attribute derived from the aria.pageLabel of the locale API. Current page is marked with aria-current set to "page" as well.

Current page report uses aria-live="polite" to instruct screen reader about the changes to the pagination state.

Rows per page dropdown internally uses a dropdown component, refer to the dropdown documentation for accessibility details. Additionally, the dropdown uses an aria-labelfrom the aria.rowsPerPage property of the locale API.

Jump to page input is an input element with an aria-label that refers to the aria.jumpToPage property of the locale API.

Keyboard Support

KeyFunction
tabMoves focus through the paginator elements.
enterExecutes the paginator element action.
spaceExecutes the paginator element action.

Rows Per Page Dropdown Keyboard Support

Refer to the dropdown documentation for more details about keyboard support.