@duro-app/ui 0.45.0 → 0.46.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.45.0",
+  "version": "0.46.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -55,7 +55,7 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.6",
-    "@duro-app/tokens": "^0.45.0"
+    "@duro-app/tokens": "^0.46.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/Table/FromTanstack.tsx

@@ -22,9 +22,6 @@ interface FromTanstackBaseProps<TData> {
   readonly variant?: TableVariant
   readonly size?: TableSize
   readonly responsive?: boolean
-  /** Min comfortable column width (px) before the table cards up. Forwarded
-   *  to Table.Root — see its `minColumnWidth`. Default 128. */
-  readonly minColumnWidth?: number
   /** Render a SortChip above the grid (stack-mode only). Options derive from
    *  columns where `column.getCanSort()` returns true. Wires value/onChange
    *  through the TanStack sorting state automatically. */
@@ -71,7 +68,6 @@ export function FromTanstack<TData>({
   variant = 'default',
   size = 'md',
   responsive = true,
-  minColumnWidth,
   sortChip,
   pagination,
   rowKey,
@@ -86,7 +82,6 @@ export function FromTanstack<TData>({
       variant={variant}
       size={size}
       responsive={responsive}
-      minColumnWidth={minColumnWidth}
       sortChip={sortChipNode}
       pagination={paginationNode}
     >

package/src/components/Table/Table.stories.tsx

@@ -1142,10 +1142,14 @@ export const SlotPropsOnRoot: Story = {
 // grid track into the next column. Cells now shrink to their track and wrap.
 const overlapWrapStyles = css.create({
   wide: {width: 760},
-  // 6 columns in 560px → each column would get < 128px (the min comfortable
-  // width), well above the 440px mobile breakpoint, so only the JS
-  // ResizeObserver — not the @container query — can catch the cramping.
+  // 6 columns in 560px, above the 440px mobile breakpoint, so the @container
+  // query never fires — only the JS overflow check catches that the action
+  // buttons no longer fit their squeezed track.
   cramped: {width: 560},
+  // 8 short-text columns with room to breathe: nothing overflows, so a
+  // wide "grants-style" table must stay tabular even though it has many
+  // columns (regression guard against the old column-count heuristic).
+  roomy: {width: 1120},
 })
 
 const LONG_EMAIL = 'a-really-long-service-account.address@subdomain.example-company.com'
@@ -1212,7 +1216,9 @@ export const AutoStacksWhenCramped: Story = {
             <Table.HeaderCell>Email</Table.HeaderCell>
             <Table.HeaderCell>Status</Table.HeaderCell>
             <Table.HeaderCell>Owner</Table.HeaderCell>
-            <Table.HeaderCell width="max-content">Actions</Table.HeaderCell>
+            {/* Normal 1fr track (no max-content) so the buttons get squeezed
+                and overflow — the exact condition the auto-stack detects. */}
+            <Table.HeaderCell>Actions</Table.HeaderCell>
           </Table.Row>
         </Table.Header>
         <Table.Body>
@@ -1258,3 +1264,54 @@ export const AutoStacksWhenCramped: Story = {
     await expect(getComputedStyle(ownerLabel).display).toBe('block')
   },
 }
+
+// Regression guard for the grants over-stacking bug: a table with MANY
+// columns (8) that all fit comfortably must stay tabular. The old heuristic
+// stacked purely on column count (8 × 128px = 1024px threshold), carding up a
+// table that visually fits on a laptop. Overflow-based detection keeps it
+// tabular because nothing actually overflows.
+export const ManyColumnsStayTabularWhenFitting: Story = {
+  name: 'Many columns stay tabular when they fit',
+  render: () => (
+    <html.div style={overlapWrapStyles.roomy}>
+      <Table.Root>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell>Principal</Table.HeaderCell>
+            <Table.HeaderCell>Application</Table.HeaderCell>
+            <Table.HeaderCell>Role</Table.HeaderCell>
+            <Table.HeaderCell>Entitlement</Table.HeaderCell>
+            <Table.HeaderCell>Resource</Table.HeaderCell>
+            <Table.HeaderCell>Granted by</Table.HeaderCell>
+            <Table.HeaderCell>Expires</Table.HeaderCell>
+            <Table.HeaderCell>Status</Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>alice</Table.Cell>
+            <Table.Cell>Immich</Table.Cell>
+            <Table.Cell>Editor</Table.Cell>
+            <Table.Cell>library</Table.Cell>
+            <Table.Cell>all</Table.Cell>
+            <Table.Cell>daddy</Table.Cell>
+            <Table.Cell>Never</Table.Cell>
+            <Table.Cell>
+              <Badge variant="success">Active</Badge>
+            </Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table.Root>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    const grid = canvas.getByRole('table')
+    // Give the ResizeObserver a chance to (not) fire, then assert it stayed
+    // tabular: 8 header cells still in the a11y tree, grid keeps 8 tracks.
+    await waitFor(async () => {
+      await expect(canvas.queryAllByRole('columnheader')).toHaveLength(8)
+    })
+    const tracks = getComputedStyle(grid).gridTemplateColumns.trim().split(/\s+/)
+    await expect(tracks.length).toBe(8)
+  },
+}

package/src/components/Table/Table.tsx

@@ -49,6 +49,31 @@ interface TableContextValue {
 // the @container CSS covers true mobile without JS.
 const useIsoLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
 
+// Does any column's content no longer fit its box? We sample the header row
+// plus the first body row (bounded cost). Free text wraps rather than
+// overflowing (min-width:0 + overflow-wrap), so this only trips on content
+// that genuinely can't shrink — action buttons, badges, or nowrap header
+// labels — i.e. the real "columns won't fit" signal, independent of how many
+// columns there are. Structural overflow is consistent down a column, so the
+// first body row is a faithful sample.
+function gridOverflows(grid: HTMLDivElement | null): boolean {
+  if (!grid) return false
+  const TOL = 2 // sub-pixel layout rounding slack
+  const over = (el: Element) => el.scrollWidth - el.clientWidth > TOL
+  for (const h of grid.querySelectorAll('[role="columnheader"]')) {
+    if (over(h)) return true
+  }
+  const rowgroups = grid.querySelectorAll('[role="rowgroup"]')
+  const body = rowgroups[rowgroups.length - 1] // header is first, body last
+  const firstRow = body?.querySelector('[role="row"]')
+  if (firstRow) {
+    for (const c of firstRow.querySelectorAll('[role="cell"]')) {
+      if (over(c)) return true
+    }
+  }
+  return false
+}
+
 const TableContext = createContext<TableContextValue | null>(null)
 
 function useTable() {
@@ -188,16 +213,8 @@ interface RootProps {
   children: ReactNode
   variant?: TableVariant
   size?: TableSize
-  /** Opt out of responsive container-query behavior. Default true. */
+  /** Opt out of responsive behavior (auto-stacking + container query). Default true. */
   responsive?: boolean
-  /**
-   * Minimum comfortable width (px) for a single column. When responsive,
-   * Root measures its container and switches to the stacked card layout as
-   * soon as `containerWidth < columnCount × minColumnWidth` — i.e. before
-   * cells get crushed, not only at the fixed mobile breakpoint. Raise it to
-   * card up sooner, lower it to keep the grid at tighter widths. Default 128.
-   */
-  minColumnWidth?: number
   /**
    * Optional sort UI rendered above the grid. Visible only in stack mode
    * (SortChip carries its own `display: none → inline-flex` rule). Typical
@@ -216,7 +233,6 @@ export function Root({
   variant = 'default',
   size = 'md',
   responsive = true,
-  minColumnWidth = 128,
   sortChip,
   pagination,
 }: RootProps) {
@@ -226,38 +242,67 @@ export function Root({
     inferredTemplateRef.current = template
   }
 
-  // Content-aware stacking. A container query can't see the column count, so
-  // measure the container and card up as soon as each column would fall
-  // below `minColumnWidth`. Keyed on labels.length so it tracks the actual
-  // number of columns. The @container base (styles.*: STACK_BP) still fires
-  // independently for genuinely narrow widths without needing JS.
-  const columnCount = labels.length
+  // Content-aware stacking driven by ACTUAL overflow, not a width heuristic.
+  // Column count alone is a poor proxy — a table with 8 short-text columns
+  // fits fine on a laptop, while 4 columns of buttons + long emails can be
+  // crushed. So instead of guessing, we render tabular and check whether any
+  // cell's content actually overflows its box (scrollWidth > clientWidth);
+  // when it does, the columns can't fit and we card up. The @container base
+  // (styles.*: STACK_BP) still stacks true-mobile widths without JS.
+  //
+  // Oscillation guard: stacking changes the layout (cards never overflow), so
+  // we can't re-measure overflow while stacked. We latch the container width
+  // at the moment we stacked and only return to tabular once the container
+  // has grown comfortably past it (hysteresis), then re-check overflow fresh.
   const containerRef = useRef<HTMLDivElement>(null)
+  const gridRef = useRef<HTMLDivElement>(null)
   const [stacked, setStacked] = useState(false)
+  const stackedAtWidthRef = useRef(0)
 
+  // Re-runs whenever `stacked` flips: after we drop back to tabular the
+  // container width is unchanged, so the ResizeObserver won't fire — the
+  // effect re-running is what re-checks overflow in the fresh tabular layout.
   useIsoLayoutEffect(() => {
-    if (!responsive || columnCount === 0) {
+    if (!responsive) {
       setStacked(false)
       return
     }
     const el = containerRef.current
     if (!el || typeof ResizeObserver === 'undefined') return
-    const threshold = columnCount * minColumnWidth
-    const apply = (width: number) => setStacked(width > 0 && width < threshold)
-    apply(el.getBoundingClientRect().width)
+
+    // Grows-back margin: only leave stack mode once we're well clear of the
+    // width that triggered it, so a 1px jiggle at the boundary can't flip-flop.
+    const HYSTERESIS = 48
+
+    const measure = (width: number) => {
+      if (width <= 0) return
+      if (!stacked) {
+        if (gridOverflows(gridRef.current)) {
+          stackedAtWidthRef.current = width
+          setStacked(true)
+        }
+      } else if (width > stackedAtWidthRef.current + HYSTERESIS) {
+        // Drop back to tabular; this effect re-runs and re-checks overflow.
+        setStacked(false)
+      }
+    }
+
+    measure(el.getBoundingClientRect().width)
     const ro = new ResizeObserver((entries) => {
       const entry = entries[0]
       if (!entry) return
       const box = entry.contentBoxSize?.[0]
-      apply(box ? box.inlineSize : entry.contentRect.width)
+      measure(box ? box.inlineSize : entry.contentRect.width)
     })
     ro.observe(el)
     return () => ro.disconnect()
-  }, [responsive, columnCount, minColumnWidth])
+    // labels.length re-runs detection when the column set changes.
+  }, [responsive, labels.length, stacked])
 
   const grid = (
     <html.div
       role="table"
+      ref={gridRef}
       style={[
         styles.root,
         // When responsive, use gridColumnsResponsive so the explicit column

package/src/components/Tag/Tag.stories.tsx

@@ -49,8 +49,30 @@ export const Small: Story = {
 const layoutStyles = css.create({
   row: {display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap'},
   stack: {display: 'flex', flexDirection: 'column', gap: 16},
+  // Narrow column that a long identifier tag would overflow without `wrap`.
+  narrowCol: {width: 120, borderWidth: 1, borderStyle: 'solid', borderColor: '#333', padding: 8},
 })
 
+const LONG_CAP = 'lldap.group.member.remove'
+
+// A long identifier-style tag in a narrow column: with `wrap` it breaks
+// within the column instead of overflowing (its scrollWidth stays within the
+// box), fixing the "capability leaks into the next column" bug.
+export const WrapLongLabel: Story = {
+  render: () => (
+    <html.div style={layoutStyles.narrowCol}>
+      <Tag size="sm" wrap>
+        {LONG_CAP}
+      </Tag>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    const tag = canvas.getByText(LONG_CAP)
+    // Content wraps inside the tag; the tag doesn't spill past its column.
+    await expect(tag.scrollWidth).toBeLessThanOrEqual(tag.clientWidth + 2)
+  },
+}
+
 export const AllVariants: Story = {
   render: () => (
     <html.div style={layoutStyles.stack}>

package/src/components/Tag/Tag.tsx

@@ -16,6 +16,14 @@ interface TagProps {
   /** Called when remove button is clicked. Auto-wired to TagGroup when inside one. */
   onRemove?: () => void
   disabled?: boolean
+  /**
+   * Allow the label to wrap / break instead of staying on one line. Tags are
+   * `white-space: nowrap` by default (they read as pills); set this for long
+   * identifier-style values (e.g. `lldap.group.member.remove`) sitting in a
+   * constrained column, so they break within their cell instead of leaking
+   * into the next one.
+   */
+  wrap?: boolean
   children: ReactNode
 }
 
@@ -36,6 +44,7 @@ export function Tag({
   removable: removableProp,
   onRemove: onRemoveProp,
   disabled: disabledProp = false,
+  wrap = false,
   children,
 }: TagProps) {
   const group = useTagGroup()
@@ -133,6 +142,7 @@ export function Tag({
         removable && removableSizeMap[size],
         styles[variant],
         disabled && styles.disabled,
+        wrap && styles.wrap,
       ]}
     >
       {tagContent}

package/src/components/Tag/styles.css.ts

@@ -13,6 +13,7 @@ export const styles = css.create({
     lineHeight: 1,
     borderRadius: 4,
     whiteSpace: 'nowrap',
+    minWidth: 0,
     borderWidth: 1,
     borderStyle: 'solid',
     borderColor: colors.border,
@@ -47,6 +48,17 @@ export const styles = css.create({
     paddingRight: spacing.sm,
     fontSize: typography.fontSizeXs,
   },
+  // Opt-in wrapping for long identifier-style labels. Overrides the base
+  // nowrap so the text breaks within its container (e.g. a table cell)
+  // instead of overflowing into the next column. `anywhere` also lets the
+  // tag shrink below its content's intrinsic width so a flex/grid parent can
+  // actually give it a narrow track.
+  wrap: {
+    whiteSpace: 'normal',
+    overflowWrap: 'anywhere',
+    lineHeight: 1.35,
+    textAlign: 'start',
+  },
   // Reduce right padding when removable to keep visual balance with the button
   removableMd: {
     paddingRight: spacing.sm,

package/src/components/VirtualTable/VirtualTable.stories.tsx

@@ -1,8 +1,14 @@
 import type {Meta, StoryObj} from '@storybook/react'
 import {expect, fn, waitFor} from 'storybook/test'
 import {createColumnHelper} from '@tanstack/react-table'
+import {css, html} from 'react-strict-dom'
 import {VirtualTable} from './VirtualTable'
 
+const storyStyles = css.create({
+  // Phone-width wrapper: below VirtualTable's 640px stackBelow default.
+  narrow: {width: 400},
+})
+
 interface Item {
   id: string
   name: string
@@ -87,3 +93,26 @@ export const ScrollReportsPage: Story = {
     await expect(maxPage).toBeGreaterThan(1)
   },
 }
+
+// In a narrow (phone-width) container the table cards up: header hides and
+// each row becomes a label/value card, like Table's stack mode.
+export const StacksOnNarrow: Story = {
+  args: {data: makeData(6), onRowClick: fn(), rowLabel: (r: Item) => r.name},
+  decorators: [
+    (Story) => (
+      <html.div style={storyStyles.narrow}>
+        <Story />
+      </html.div>
+    ),
+  ],
+  play: async ({canvas}) => {
+    // Header group not rendered → no column headers in the a11y tree.
+    await waitFor(async () => {
+      await expect(canvas.queryAllByRole('columnheader')).toHaveLength(0)
+    })
+    // Each card surfaces the column labels ('Name'/'Value') next to values.
+    await expect(canvas.getAllByText('Name').length).toBe(6)
+    await expect(canvas.getByText('Row 0')).toBeInTheDocument()
+    await expect(canvas.getByText('Row 5')).toBeInTheDocument()
+  },
+}

package/src/components/VirtualTable/VirtualTable.tsx

@@ -1,4 +1,4 @@
-import {useEffect, useRef, useState, type ReactNode} from 'react'
+import {useEffect, useLayoutEffect, useRef, useState, type ReactNode} from 'react'
 import {html} from 'react-strict-dom'
 import {
   useReactTable,
@@ -13,6 +13,9 @@ import {
 import {useVirtualizer} from '@tanstack/react-virtual'
 import {styles} from './styles.css'
 
+// Measure + commit before paint on the client; no-op-safe on the server.
+const useIsoLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
+
 export interface VirtualTableRange {
   /** 1-based index of the first visible row (0 when empty). */
   from: number
@@ -56,6 +59,17 @@ interface VirtualTableProps<TData> {
   maxHeight?: number | string
   /** Render every row (no windowing) at or below this count. Default 150. */
   virtualizeThreshold?: number
+  /**
+   * Below this container width (px) the table cards up: the header hides and
+   * each row becomes a label/value card (like Table's stack mode). Since the
+   * flex columns truncate rather than overflow, this is a deliberate
+   * phone-width breakpoint, not an auto content measurement. Cards disable
+   * windowing (variable heights), so keep phone lists reasonably short.
+   * Default 640. Set `responsive={false}` to disable entirely.
+   */
+  stackBelow?: number
+  /** Opt out of the card-up-on-narrow behavior. Default true. */
+  responsive?: boolean
   emptyLabel?: ReactNode
 }
 
@@ -84,6 +98,8 @@ export function VirtualTable<TData>({
   estimateRowHeight = 44,
   maxHeight = '70vh',
   virtualizeThreshold = 150,
+  stackBelow = 640,
+  responsive = true,
   emptyLabel,
 }: VirtualTableProps<TData>) {
   // Support both controlled sorting (SortChip in the caller) and standalone use.
@@ -102,7 +118,35 @@ export function VirtualTable<TData>({
   })
 
   const rows = table.getRowModel().rows
-  const virtualize = rows.length > virtualizeThreshold
+
+  // Card-up on narrow containers. Flex cells truncate rather than overflow, so
+  // there's no content-overflow signal to measure (as in Table) — we use a
+  // deliberate phone-width breakpoint. Cards render every row (no windowing),
+  // so `virtualize` is forced off while stacked.
+  const wrapRef = useRef<HTMLDivElement>(null)
+  const [stacked, setStacked] = useState(false)
+  useIsoLayoutEffect(() => {
+    if (!responsive) {
+      setStacked(false)
+      return
+    }
+    const el = wrapRef.current
+    if (!el || typeof ResizeObserver === 'undefined') return
+    const apply = (width: number) => {
+      if (width > 0) setStacked(width < stackBelow)
+    }
+    apply(el.getBoundingClientRect().width)
+    const ro = new ResizeObserver((entries) => {
+      const entry = entries[0]
+      if (!entry) return
+      const box = entry.contentBoxSize?.[0]
+      apply(box ? box.inlineSize : entry.contentRect.width)
+    })
+    ro.observe(el)
+    return () => ro.disconnect()
+  }, [responsive, stackBelow])
+
+  const virtualize = rows.length > virtualizeThreshold && !stacked
 
   const scrollRef = useRef<HTMLDivElement>(null)
   const rv = useVirtualizer({
@@ -174,82 +218,132 @@ export function VirtualTable<TData>({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [curPage, virtualize])
 
+  // Stack-mode label for a column: explicit meta override, else the string
+  // header, else nothing (value renders label-less, e.g. an actions column).
+  const columnStackLabel = (columnDef: {
+    header?: unknown
+    meta?: {stackLabel?: string; label?: string}
+  }): string => {
+    const meta = columnDef.meta
+    if (typeof meta?.stackLabel === 'string') return meta.stackLabel
+    if (typeof meta?.label === 'string') return meta.label
+    return typeof columnDef.header === 'string' ? columnDef.header : ''
+  }
+
   const renderRow = (
     row: Row<TData>,
     index: number,
     positioned?: ReturnType<typeof styles.rowAbsolute>,
     measureRef?: (node: Element | null) => void,
-  ) => (
-    <html.div
-      key={row.id}
-      ref={measureRef}
-      data-index={index}
-      role="row"
-      aria-label={rowLabel?.(row.original)}
-      onClick={onRowClick ? () => onRowClick(row.original) : undefined}
-      style={[styles.row, Boolean(onRowClick) && styles.rowClickable, positioned]}
-    >
-      {row.getVisibleCells().map((cell) => (
-        <html.div
-          key={cell.id}
-          role="cell"
-          style={[styles.cell, styles.cellFlex(cell.column.getSize())]}
-        >
-          {flexRender(cell.column.columnDef.cell, cell.getContext())}
-        </html.div>
-      ))}
-    </html.div>
-  )
+  ) =>
+    stacked ? (
+      <html.div
+        key={row.id}
+        role="row"
+        aria-label={rowLabel?.(row.original)}
+        onClick={onRowClick ? () => onRowClick(row.original) : undefined}
+        style={[styles.stackRow, Boolean(onRowClick) && styles.rowClickable]}
+      >
+        {row.getVisibleCells().map((cell) => {
+          const lbl = columnStackLabel(cell.column.columnDef)
+          return (
+            <html.div key={cell.id} role="cell" style={styles.stackCell}>
+              {lbl ? <html.span style={styles.stackCellLabel}>{lbl}</html.span> : null}
+              <html.div style={styles.stackCellValue}>
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </html.div>
+            </html.div>
+          )
+        })}
+      </html.div>
+    ) : (
+      <html.div
+        key={row.id}
+        ref={measureRef}
+        data-index={index}
+        role="row"
+        aria-label={rowLabel?.(row.original)}
+        onClick={onRowClick ? () => onRowClick(row.original) : undefined}
+        style={[styles.row, Boolean(onRowClick) && styles.rowClickable, positioned]}
+      >
+        {row.getVisibleCells().map((cell) => (
+          <html.div
+            key={cell.id}
+            role="cell"
+            style={[styles.cell, styles.cellFlex(cell.column.getSize())]}
+          >
+            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+          </html.div>
+        ))}
+      </html.div>
+    )
 
   const label =
     rangeLabel?.(range) ?? (rows.length ? `${range.from}–${range.to} / ${range.total}` : '')
 
   return (
-    <html.div style={styles.wrap}>
+    <html.div ref={wrapRef} style={styles.wrap}>
       <html.div
         ref={scrollRef}
         role="table"
-        style={[styles.scroll, virtualize && styles.scrollMax(maxHeight)]}
+        style={[
+          stacked ? styles.stackScroll : styles.scroll,
+          virtualize && styles.scrollMax(maxHeight),
+        ]}
       >
-        <html.div role="rowgroup" style={styles.head}>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <html.div key={headerGroup.id} role="row" style={styles.headRow}>
-              {headerGroup.headers.map((header) => {
-                const col = header.column
-                const sorted = col.getIsSorted()
-                return (
-                  <html.div
-                    key={header.id}
-                    role="columnheader"
-                    aria-sort={
-                      sorted === 'asc' ? 'ascending' : sorted === 'desc' ? 'descending' : undefined
-                    }
-                    onClick={col.getCanSort() ? col.getToggleSortingHandler() : undefined}
-                    style={[
-                      styles.headCell,
-                      col.getCanSort() && styles.headCellSortable,
-                      styles.cellFlex(header.getSize()),
-                    ]}
-                  >
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(col.columnDef.header, header.getContext())}
-                    {sorted ? (
-                      <html.span style={styles.sortMark}>{sorted === 'asc' ? '↑' : '↓'}</html.span>
-                    ) : null}
-                  </html.div>
-                )
-              })}
-            </html.div>
-          ))}
-        </html.div>
+        {stacked ? null : (
+          <html.div role="rowgroup" style={styles.head}>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <html.div key={headerGroup.id} role="row" style={styles.headRow}>
+                {headerGroup.headers.map((header) => {
+                  const col = header.column
+                  const sorted = col.getIsSorted()
+                  return (
+                    <html.div
+                      key={header.id}
+                      role="columnheader"
+                      aria-sort={
+                        sorted === 'asc'
+                          ? 'ascending'
+                          : sorted === 'desc'
+                            ? 'descending'
+                            : undefined
+                      }
+                      onClick={col.getCanSort() ? col.getToggleSortingHandler() : undefined}
+                      style={[
+                        styles.headCell,
+                        col.getCanSort() && styles.headCellSortable,
+                        styles.cellFlex(header.getSize()),
+                      ]}
+                    >
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(col.columnDef.header, header.getContext())}
+                      {sorted ? (
+                        <html.span style={styles.sortMark}>
+                          {sorted === 'asc' ? '↑' : '↓'}
+                        </html.span>
+                      ) : null}
+                    </html.div>
+                  )
+                })}
+              </html.div>
+            ))}
+          </html.div>
+        )}
 
         {rows.length === 0 ? (
           <html.div style={styles.empty}>{emptyLabel}</html.div>
         ) : (
           <html.div
             role="rowgroup"
-            style={virtualize ? styles.bodyTotal(rv.getTotalSize()) : undefined}
+            style={
+              stacked
+                ? styles.stackBody
+                : virtualize
+                  ? styles.bodyTotal(rv.getTotalSize())
+                  : undefined
+            }
           >
             {virtualize
               ? vItems.map((vi) =>