feat(ui)!: redesign Table component with new useTable hook API
Redesigns the Table component to provide a better developer
experience with a new useTable hook supporting three pagination
modes: complete (all data loaded upfront), offset (server-side),
and cursor (server-side).
BREAKING CHANGES:
- Table component (React Aria wrapper) is renamed to TableRoot
- New high-level Table component handles data display, pagination,
sorting, and selection
- useTable hook completely redesigned with new API
New features:
- Unified useTable hook with mode discriminator for all
pagination patterns (complete, offset, cursor)
- Custom page caching for server-side pagination with
bidirectional navigation and request cancellation
- Debounced query changes to reduce backend load
- Stale data preservation with visual indicator during reloads
- Row selection with toggle/replace behaviors
- Per-row disable control via getIsDisabled
MIGRATION GUIDE:
1. Update imports and use the new useTable hook:
```diff
-import { Table, useTable } from '@backstage/ui';
-const { data, paginationProps } = useTable({ data: items, pagination: {...} });
+import { Table, useTable, type ColumnConfig } from '@backstage/ui';
+const { tableProps } = useTable({
+ mode: 'complete',
+ getData: () => items,
+});
```
2. Define columns and render with the new Table API:
```diff
-<Table aria-label="My table">
- <TableHeader>...</TableHeader>
- <TableBody items={data}>...</TableBody>
-</Table>
-<TablePagination {...paginationProps} />
+const columns: ColumnConfig<Item>[] = [
+ { id: 'name', label: 'Name', isRowHeader: true, cell: item => <CellText title={item.name} /> },
+ { id: 'type', label: 'Type', cell: item => <CellText title={item.type} /> },
+];
+
+<Table columnConfig={columns} {...tableProps} />
```
Signed-off-by: Johan Persson <johanopersson@gmail.com>
This commit is contained in:
committed by
Johan Persson
parent
3d7fdd786a
commit
243e5e7139
@@ -99,6 +99,7 @@ dataflow
|
||||
dataloader
|
||||
dayjs
|
||||
debounce
|
||||
debounced
|
||||
debounces
|
||||
debuggability
|
||||
declaratively
|
||||
|
||||
Reference in New Issue
Block a user