Skip to content

v0.34.0

v0.34.0: feat(ui/Table): self-contained Root + FromTanstack adapter
@fredericrous fredericrous tagged this 11 May 07:48 
Table.Root now sets up its own @container query target and accepts
`sortChip` / `pagination` as named slot props, so a Table renders
correctly without an outer wrapper. The legacy Table.Container is
kept exported as a deprecated passthrough; existing consumers keep
working unchanged.

New Table.FromTanstack renders a styled Table directly from a TanStack
table instance — derives stack-mode labels from `meta.stackLabel` or a
string `columnDef.header`, marks the actions column from `meta.isActions`,
auto-wires SortChip options/value/onChange and Pagination, and accepts
an `onRowClick` that puts the click + keyboard activation on the row
itself (preserving the rowgroup → row ARIA hierarchy and stopping the
handler when the click target is an interactive descendant).

Other improvements:
- Table.Row gains optional onClick / aria-label so clickable rows no
  longer need outer role=button wrappers.
- styles.clickableRow adds a focus-visible outline (WCAG 2.4.7).
- HeaderCell `isActions` is now a deprecated no-op with a one-shot dev
  console.warn — the prop never did anything on HeaderCell.
- extractText is shallow now (no recursion into child elements) so an
  icon or popover inside a header doesn't pollute the stack-mode label.
- A dev warn fires when a HeaderCell has JSX-only children and no
  explicit `label`.
- extractColumnMeta unwraps memo() / forwardRef() wrappers so a
  consumer's `memo(Table.HeaderCell)` still identifies as HeaderCell.
- RowIndexContext / CellIndexContext providers key by the child's React
  key instead of array index, so reordered rows/columns preserve state.
- TanStack ColumnMeta augmentation moved to a standalone side-effect
  module re-exported from index.ts, so `meta.stackLabel` / `isActions`
  type-resolve as soon as @duro-app/ui is in the consumer's TS program.

Stories: Auto from TanStack + Slot props on Root, with play assertions
covering shape, keyboard activation, and click-bubble suppression.

CLAUDE.md: Data Table recipe rewritten — TanStack-first, manual JSX as
fallback, explicit "Don't" list.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Assets 2
Loading