paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 43 Packages Projects Releases Wiki Activity

feat(ui)!: redesign Table component with new useTable hook API

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
docs-ui/src/snippets/stories-snippets.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ import * as SkeletonStories from '../../../packages/ui/src/components/Skeleton/S
import * as CardStories from '../../../packages/ui/src/components/Card/Card.stories';
import * as HeaderStories from '../../../packages/ui/src/components/Header/Header.stories';
import * as HeaderPageStories from '../../../packages/ui/src/components/HeaderPage/HeaderPage.stories';
import * as TableStories from '../../../packages/ui/src/components/Table/Table.stories';
import * as TableStories from '../../../packages/ui/src/components/Table/stories/Table.docs.stories';
import * as TagGroupStories from '../../../packages/ui/src/components/TagGroup/TagGroup.stories';
import * as PasswordFieldStories from '../../../packages/ui/src/components/PasswordField/PasswordField.stories';
import * as VisuallyHiddenStories from '../../../packages/ui/src/components/VisuallyHidden/VisuallyHidden.stories';