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.
Discussion (1)