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:
Charles de Dreuille
2025-12-06 20:23:21 +00:00
committed by Johan Persson
parent 3d7fdd786a
commit 243e5e7139
31 changed files with 3497 additions and 1254 deletions
@@ -99,6 +99,7 @@ dataflow
dataloader
dayjs
debounce
debounced
debounces
debuggability
declaratively