Pagination

La navigation entre les pages.

Le calcul des numéros et des ellipses vient de @sia-ui/headless : usePagination et ce composant appliquent la même règle, écrite une fois.

Installation

sia-ui add pagination

Ou par le paquet, sans rien copier :

import { Pagination } from "@sia-ui/react-web";

Props

Prop	Type	Défaut	Description
* onPageChange	(page: number) => void	—
* page	number	—
* totalPages	number	—
ariaLabel	string	—
className	string	—
compact	boolean	false	Masque les libellés et ne garde que les flèches.
jumpTo	boolean	false	Ajoute un champ pour sauter directement à une page. Sur quarante pages, atteindre la vingt-septième demande sinon de cliquer dans les ellipses jusqu'à ce qu'elle apparaisse.
nextLabel	string	—
onPageSizeChange	(pageSize: number) => void	—	Fourni avec pageSize, ajoute le choix du nombre de lignes par page. Seul le nouveau nombre est remonté : revenir en page 1 est l'affaire de qui tient l'état — setPerPage de useTableQuery le fait déjà.
pageSize	number	—	Le nombre de lignes par page en vigueur.
pageSizeLabel	string	—	Le libellé du choix. Par défaut locale.perPage — « Par page ».
pageSizeOptions	number[]	[10, 20, 50, 100]	Les tailles proposées. Par défaut 10, 20, 50, 100. Une taille en vigueur absente de la liste y est ajoutée, pour que le champ ne paraisse jamais vide.
pageSizeSelectProps	Partial<Omit<SelectProps, "children" | "value" | "defaultValue" | "onValueChange" | "options">>	—	Le Select de taille de page : placement, variante, classe. La valeur, les options et le rappel restent calculés ici — on les règle par pageSize, pageSizeOptions et onPageSizeChange.
previousLabel	string	—
renderPageSize	(context: PageSizeContext) => ReactNode	—	Remplace entièrement le contrôle — des boutons segmentés, un champ libre. Le choix des tailles et leur tri sont déjà faits.
showTotal	boolean	false	Affiche « Page 3 sur 40 » à côté des numéros.
siblingCount	number	1

* obligatoire.

Voir aussi

• Le composant dans le catalogue — états, variantes, et bac à sable.
• La référence complète — tous les composants.