Paginator

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

Usage#

import { Paginator } from 'primereact/paginator';

<Paginator>
    <Paginator.Content>
        <Paginator.First />
        <Paginator.Prev />
        <Paginator.Pages />
        <Paginator.Next />
        <Paginator.Last />
    </Paginator.Content>
</Paginator>

Examples#

Basic#

Use total prop to define the total number of items and itemsPerPage to define the number of items per page.

import { Paginator } from 'primereact/paginator';
 
function BasicDemo() {
    return (
        <div className="card flex items-center justify-center">
            <Paginator total={100} itemsPerPage={5} edges={0}>
                <Paginator.Content>
                    <Paginator.First />
                    <Paginator.Prev />
                    <Paginator.Pages />
                    <Paginator.Next />
                    <Paginator.Last />
                </Paginator.Content>
            </Paginator>
        </div>
    );
}
 
export default BasicDemo;

Siblings#

Use siblings prop to define the number of siblings to display. Siblings is the number of pages to display before and after the current page.

import { Paginator } from 'primereact/paginator';
 
function SiblingsDemo() {
    return (
        <div className="card flex items-center justify-center">
            <Paginator total={100} itemsPerPage={5} page={6} siblings={2}>
                <Paginator.Content>
                    <Paginator.First />
                    <Paginator.Prev />
                    <Paginator.Pages />
                    <Paginator.Next />
                    <Paginator.Last />
                </Paginator.Content>
            </Paginator>
        </div>
    );
}
 
export default SiblingsDemo;

Edges#

Use edges prop to define the number of edges to display. Edges is the number of pages to display first and last of the paginator.

import { Paginator } from 'primereact/paginator';
 
function EdgesDemo() {
    return (
        <div className="card flex items-center justify-center">
            <Paginator total={100} itemsPerPage={5} page={6} edges={2}>
                <Paginator.Content>
                    <Paginator.First />
                    <Paginator.Prev />
                    <Paginator.Pages />
                    <Paginator.Next />
                    <Paginator.Last />
                </Paginator.Content>
            </Paginator>
        </div>
    );
}
 
export default EdgesDemo;

Show Ellipsis#

Use showEllipsis prop to define whether to show ellipsis. If showEllipsis is false, edges prop is ignored.

import { Paginator } from 'primereact/paginator';
 
function ShowEllipsisDemo() {
    return (
        <div className="card flex items-center justify-center">
            <Paginator total={100} itemsPerPage={5} showEllipsis={false} siblings={3}>
                <Paginator.Content>
                    <Paginator.First />
                    <Paginator.Prev />
                    <Paginator.Pages />
                    <Paginator.Next />
                    <Paginator.Last />
                </Paginator.Content>
            </Paginator>
        </div>
    );
}
 
export default ShowEllipsisDemo;

Template#

Here are the available elements that can be placed inside a paginator in any order.

'use client';
import { usePaginatorChangeEvent } from '@primereact/types/shared/paginator';
import { Paginator } from 'primereact/paginator';
import React from 'react';
 
function TemplateDemo() {
    const [page, setPage] = React.useState(1);
 
    return (
        <div className="card flex flex-col gap-6 items-center justify-center">
            <Paginator total={12} itemsPerPage={1} page={1} onPageChange={(e: usePaginatorChangeEvent) => setPage(e.value)}>
                <Paginator.Content>
                    <Paginator.First />
                    <Paginator.Prev />
                    <div className="text-surface-500">({page} of 12)</div>
                    <Paginator.Next />
                    <Paginator.Last />
                </Paginator.Content>
            </Paginator>
 
            <div className="p-4 text-center">
                <img src={`https://primefaces.org/cdn/primevue/images/nature/nature${page}.jpg`} alt={page.toString()} className="rounded-lg w-full sm:w-[30rem]" />
            </div>
        </div>
    );
}
 
export default TemplateDemo;

Custom Text#

Use onPageChange event to define the custom text to display.

'use client';
import { usePaginatorChangeEvent } from '@primereact/types/shared/paginator';
import { Paginator } from 'primereact/paginator';
import React from 'react';
 
function CustomTextDemo() {
    const [page, setPage] = React.useState(1);
 
    const total = 100;
    const itemsPerPage = 5;
 
    return (
        <div className="card flex items-center justify-end">
            <Paginator total={total} itemsPerPage={itemsPerPage} page={page} onPageChange={(e: usePaginatorChangeEvent) => setPage(e.value)}>
                <Paginator.Content>
                    Showing {itemsPerPage * (page - 1) + 1} – {Math.min(total, itemsPerPage * page)} of {total}
                    <Paginator.Prev />
                    <Paginator.Next />
                </Paginator.Content>
            </Paginator>
        </div>
    );
}
 
export default CustomTextDemo;

Customization#

Pass an icon as a child to the element to override the default icon or use className to customize the element.

import { PaginatorPagesInstance } from '@primereact/types/shared/paginator';
import { Paginator } from 'primereact/paginator';
 
function CustomizationDemo() {
    return (
        <div className="card flex items-center justify-center">
            <Paginator total={100} itemsPerPage={5}>
                <Paginator.Content>
                    <Paginator.First className="min-w-auto px-3 py-2 rounded-md">First</Paginator.First>
                    <Paginator.Prev className="rounded-md border border-surface">
                        <i className="pi pi-arrow-left text-sm" />
                    </Paginator.Prev>
                    <Paginator.Pages>
                        {({ paginator }: PaginatorPagesInstance) =>
                            paginator?.pages.map((page, index) => (page.type === 'page' ? <Paginator.Page key={index} value={page.value} className="rounded-md border border-surface" /> : <Paginator.Ellipsis key={index} />))
                        }
                    </Paginator.Pages>
                    <Paginator.Next className="rounded-md border border-surface">
                        <i className="pi pi-arrow-right text-sm" />
                    </Paginator.Next>
                    <Paginator.Last className="min-w-auto px-3 py-2 rounded-md">Last</Paginator.Last>
                </Paginator.Content>
            </Paginator>
        </div>
    );
}
 
export default CustomizationDemo;

With Input#

'use client';
import { usePaginatorChangeEvent } from '@primereact/types/shared/paginator';
import { InputText } from 'primereact/inputtext';
import { Paginator } from 'primereact/paginator';
import React from 'react';
 
function WithInputDemo() {
    const [page, setPage] = React.useState(1);
 
    const total = 100;
    const itemsPerPage = 5;
    const maxPage = Math.ceil(total / itemsPerPage);
 
    return (
        <div className="card flex items-center justify-center">
            <Paginator
                total={total}
                itemsPerPage={itemsPerPage}
                page={page}
                onPageChange={(e: usePaginatorChangeEvent) => {
                    setPage(e.value);
                }}
            >
                <Paginator.Content>
                    <Paginator.First />
                    <Paginator.Prev />
                    <div className="flex items-center gap-2">
                        <InputText className="max-w-14 px-2 py-1" type="number" value={page} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPage(Number(e.target.value))} />
                        <span>of {maxPage}</span>
                    </div>
                    <Paginator.Next />
                    <Paginator.Last />
                </Paginator.Content>
            </Paginator>
        </div>
    );
}
 
export default WithInputDemo;

Accessibility#

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.lastPageLabel properties 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.

Keyboard Support#

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

On this page

Usage
Examples
Basic
Siblings
Edges
Show Ellipsis
Template
Custom Text
Customization
With Input
Accessibility
Screen Reader
Keyboard Support