DEV Community

loading...
Cover image for Angular Paginator

Angular Paginator

primetek profile image PrimeTek ・1 min read

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';
Enter fullscreen mode Exit fullscreen mode

Getting Started

Paginator is defined using p-paginator element.

<p-paginator></p-paginator>
Enter fullscreen mode Exit fullscreen mode

 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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)

pic
Editor guide