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:
@@ -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: {
|
||||
|
||||
Reference in New Issue
Block a user