feat(ui): support disabling pagination in useTable complete mode

Add `CompletePaginationOptions` type extending `PaginationOptions`
with a `type` field supporting `'page'` (default) and `'none'`.
When using `mode: 'complete'` with `type: 'none'`, `useTable` skips
data slicing and produces `pagination: { type: 'none' }` in
`tableProps` directly.

Also sync `pageSize` state when `paginationOptions.pageSize` changes
dynamically, fixing cases where the initial value became stale.

Signed-off-by: Johan Persson <johanopersson@gmail.com>
This commit is contained in:
Johan Persson
2026-03-27 10:29:02 +01:00
parent 40c8ec9615
commit 3bc23a5587
8 changed files with 127 additions and 41 deletions
+1 -1
View File
@@ -119,7 +119,7 @@ With `mode: 'complete'`, sorting happens client-side. Provide a `sortFn` that re
### Pagination
Configure page size and available options through `paginationOptions`. The table displays navigation controls automatically.
Configure page size and available options through `paginationOptions`. The table displays navigation controls automatically. In `complete` mode, set `type: 'none'` to disable pagination and show all rows.
<CodeBlock code={tablePaginationSnippet} />
@@ -45,15 +45,44 @@ export const useTableOptionsPropDefs: Record<string, PropDef> = {
'The data for the table. Only applicable for "complete" mode, and either this or `getData` must be provided.',
},
paginationOptions: {
type: 'enum',
values: ['object'],
description: (
<>
Pagination configuration including <Chip>pageSize</Chip>,{' '}
<Chip>pageSizeOptions</Chip>, <Chip>initialOffset</Chip>, and{' '}
<Chip>showPaginationLabel</Chip>.
</>
),
type: 'complex',
description: 'Pagination configuration.',
complexType: {
name: 'PaginationOptions',
properties: {
type: {
type: "'page' | 'none'",
description:
"Pagination mode. Set to 'none' to disable pagination and show all rows (complete mode only). Defaults to 'page'.",
},
pageSize: {
type: 'number',
description: 'Number of items per page. Defaults to 20.',
},
pageSizeOptions: {
type: 'number[]',
description: 'Available page size options for the dropdown.',
},
initialOffset: {
type: 'number',
description: 'Starting offset for the first page.',
},
showPageSizeOptions: {
type: 'boolean',
description:
'Whether to show the page size dropdown. Defaults to true.',
},
showPaginationLabel: {
type: 'boolean',
description:
"Whether to display the pagination label (e.g., '1 - 20 of 150').",
},
getLabel: {
type: '(props) => string',
description: 'Custom function to generate the pagination label text.',
},
},
},
},
// Uncontrolled state
initialSort: {