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.