Paginator

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

Import #


import { PaginatorModule } from 'primeng/paginator';

Basic #

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]" />

Template #

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 items-center justify-center">
    <div>
        <p-button icon="pi pi-star" 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-end">
        <p-button icon="pi pi-search" />
    </div>
</div>

<div class="flex items-center justify-end">
    <span class="mx-1 text-color">Items per page: </span>
    <p-select [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 items-center justify-start">
    <div class="flex justify-center items-center gap-4">
        <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 #

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}" />

Accessibility #

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

Key	Function
tab	Moves focus through the paginator elements.
enter	Executes the paginator element action.
space	Executes the paginator element action.

Rows Per Page Dropdown Keyboard Support

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

name	type	default	description
pageLinkSize	number	5	Number of page links to display.
style	Object	null	Inline style of the component.
styleClass	string	null	Style class of the component.
alwaysShow	boolean	true	Whether to show it even there is only one page.
dropdownAppendTo	any	null	Target element to attach the dropdown overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
templateLeft	TemplateRef<PaginatorState>	null	Template instance to inject into the left side of the paginator.
templateRight	TemplateRef<PaginatorState>	null	Template instance to inject into the right side of the paginator.
appendTo	any	null	Target element to attach the dropdown overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
dropdownScrollHeight	string	200px	Dropdown height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.
currentPageReportTemplate	string	{currentPage} of {totalPages}	Template of the current page report element. Available placeholders are {currentPage},{totalPages},{rows},{first},{last} and {totalRecords}
showCurrentPageReport	boolean	false	Whether to display current page report.
showFirstLastIcon	boolean	true	When enabled, icons are displayed on paginator to go first and last page.
totalRecords	number	0	Number of total records.
rows	number	0	Data count to display per page.
rowsPerPageOptions	any[]	null	Array of integer/object values to display inside rows per page dropdown. A object that have 'showAll' key can be added to it to show all data. Exp; [10,20,30,{showAll:'All'}]
showJumpToPageDropdown	boolean	false	Whether to display a dropdown to navigate to any page.
showJumpToPageInput	boolean	false	Whether to display a input to navigate to any page.
jumpToPageItemTemplate	TemplateRef<Object>	null	Template instance to inject into the jump to page dropdown item inside in the paginator.
showPageLinks	boolean	true	Whether to show page links.
locale	string	null	Locale to be used in formatting.
dropdownItemTemplate	TemplateRef<Object>	null	Template instance to inject into the rows per page dropdown item inside in the paginator.
first	number	null	Zero-relative number of the first row to be displayed.

name	parameters	description
dropdownicon		Custom dropdown trigger icon template.
firstpagelinkicon		Custom first page link icon template.
previouspagelinkicon		Custom previous page link icon template.
lastpagelinkicon		Custom last page link icon template.
nextpagelinkicon		Custom next page link icon template.

class	description
p-paginator	Class name of the paginator element
p-paginator-content-start	Class name of the content start element
p-paginator-content-end	Class name of the content end element
p-paginator-first	Class name of the first element
p-paginator-first-icon	Class name of the first icon element
p-paginator-prev	Class name of the prev element
p-paginator-prev-icon	Class name of the prev icon element
p-paginator-next	Class name of the next element
p-paginator-next-icon	Class name of the next icon element
p-paginator-last	Class name of the last element
p-paginator-last-icon	Class name of the last icon element
p-paginator-pages	Class name of the pages element
p-paginator-page	Class name of the page element
p-paginator-current	Class name of the current element
p-paginator-rpp-dropdown	Class name of the row per page dropdown element
p-paginator-jtp-dropdown	Class name of the jump to page dropdown element
p-paginator-jtp-input	Class name of the jump to page input element

token	variable	description
root.padding	--p-paginator-padding	Padding of root
root.gap	--p-paginator-gap	Gap of root
root.borderRadius	--p-paginator-border-radius	Border radius of root
root.background	--p-paginator-background	Background of root
root.color	--p-paginator-color	Color of root
root.transitionDuration	--p-paginator-transition-duration	Transition duration of root
navButton.background	--p-paginator-nav-button-background	Background of nav button
navButton.hoverBackground	--p-paginator-nav-button-hover-background	Hover background of nav button
navButton.selectedBackground	--p-paginator-nav-button-selected-background	Selected background of nav button
navButton.color	--p-paginator-nav-button-color	Color of nav button
navButton.hoverColor	--p-paginator-nav-button-hover-color	Hover color of nav button
navButton.selectedColor	--p-paginator-nav-button-selected-color	Selected color of nav button
navButton.width	--p-paginator-nav-button-width	Width of nav button
navButton.height	--p-paginator-nav-button-height	Height of nav button
navButton.borderRadius	--p-paginator-nav-button-border-radius	Border radius of nav button
focusRing.width	--p-paginator-nav-button-focus-ring-width	Focus ring width of nav button
focusRing.style	--p-paginator-nav-button-focus-ring-style	Focus ring style of nav button
focusRing.color	--p-paginator-nav-button-focus-ring-color	Focus ring color of nav button
focusRing.offset	--p-paginator-nav-button-focus-ring-offset	Focus ring offset of nav button
focusRing.shadow	--p-paginator-nav-button-focus-ring-shadow	Focus ring shadow of nav button
currentPageReport.color	--p-paginator-current-page-report-color	Color of current page report
jumpToPageInput.maxWidth	--p-paginator-jump-to-page-input-max-width	Max width of jump to page input

Paginator

Import #

Basic #

Template #

Current Page Report #

Accessibility #

Screen Reader

Keyboard Support

Rows Per Page Dropdown Keyboard Support

Paginator API

Paginator #

Properties #

Emitters #

Templates #

Interfaces #

PaginatorState #

Paginator Theming

CSS Classes #

Paginator Design Tokens #