Angular Paginator

Angular Paginator is a generic component to display content in paged format.

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

Import

import {PaginatorModule} from 'primeng/paginator';

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>

CurrentPageReport

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}

Theming

Paginator supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeNG Paginator showcase for demos and documentation.