Usage
Call useTablePagination with a config object containing page state and callback. Pass the returned plugin to Table via the plugins prop.
ts
Parameters
| Param | Type | Description |
|---|---|---|
pagerequired | number | Current page number (1-based). |
onPageChangerequired | (page: number) => void | Called when the page changes. |
totalItems | number | Total number of items across all pages. Used to calculate total page count. |
totalPages | number | Total number of pages. Use when you know the page count but not item count. |
hasMore | boolean | Whether more pages exist. Use for cursor-based pagination where the total is unknown. |
pageSize | number (default: 10) | Number of items per page. |
onPageSizeChange | (pageSize: number) => void | Called when the user changes the page size. Shows a page size dropdown when provided with pageSizeOptions. |
pageSizeOptions | number[] | Available page size options. Shows a page size selector when provided. |
variant | 'pages' | 'count' | 'compact' | 'dots' | 'none' (default: 'pages') | Visual variant for the pagination controls. |
position | 'below' | 'above' | 'both' | 'none' (default: 'below') | Where to render pagination controls relative to the table. |
align | 'start' | 'center' | 'end' (default: 'center') | Horizontal alignment of the pagination controls. |
label | string (default: 'Table pagination') | Accessible name for the pagination nav landmark. With position='both' the two navs get distinct names (the label suffixed as '(top)' and '(bottom)') so same-type landmarks stay unique (axe landmark-unique). |
Examples
Common configurations, variations, and states.Paginated data table navigating through a larger dataset page by page.