#Pagination

Page-through navigation for a bounded set — previous and next, numbered pages with automatic ellipsis, and an optional rows-per-page selector. Infinite scroll is the house default for long data, so this is the deliberate alternative: reach for it when knowing and controlling your position genuinely helps — jumping to a page, coming back to page two, choosing a page size. “Lots of rows” on its own is not the cue. It is compound, so render only the parts you want, in the order you want.

Source · Storybook

#Usage

import { Pagination, PaginationList, PaginationNext, PaginationPrevious } from '@wallarm-org/design-system/Pagination';

#Examples

#Simple

Numbers only. Fine where the reader is scanning to a known page rather than stepping through.

#Links only

Previous and next with no numbers, for a set whose page count means nothing to the reader.

#With page size

PaginationPageSize puts rows-per-page in the same row. Offering it is the strongest reason to choose pagination over infinite scroll.

#Sizes

medium and small. Small is the one to use in a Table footer, where the pager should not outweigh the data.

#Alignment

align places the row left, centre or right — right for a table footer, centre for a standalone list.

#Many pages

siblingCount and boundaryCount decide how much of a 50-page set stays visible; the ellipsis is inserted for you.

#Playground

Controlled mode with both page and pageSize held outside, which is how it behaves against a real query.

#In table

The pager below a Table, sharing its state through useClientPagination — the composition to copy for a paged grid.

#Props

#PaginationEllipsis

#PaginationItem

#PaginationNext

#PaginationPageSize

#PaginationPrevious

#Explorer