Parameters

useTablePagination() takes one config object. Wrap it in a getter or a ref so the controls read the current page: useTablePagination(() => ({ ... })).

Name	Type	Default	Description
page	number	—	Required. Current page number, 1-based.
onPageChange	(page: number) => void	—	Required. Called when the page changes.
totalItems	number	—	Total number of items across all pages, used to calculate the page count. Without it, and without totalPages, the controls only know about hasMore.
totalPages	number	—	Total number of pages. Use it when you know the page count but not the item count. It wins over the count derived from totalItems.
hasMore	boolean	—	Whether more pages exist after the current one. Use it for cursor-based data where the total is unknown; the next button stays enabled while it is true.
pageSize	number	10	Number of items per page. Slice the rows with the same number.
onPageSizeChange	(pageSize: number) => void	—	Called when the user changes the page size. A page size selector appears only when this and pageSizeOptions are both set.
pageSizeOptions	number[]	[10, 20, 50, 100]	Available page size options. The selector still needs onPageSizeChange to be shown.
variant	'pages' | 'count' | 'compact' | 'dots' | 'none'	'pages'	What the controls show between the previous and next buttons: page number buttons, a "X-Y of Z" count, a compact "page X of Y", dot indicators, or nothing.
position	'below' | 'above' | 'both' | 'none'	'below'	Where the controls render relative to the table. With 'both' there are two sets, one on each side.
align	'start' | 'center' | 'end'	'center'	Horizontal alignment of the controls.
size	'sm' | 'md'	'md'	Height of the controls.
label	string	localized "Table pagination"	Accessible name for the pagination nav landmark. With position: 'both' the two navs get distinct names, the label suffixed with "(top)" and "(bottom)", so same-type landmarks stay unique.

Returns

useTablePagination() returns one TablePlugin<T>. Pass it to Table in plugins. The plugin fills two fields of the plugin contract:

Name	Type	Description
above	() => VNodeChild	Renders the controls above the table for position: 'above' and 'both'.
below	() => VNodeChild	Renders the controls under the table for position: 'below' and 'both'.

Both return null when position is 'none', or when the table holds a single page and hasMore is not true.