@multiplatform.one/table 7.34.3 → 7.35.0

package/src/components/DataTable/DataTableRoot.tsx

@@ -20,11 +20,16 @@ import {
 import { Button, Checkbox, Field, useFormField } from "@multiplatform.one/forms";
 import { flexRender } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { ensureFocusVisibleRing, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  ensureFocusVisibleRing,
+  sizeTokenBelow,
+  useResolvedKnobs,
+  Surface,
+} from "@multiplatform.one/theme";
 import React, { useEffect, useRef, useMemo, useCallback, useState } from "react";
 import { AsyncBoundary, EmptyState, Tooltip, useDirection } from "@multiplatform.one/components";
-import type { FontSizeTokens } from "tamagui";
-import { Text, View, isWeb, useMedia } from "tamagui";
+import type { FontSizeTokens, SizeTokens } from "tamagui";
+import { SizableText, Text, View, isWeb, useMedia } from "tamagui";
 import { useTranslation } from "react-i18next";
 import { useDataTable } from "../../hooks/useDataTable";
 import { useDragScroll } from "../../hooks/useDragScroll";
@@ -90,8 +95,6 @@ export interface DataTableRootProps<
 > extends DataTableProps<TData> {
   /** Compound sub-components rendered as children */
   children?: React.ReactNode;
-  /** Structural modifier: compact layout */
-  compact?: boolean;
   /** Structural modifier: disabled state */
   disabled?: boolean;
   /** Structural intent — joins the resolver path (audit 16). */
@@ -164,7 +167,6 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
   renderFilters: _renderFilters,
   className,
   size,
-  compact = false,
   disabled = false,
   accent,
   error,
@@ -183,10 +185,12 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
   const showList = layout === "list";
   const showCards = !showList && (layout === "cards" || (layout === "auto" && sm === false));
   const intent = resolveDataTableIntent({ accent, error, warning, success });
+  // `size` is a token: the toolbar, search, pagination, header filters and
+  // bulk bar render at it through the Surface below; cells one key below.
   const { knobProps, disabledState } = useResolvedKnobs({
     intent,
     component: "DataTable",
-    compact,
+    size,
   });
   const chrome = dataTableChrome(String(knobProps.sizeToken));
   const rowHeightPx = chrome.rowPx;
@@ -269,10 +273,10 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
     }
   }, [selectAllScope, table]);
 
-  const resolvedSize: "sm" | "md" | "lg" =
-    size ?? (knobProps.sizeToken === "$3" ? "sm" : knobProps.sizeToken === "$5" ? "lg" : "md");
-
-  const cellHeight = resolvedSize === "sm" ? "$3" : resolvedSize === "lg" ? "$5" : "$4";
+  const resolvedSize = knobProps.sizeToken as SizeTokens;
+  // Rows keep the table's height; the controls inside a cell sit one key below.
+  const cellHeight = resolvedSize;
+  const cellSize = sizeTokenBelow(resolvedSize);
 
   const headerGroups = table.getHeaderGroups();
   const rowModelRows = table.getRowModel().rows;
@@ -719,7 +723,6 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
     [readOnly, disabled, minRows, data, isFormMode, onDataChange],
   );
 
-  const isCompact = resolvedSize === "sm" || compact;
   const renderCellContent = useCallback(
     (cell: any, rowIndex: number, rowData: TData) => {
       const columnDef = cell.column.columnDef as DataTableColumn;
@@ -779,21 +782,13 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
           columnLabel={typeof columnDef.header === "string" ? columnDef.header : undefined}
           rowIndex={rowIndex}
           rowData={rowData}
-          size={knobProps.sizeToken}
-          compact={isCompact}
+          size={String(cellSize)}
           linkedValue={linkedValue}
           onLinkedChange={onLinkedChange}
         />
       );
     },
-    [
-      handleCellChange,
-      readOnly,
-      disabled,
-      knobProps.sizeToken,
-      knobProps.label.fontSize,
-      isCompact,
-    ],
+    [handleCellChange, readOnly, disabled, cellSize, knobProps.label.fontSize],
   );
 
   const extraColumnsBefore =
@@ -921,7 +916,6 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                   // aria-label rides the role="checkbox" frame itself.
                   "aria-label": deriveSelectRowLabel(row, rowIndex),
                 }}
-                compact={isCompact}
               />
             </Table.Cell>
           )}
@@ -1106,7 +1100,6 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
       handleDeleteRow,
       data.length,
       minRows,
-      isCompact,
       t,
       deriveSelectRowLabel,
       ExpandCaretIcon,
@@ -1151,7 +1144,6 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
         views: state.views,
         activeViewId: state.activeViewId,
         size: knobProps.sizeToken,
-        compact: isCompact,
         isFetching: Boolean(state.isFetching),
       });
     }
@@ -1163,12 +1155,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
         onClearFilters={actions.clearFilters}
         customActions={
           defaultCardToolbar && hasCardSort ? (
-            <DataTableCardSortControl
-              table={table}
-              compact={isCompact}
-              disabled={disabled}
-              contained
-            />
+            <DataTableCardSortControl table={table} disabled={disabled} contained />
           ) : undefined
         }
         activeFilterCount={activeFilterCount}
@@ -1180,7 +1167,6 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
         enableGlobalSearch={enableGlobalSearch}
         enableFiltering={enableFiltering}
         size={knobProps.sizeToken}
-        compact={isCompact}
         isFetching={Boolean(state.isFetching)}
       />
     );
@@ -1201,7 +1187,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
         pagination={state.pagination}
         onPaginationChange={actions.setPagination}
         pageSizeOptions={resolvedPageSizeOptions}
-        compact
+        size={resolvedSize}
       />
     );
   };
@@ -1270,7 +1256,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
           onRetry={state.error ? onRetry : infinite?.retry}
           layout="table"
           errorTitle={t("Couldn't load table")}
-          compact
+          size={resolvedSize}
           aria-label={resolvedAriaLabel}
         />
       );
@@ -1285,7 +1271,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
     }
 
     return (
-      <DataTableContext.Provider size={resolvedSize} compact={isCompact}>
+      <DataTableContext.Provider size={resolvedSize}>
         <DataTableStateContext.Provider value={stateContextValue}>
           <View
             flexDirection="column"
@@ -1323,963 +1309,979 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
               : {})}
             {...props}
           >
-            {/* Toolbar. The width-100% wrapper is the LC-40 carrier for
+            <Surface size={resolvedSize}>
+              {/* Toolbar. The width-100% wrapper is the LC-40 carrier for
                 chrome that has no `disabled` API of its own: under keepLabel
                 the chrome fragment dims the region (interaction is already
                 blocked by the root inert). */}
-            {hasToolbar && (
-              <View width="100%" {...(disabled ? disabledState.chromeKnobProps : {})}>
-                {renderToolbarComponent()}
-              </View>
-            )}
+              {hasToolbar && (
+                <View width="100%" {...(disabled ? disabledState.chromeKnobProps : {})}>
+                  {renderToolbarComponent()}
+                </View>
+              )}
 
-            {/* Active filter chips — visibility surface for ALL filters,
+              {/* Active filter chips — visibility surface for ALL filters,
                 including hidden-column filters (Axiom 6 HONEST STATE) */}
-            {enableFiltering && (
-              <View width="100%" {...(disabled ? disabledState.chromeKnobProps : {})}>
-                <DataTableFilterChips />
-              </View>
-            )}
-
-            {/* Auto selection toolbar (DG-TBL-02) — placement from house bulkBarPlacement */}
-            {enableRowSelection && bulkBarPlacement === "top" ? (
-              <View width="100%" {...(disabled ? disabledState.chromeKnobProps : {})}>
-                <DataTableBulkActions
-                  actions={resolvedBulkActions}
-                  maxVisibleActions={5}
-                  showSelectionCount
-                  placement="top"
-                />
-              </View>
-            ) : null}
+              {enableFiltering && (
+                <View width="100%" {...(disabled ? disabledState.chromeKnobProps : {})}>
+                  <DataTableFilterChips />
+                </View>
+              )}
+
+              {/* Auto selection toolbar (DG-TBL-02) — placement from house bulkBarPlacement */}
+              {enableRowSelection && bulkBarPlacement === "top" ? (
+                <View width="100%" {...(disabled ? disabledState.chromeKnobProps : {})}>
+                  <DataTableBulkActions
+                    actions={resolvedBulkActions}
+                    maxVisibleActions={5}
+                    showSelectionCount
+                    placement="top"
+                  />
+                </View>
+              ) : null}
 
-            {/* Compound sub-components (children) */}
-            {children}
+              {/* Compound sub-components (children) */}
+              {children}
 
-            {/* Card List View (layout="cards" or auto below $sm) */}
-            {showList ? (
-              <DataTableDocumentList
-                tableRows={displayRows}
-                enableRowSelection={enableRowSelection}
-                disabled={disabled}
-                hasActiveFilters={computed.hasActiveFilters}
-                renderCellContent={renderCellContent}
-                compact={isCompact}
-                selectRowLabel={deriveSelectRowLabel}
-                queryInFlight={queryInFlight}
-                {...(rowPressActive ? { getRowPressProps } : {})}
-              />
-            ) : showCards ? (
-              <>
-                {/* Header affordances (sort / per-column filter) live in the
-                    grid headers; the card list restores them here. */}
-                {!defaultCardToolbar && (
-                  <DataTableCardControls
-                    table={table}
-                    enableSorting={enableSorting}
-                    enableFiltering={enableFiltering}
-                    availableColumns={cardFilterColumns}
-                    compact={isCompact}
-                    disabled={disabled}
-                  />
-                )}
-                <DataTableMobileCards
+              {/* Card List View (layout="cards" or auto below $sm) */}
+              {showList ? (
+                <DataTableDocumentList
                   tableRows={displayRows}
                   enableRowSelection={enableRowSelection}
-                  showRowNumbers={showRowNumbers}
-                  showDeleteRow={showDeleteRow}
-                  readOnly={readOnly}
                   disabled={disabled}
-                  dataLength={tableData.length}
-                  minRows={minRows}
                   hasActiveFilters={computed.hasActiveFilters}
                   renderCellContent={renderCellContent}
-                  onDeleteRow={effectiveHandleDeleteRow}
-                  selectAllChecked={selectAllChecked}
-                  selectAllIndeterminate={selectAllIndeterminate}
-                  onToggleSelectAll={toggleSelectAll}
-                  compact={isCompact}
                   selectRowLabel={deriveSelectRowLabel}
                   queryInFlight={queryInFlight}
                   {...(rowPressActive ? { getRowPressProps } : {})}
                 />
-              </>
-            ) : (
-              /* Table View */
-              <View
-                ref={(node: any) => {
-                  if (enableKeyboardNavigation && !isSSR && keyboardNav.containerRef) {
-                    (keyboardNav.containerRef as any).current = node;
+              ) : showCards ? (
+                <>
+                  {/* Header affordances (sort / per-column filter) live in the
+                    grid headers; the card list restores them here. */}
+                  {!defaultCardToolbar && (
+                    <DataTableCardControls
+                      table={table}
+                      enableSorting={enableSorting}
+                      enableFiltering={enableFiltering}
+                      availableColumns={cardFilterColumns}
+                      disabled={disabled}
+                    />
+                  )}
+                  <DataTableMobileCards
+                    tableRows={displayRows}
+                    enableRowSelection={enableRowSelection}
+                    showRowNumbers={showRowNumbers}
+                    showDeleteRow={showDeleteRow}
+                    readOnly={readOnly}
+                    disabled={disabled}
+                    dataLength={tableData.length}
+                    minRows={minRows}
+                    hasActiveFilters={computed.hasActiveFilters}
+                    renderCellContent={renderCellContent}
+                    onDeleteRow={effectiveHandleDeleteRow}
+                    selectAllChecked={selectAllChecked}
+                    selectAllIndeterminate={selectAllIndeterminate}
+                    onToggleSelectAll={toggleSelectAll}
+                    selectRowLabel={deriveSelectRowLabel}
+                    queryInFlight={queryInFlight}
+                    {...(rowPressActive ? { getRowPressProps } : {})}
+                  />
+                </>
+              ) : (
+                /* Table View */
+                <View
+                  ref={(node: any) => {
+                    if (enableKeyboardNavigation && !isSSR && keyboardNav.containerRef) {
+                      (keyboardNav.containerRef as any).current = node;
+                    }
+                    if (scrollContainerRef) {
+                      (scrollContainerRef as any).current = node;
+                    }
+                  }}
+                  flexDirection="column"
+                  width="100%"
+                  // Grow 0 / shrink 1 / basis auto: the grid frame hugs its
+                  // rows and only compresses (into internal scroll) when the
+                  // parent is shorter. flexGrow 1 stretched the frame to fill
+                  // tall parents, painting a dead zone between the last row
+                  // and the frame's bottom border on short pages (the frame
+                  // claimed data area that held no data — Axiom 6/LC-37).
+                  flexGrow={0}
+                  flexShrink={1}
+                  flexBasis="auto"
+                  minHeight={0}
+                  // This View (the drag-scroll ref) is the horizontal scroll
+                  // container; the table inside floors at max-content so it
+                  // overflows here instead of panning the whole page. With
+                  // pinning it is the ONE scrollport sticky cells track.
+                  {...(hScroll ? { overflowX: "auto" as any } : {})}
+                  aria-label={withInterp(t("{{label}} content", { label: resolvedAriaLabel }), {
+                    label: resolvedAriaLabel,
+                  })}
+                  tabIndex={enableKeyboardNavigation && !isSSR ? 0 : undefined}
+                  {...({ "data-table-grid": "true" } as any)}
+                  onKeyDown={enableKeyboardNavigation && !isSSR ? handleGridKeyDown : undefined}
+                  onPress={
+                    enableKeyboardNavigation && !isSSR
+                      ? keyboardNav.handleContainerClick
+                      : undefined
                   }
-                  if (scrollContainerRef) {
-                    (scrollContainerRef as any).current = node;
+                  onBlur={
+                    enableKeyboardNavigation && !isSSR ? keyboardNav.handleContainerBlur : undefined
                   }
-                }}
-                flexDirection="column"
-                width="100%"
-                // Grow 0 / shrink 1 / basis auto: the grid frame hugs its
-                // rows and only compresses (into internal scroll) when the
-                // parent is shorter. flexGrow 1 stretched the frame to fill
-                // tall parents, painting a dead zone between the last row
-                // and the frame's bottom border on short pages (the frame
-                // claimed data area that held no data — Axiom 6/LC-37).
-                flexGrow={0}
-                flexShrink={1}
-                flexBasis="auto"
-                minHeight={0}
-                // This View (the drag-scroll ref) is the horizontal scroll
-                // container; the table inside floors at max-content so it
-                // overflows here instead of panning the whole page. With
-                // pinning it is the ONE scrollport sticky cells track.
-                {...(hScroll ? { overflowX: "auto" as any } : {})}
-                aria-label={withInterp(t("{{label}} content", { label: resolvedAriaLabel }), {
-                  label: resolvedAriaLabel,
-                })}
-                tabIndex={enableKeyboardNavigation && !isSSR ? 0 : undefined}
-                {...({ "data-table-grid": "true" } as any)}
-                onKeyDown={enableKeyboardNavigation && !isSSR ? handleGridKeyDown : undefined}
-                onPress={
-                  enableKeyboardNavigation && !isSSR ? keyboardNav.handleContainerClick : undefined
-                }
-                onBlur={
-                  enableKeyboardNavigation && !isSSR ? keyboardNav.handleContainerBlur : undefined
-                }
-              >
-                <Table
-                  displayMode={displayMode}
-                  alignCells={{ x: "start", y: "center" }}
-                  alignHeaderCells={{ x: "start", y: "center" }}
-                  cellHeight={cellHeight}
-                  borderTopLeftRadius={hasToolbar ? 0 : knobProps.borderRadiusOuter.borderRadius}
-                  borderTopRightRadius={hasToolbar ? 0 : knobProps.borderRadiusOuter.borderRadius}
-                  borderBottomLeftRadius={knobProps.borderRadiusOuter.borderRadius}
-                  borderBottomRightRadius={knobProps.borderRadiusOuter.borderRadius}
-                  marginBottom={0}
-                  aria-label={resolvedAriaLabel}
-                  aria-rowcount={computed.totalPages * state.pagination.pageSize}
-                  aria-colcount={
-                    table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter
-                  }
-                  width="100%"
-                  {...(hScroll ? { style: { minWidth: "max-content" } } : {})}
-                  // Pinning: the Table must NOT be a scroll container (its
-                  // overflow:hidden base makes it one) or sticky cells stick
-                  // to it instead of the scrolling content View. Content
-                  // fits the max-content box, so nothing needs the clip.
-                  {...(hScroll && enableColumnPinning ? { overflow: "visible" as any } : {})}
-                  // Roving-focus DOM scope for onRowPress arrow keys (LC-49).
-                  {...(rowPressActive ? ({ "data-row-press-scope": "true" } as any) : {})}
                 >
-                  {/* Table Header */}
-                  <Table.Head zIndex="$1" aria-label={t("Table headers")}>
-                    {headerGroups.map((headerGroup: any) => {
-                      rowCounter.current++;
-                      return (
-                        <Table.Row
-                          key={headerGroup.id}
-                          {...({
-                            background: true,
-                            backgroundColor: "$color2",
-                            rowLocation:
-                              rowCounter.current === 0
-                                ? "first"
-                                : rowCounter.current === allRowsLength - 1
-                                  ? "last"
-                                  : "middle",
-                            borderTopRightRadius: hasToolbar
-                              ? "$0"
-                              : knobProps.borderRadiusOuter.borderRadius,
-                            borderTopLeftRadius: hasToolbar
-                              ? "$0"
-                              : knobProps.borderRadiusOuter.borderRadius,
-                            borderBottomLeftRadius: "$0",
-                            borderBottomRightRadius: "$0",
-                            "aria-rowindex": rowCounter.current,
-                          } as any)}
-                        >
-                          {enableRowSelection && (
-                            <Table.HeaderCell
-                              cellWidth={selectionColWidth}
-                              cellHeight={cellHeight as any}
-                              cellLocation="first"
-                              justifyContent="center"
-                            >
-                              <Checkbox
-                                checked={
-                                  selectAllIndeterminate ? "indeterminate" : selectAllChecked
-                                }
-                                disabled={disabled}
-                                onChange={(checked) => {
-                                  if (disabled || checked === "indeterminate") return;
-                                  const shouldSelect = checked === true;
-                                  const isAll =
-                                    selectAllScope === "filtered"
-                                      ? table.getIsAllRowsSelected()
-                                      : table.getIsAllPageRowsSelected();
-                                  if (shouldSelect !== isAll) toggleSelectAll();
-                                }}
-                                checkboxProps={{
-                                  "aria-label":
-                                    selectAllScope === "filtered"
-                                      ? t("Select all matching rows")
-                                      : t("Select all rows on page"),
-                                }}
-                                compact={isCompact}
-                              />
-                            </Table.HeaderCell>
-                          )}
-
-                          {showRowNumbers && (
-                            <Table.HeaderCell
-                              cellWidth={chrome.rowNumberCol}
-                              cellHeight={cellHeight as any}
-                              cellLocation={enableRowSelection ? "middle" : "first"}
-                            >
-                              <Text fontSize={knobProps.sizeToken} fontWeight="600">
-                                #
-                              </Text>
-                            </Table.HeaderCell>
-                          )}
-
-                          {enableRowExpansion && (
-                            <Table.HeaderCell
-                              cellWidth={chrome.expandCol}
-                              cellHeight={cellHeight as any}
-                              cellLocation={
-                                enableRowSelection || showRowNumbers ? "middle" : "first"
-                              }
-                            >
-                              <View width={14} />
-                            </Table.HeaderCell>
-                          )}
+                  <Table
+                    size={resolvedSize}
+                    cellSize={cellSize}
+                    displayMode={displayMode}
+                    alignCells={{ x: "start", y: "center" }}
+                    alignHeaderCells={{ x: "start", y: "center" }}
+                    cellHeight={cellHeight}
+                    borderTopLeftRadius={hasToolbar ? 0 : knobProps.borderRadiusOuter.borderRadius}
+                    borderTopRightRadius={hasToolbar ? 0 : knobProps.borderRadiusOuter.borderRadius}
+                    borderBottomLeftRadius={knobProps.borderRadiusOuter.borderRadius}
+                    borderBottomRightRadius={knobProps.borderRadiusOuter.borderRadius}
+                    marginBottom={0}
+                    aria-label={resolvedAriaLabel}
+                    aria-rowcount={computed.totalPages * state.pagination.pageSize}
+                    aria-colcount={
+                      table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter
+                    }
+                    width="100%"
+                    {...(hScroll ? { style: { minWidth: "max-content" } } : {})}
+                    // Pinning: the Table must NOT be a scroll container (its
+                    // overflow:hidden base makes it one) or sticky cells stick
+                    // to it instead of the scrolling content View. Content
+                    // fits the max-content box, so nothing needs the clip.
+                    {...(hScroll && enableColumnPinning ? { overflow: "visible" as any } : {})}
+                    // Roving-focus DOM scope for onRowPress arrow keys (LC-49).
+                    {...(rowPressActive ? ({ "data-row-press-scope": "true" } as any) : {})}
+                  >
+                    {/* Table Header */}
+                    <Table.Head zIndex="$1" aria-label={t("Table headers")}>
+                      {headerGroups.map((headerGroup: any) => {
+                        rowCounter.current++;
+                        return (
+                          <Table.Row
+                            key={headerGroup.id}
+                            {...({
+                              background: true,
+                              backgroundColor: "$color2",
+                              rowLocation:
+                                rowCounter.current === 0
+                                  ? "first"
+                                  : rowCounter.current === allRowsLength - 1
+                                    ? "last"
+                                    : "middle",
+                              borderTopRightRadius: hasToolbar
+                                ? "$0"
+                                : knobProps.borderRadiusOuter.borderRadius,
+                              borderTopLeftRadius: hasToolbar
+                                ? "$0"
+                                : knobProps.borderRadiusOuter.borderRadius,
+                              borderBottomLeftRadius: "$0",
+                              borderBottomRightRadius: "$0",
+                              "aria-rowindex": rowCounter.current,
+                            } as any)}
+                          >
+                            {enableRowSelection && (
+                              <Table.HeaderCell
+                                cellWidth={selectionColWidth}
+                                cellHeight={cellHeight as any}
+                                cellLocation="first"
+                                justifyContent="center"
+                              >
+                                <Checkbox
+                                  checked={
+                                    selectAllIndeterminate ? "indeterminate" : selectAllChecked
+                                  }
+                                  disabled={disabled}
+                                  onChange={(checked) => {
+                                    if (disabled || checked === "indeterminate") return;
+                                    const shouldSelect = checked === true;
+                                    const isAll =
+                                      selectAllScope === "filtered"
+                                        ? table.getIsAllRowsSelected()
+                                        : table.getIsAllPageRowsSelected();
+                                    if (shouldSelect !== isAll) toggleSelectAll();
+                                  }}
+                                  checkboxProps={{
+                                    "aria-label":
+                                      selectAllScope === "filtered"
+                                        ? t("Select all matching rows")
+                                        : t("Select all rows on page"),
+                                  }}
+                                />
+                              </Table.HeaderCell>
+                            )}
 
-                          {headerGroup.headers.map((header: any, headerIndex: number) => {
-                            const isSortableHeader = header.column.getCanSort();
-                            const sortDirection = header.column.getIsSorted();
-                            const canResize = enableColumnResizing && header.column.getCanResize();
-                            const resizeHandler = canResize ? header.getResizeHandler() : undefined;
-                            const colSize = header.getSize();
-                            const colMinSize = header.column.columnDef.minSize ?? 0;
-                            const colMaxSize =
-                              header.column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER;
-                            const stickyStyle = getStickyStyle(header.column.id);
-                            const columnDef = header.column.columnDef as DataTableColumn;
-                            const columnAlign = resolveColumnAlign({
-                              ...columnDef,
-                              id: header.column.id,
-                            });
-                            const headerJustify = alignToFlex(columnAlign);
-                            const isRightAligned = columnAlign === "right";
-
-                            const isFirstHeaderCell =
-                              headerIndex === 0 &&
-                              !enableRowSelection &&
-                              !showRowNumbers &&
-                              !enableRowExpansion;
-                            const isLastHeaderCell =
-                              headerIndex === headerGroup.headers.length - 1 &&
-                              !(showDeleteRow && !readOnly);
-                            const headerCellLocation = isFirstHeaderCell
-                              ? "first"
-                              : isLastHeaderCell
-                                ? "last"
-                                : "middle";
+                            {showRowNumbers && (
+                              <Table.HeaderCell
+                                cellWidth={chrome.rowNumberCol}
+                                cellHeight={cellHeight as any}
+                                cellLocation={enableRowSelection ? "middle" : "first"}
+                              >
+                                <Text fontSize={knobProps.sizeToken} fontWeight="600">
+                                  #
+                                </Text>
+                              </Table.HeaderCell>
+                            )}
 
-                            return (
+                            {enableRowExpansion && (
                               <Table.HeaderCell
-                                key={header.id}
-                                id={`${header.column.id}-header`}
-                                onPress={
-                                  isSortableHeader && !disabled
-                                    ? header.column.getToggleSortingHandler()
-                                    : undefined
-                                }
-                                // Keyboard operability (WCAG 2.1.1): the sort
-                                // control must not be mouse-only — Tab reaches
-                                // sortable headers, Enter/Space toggles (Shift
-                                // held = multi-sort, same as shift+click).
-                                // Disabled tables drop the handlers (the root
-                                // inert already blocks focus on web).
-                                {...(isSortableHeader && !disabled && isWeb
-                                  ? ({
-                                      tabIndex: 0,
-                                      onKeyDown: (e: React.KeyboardEvent) => {
-                                        if (
-                                          e.key === "Enter" ||
-                                          e.key === " " ||
-                                          e.key === "Spacebar"
-                                        ) {
-                                          e.preventDefault();
-                                          header.column.getToggleSortingHandler()?.(e);
-                                        }
-                                      },
-                                      focusVisibleStyle: ensureFocusVisibleRing({
-                                        outlineOffset: -2,
-                                      }),
-                                    } as any)
-                                  : {})}
-                                cursor={
-                                  disabled
-                                    ? "not-allowed"
-                                    : isSortableHeader
-                                      ? "pointer"
-                                      : "default"
-                                }
-                                position="relative"
-                                cellLocation={headerCellLocation}
-                                justifyContent={headerJustify}
-                                data-align={columnAlign}
-                                aria-sort={
-                                  isSortableHeader
-                                    ? sortDirection === "asc"
-                                      ? "ascending"
-                                      : sortDirection === "desc"
-                                        ? "descending"
-                                        : "none"
-                                    : undefined
+                                cellWidth={chrome.expandCol}
+                                cellHeight={cellHeight as any}
+                                cellLocation={
+                                  enableRowSelection || showRowNumbers ? "middle" : "first"
                                 }
-                                {...(dnd && !disabled
-                                  ? ({
-                                      draggable: true,
-                                      onDragStart: (e: React.DragEvent<HTMLElement>) =>
-                                        dnd.onDragStart(e, header.column.id),
-                                      onDragOver: dnd.onDragOver,
-                                      onDrop: (e: React.DragEvent<HTMLElement>) =>
-                                        dnd.onDrop(e, header.column.id),
-                                    } as any)
-                                  : {})}
-                                {...cellFlexProps}
-                                {...getColSizeProps(header.column)}
-                                {...(isWeb && stickyStyle
-                                  ? {
-                                      style: {
-                                        position: "sticky",
-                                        ...("insetInlineStart" in stickyStyle && {
-                                          insetInlineStart: stickyStyle.insetInlineStart,
-                                        }),
-                                        ...("insetInlineEnd" in stickyStyle && {
-                                          insetInlineEnd: (stickyStyle as any).insetInlineEnd,
-                                        }),
-                                        zIndex: 2,
-                                        backgroundColor: "var(--color2)",
-                                      } as React.CSSProperties,
-                                    }
-                                  : {})}
                               >
-                                {/* LC-10 (MPO-336): only the label yields
+                                <View width={14} />
+                              </Table.HeaderCell>
+                            )}
+
+                            {headerGroup.headers.map((header: any, headerIndex: number) => {
+                              const isSortableHeader = header.column.getCanSort();
+                              const sortDirection = header.column.getIsSorted();
+                              const canResize =
+                                enableColumnResizing && header.column.getCanResize();
+                              const resizeHandler = canResize
+                                ? header.getResizeHandler()
+                                : undefined;
+                              const colSize = header.getSize();
+                              const colMinSize = header.column.columnDef.minSize ?? 0;
+                              const colMaxSize =
+                                header.column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER;
+                              const stickyStyle = getStickyStyle(header.column.id);
+                              const columnDef = header.column.columnDef as DataTableColumn;
+                              const columnAlign = resolveColumnAlign({
+                                ...columnDef,
+                                id: header.column.id,
+                              });
+                              const headerJustify = alignToFlex(columnAlign);
+                              const isRightAligned = columnAlign === "right";
+
+                              const isFirstHeaderCell =
+                                headerIndex === 0 &&
+                                !enableRowSelection &&
+                                !showRowNumbers &&
+                                !enableRowExpansion;
+                              const isLastHeaderCell =
+                                headerIndex === headerGroup.headers.length - 1 &&
+                                !(showDeleteRow && !readOnly);
+                              const headerCellLocation = isFirstHeaderCell
+                                ? "first"
+                                : isLastHeaderCell
+                                  ? "last"
+                                  : "middle";
+
+                              return (
+                                <Table.HeaderCell
+                                  key={header.id}
+                                  id={`${header.column.id}-header`}
+                                  onPress={
+                                    isSortableHeader && !disabled
+                                      ? header.column.getToggleSortingHandler()
+                                      : undefined
+                                  }
+                                  // Keyboard operability (WCAG 2.1.1): the sort
+                                  // control must not be mouse-only — Tab reaches
+                                  // sortable headers, Enter/Space toggles (Shift
+                                  // held = multi-sort, same as shift+click).
+                                  // Disabled tables drop the handlers (the root
+                                  // inert already blocks focus on web).
+                                  {...(isSortableHeader && !disabled && isWeb
+                                    ? ({
+                                        tabIndex: 0,
+                                        onKeyDown: (e: React.KeyboardEvent) => {
+                                          if (
+                                            e.key === "Enter" ||
+                                            e.key === " " ||
+                                            e.key === "Spacebar"
+                                          ) {
+                                            e.preventDefault();
+                                            header.column.getToggleSortingHandler()?.(e);
+                                          }
+                                        },
+                                        focusVisibleStyle: ensureFocusVisibleRing({
+                                          outlineOffset: -2,
+                                        }),
+                                      } as any)
+                                    : {})}
+                                  cursor={
+                                    disabled
+                                      ? "not-allowed"
+                                      : isSortableHeader
+                                        ? "pointer"
+                                        : "default"
+                                  }
+                                  position="relative"
+                                  cellLocation={headerCellLocation}
+                                  justifyContent={headerJustify}
+                                  data-align={columnAlign}
+                                  aria-sort={
+                                    isSortableHeader
+                                      ? sortDirection === "asc"
+                                        ? "ascending"
+                                        : sortDirection === "desc"
+                                          ? "descending"
+                                          : "none"
+                                      : undefined
+                                  }
+                                  {...(dnd && !disabled
+                                    ? ({
+                                        draggable: true,
+                                        onDragStart: (e: React.DragEvent<HTMLElement>) =>
+                                          dnd.onDragStart(e, header.column.id),
+                                        onDragOver: dnd.onDragOver,
+                                        onDrop: (e: React.DragEvent<HTMLElement>) =>
+                                          dnd.onDrop(e, header.column.id),
+                                      } as any)
+                                    : {})}
+                                  {...cellFlexProps}
+                                  {...getColSizeProps(header.column)}
+                                  {...(isWeb && stickyStyle
+                                    ? {
+                                        style: {
+                                          position: "sticky",
+                                          ...("insetInlineStart" in stickyStyle && {
+                                            insetInlineStart: stickyStyle.insetInlineStart,
+                                          }),
+                                          ...("insetInlineEnd" in stickyStyle && {
+                                            insetInlineEnd: (stickyStyle as any).insetInlineEnd,
+                                          }),
+                                          zIndex: 2,
+                                          backgroundColor: "var(--color2)",
+                                        } as React.CSSProperties,
+                                      }
+                                    : {})}
+                                >
+                                  {/* LC-10 (MPO-336): only the label yields
                                     to a narrow column; the glyphs keep their
                                     size or they paint into the next one. The
                                     filter cluster wraps under the label first,
                                     so the label keeps the column's width. */}
-                                <View
-                                  flexDirection="row"
-                                  flexWrap="wrap"
-                                  gap="$2"
-                                  alignItems="center"
-                                  justifyContent={isRightAligned ? "flex-end" : "space-between"}
-                                  flex={1}
-                                  minWidth={0}
-                                >
                                   <View
                                     flexDirection="row"
+                                    flexWrap="wrap"
                                     gap="$2"
                                     alignItems="center"
-                                    flexGrow={isRightAligned ? 0 : 1}
-                                    flexShrink={1}
-                                    flexBasis="auto"
+                                    justifyContent={isRightAligned ? "flex-end" : "space-between"}
+                                    flex={1}
                                     minWidth={0}
-                                    justifyContent={isRightAligned ? "flex-end" : undefined}
                                   >
-                                    <Text
-                                      fontSize={knobProps.sizeToken}
-                                      userSelect="none"
+                                    <View
+                                      flexDirection="row"
+                                      gap="$2"
+                                      alignItems="center"
+                                      flexGrow={isRightAligned ? 0 : 1}
                                       flexShrink={1}
+                                      flexBasis="auto"
                                       minWidth={0}
-                                      textAlign={isRightAligned ? "right" : undefined}
-                                      data-header-label=""
-                                      {...(isWeb ? { style: { overflowWrap: "anywhere" } } : {})}
+                                      justifyContent={isRightAligned ? "flex-end" : undefined}
                                     >
-                                      {header.isPlaceholder
-                                        ? null
-                                        : flexRender(
-                                            header.column.columnDef.header,
-                                            header.getContext(),
-                                          )}
-                                    </Text>
-                                    {isSortableHeader && (
-                                      <Tooltip
-                                        content={
-                                          sortDirection === "asc"
-                                            ? t("Sorted ascending (click to sort descending)")
-                                            : sortDirection === "desc"
-                                              ? t("Sorted descending (click to clear)")
-                                              : t("Click to sort (Shift+click for multi-sort)")
-                                        }
+                                      <Text
+                                        fontSize={knobProps.sizeToken}
+                                        userSelect="none"
+                                        flexShrink={1}
+                                        minWidth={0}
+                                        textAlign={isRightAligned ? "right" : undefined}
+                                        data-header-label=""
+                                        {...(isWeb ? { style: { overflowWrap: "anywhere" } } : {})}
                                       >
-                                        <View aria-hidden={true} role="presentation" flexShrink={0}>
-                                          {sortDirection === "asc" && (
-                                            <CaretDownIcon
-                                              size={chrome.iconPx}
-                                              color="var(--color11)"
-                                            />
-                                          )}
-                                          {sortDirection === "desc" && (
-                                            <CaretDownIcon
-                                              size={chrome.iconPx}
-                                              color="var(--color11)"
-                                              style={{ transform: "rotate(180deg)" }}
-                                            />
-                                          )}
-                                          {sortDirection === false && (
-                                            <CaretUpDownIcon
-                                              size={chrome.iconPx}
-                                              color="var(--color11)"
-                                            />
+                                        {header.isPlaceholder
+                                          ? null
+                                          : flexRender(
+                                              header.column.columnDef.header,
+                                              header.getContext(),
+                                            )}
+                                      </Text>
+                                      {isSortableHeader && (
+                                        <Tooltip
+                                          content={
+                                            sortDirection === "asc"
+                                              ? t("Sorted ascending (click to sort descending)")
+                                              : sortDirection === "desc"
+                                                ? t("Sorted descending (click to clear)")
+                                                : t("Click to sort (Shift+click for multi-sort)")
+                                          }
+                                        >
+                                          <View
+                                            aria-hidden={true}
+                                            role="presentation"
+                                            flexShrink={0}
+                                          >
+                                            {sortDirection === "asc" && (
+                                              <CaretDownIcon
+                                                size={chrome.iconPx}
+                                                color="var(--color11)"
+                                              />
+                                            )}
+                                            {sortDirection === "desc" && (
+                                              <CaretDownIcon
+                                                size={chrome.iconPx}
+                                                color="var(--color11)"
+                                                style={{ transform: "rotate(180deg)" }}
+                                              />
+                                            )}
+                                            {sortDirection === false && (
+                                              <CaretUpDownIcon
+                                                size={chrome.iconPx}
+                                                color="var(--color11)"
+                                              />
+                                            )}
+                                          </View>
+                                        </Tooltip>
+                                      )}
+                                    </View>
+                                    <View
+                                      flexDirection="row"
+                                      gap="$1"
+                                      alignItems="center"
+                                      flexShrink={0}
+                                    >
+                                      {enableFiltering && header.column.getCanFilter() && (
+                                        <ColumnHeaderFilter
+                                          columnId={header.column.id}
+                                          columnLabel={
+                                            typeof header.column.columnDef.header === "string"
+                                              ? header.column.columnDef.header
+                                              : header.column.id
+                                          }
+                                          columnType={mapFieldToFilterType(
+                                            getColumnField(
+                                              header.column.columnDef as DataTableColumn,
+                                            ),
                                           )}
-                                        </View>
-                                      </Tooltip>
-                                    )}
-                                  </View>
-                                  <View
-                                    flexDirection="row"
-                                    gap="$1"
-                                    alignItems="center"
-                                    flexShrink={0}
-                                  >
-                                    {enableFiltering && header.column.getCanFilter() && (
-                                      <ColumnHeaderFilter
-                                        columnId={header.column.id}
-                                        columnLabel={
-                                          typeof header.column.columnDef.header === "string"
-                                            ? header.column.columnDef.header
-                                            : header.column.id
-                                        }
-                                        columnType={mapFieldToFilterType(
-                                          getColumnField(
-                                            header.column.columnDef as DataTableColumn,
-                                          ),
-                                        )}
-                                        filterValue={header.column.getFilterValue()}
-                                        onFilterChange={(value) =>
-                                          header.column.setFilterValue(value)
-                                        }
-                                        isFiltered={header.column.getIsFiltered()}
-                                        options={
-                                          (header.column.columnDef as any).fieldProps?.options
-                                        }
-                                      />
-                                    )}
-                                    {pinning && enableColumnPinning && (
-                                      /* One compact cycle control per header
+                                          filterValue={header.column.getFilterValue()}
+                                          onFilterChange={(value) =>
+                                            header.column.setFilterValue(value)
+                                          }
+                                          isFiltered={header.column.getIsFiltered()}
+                                          options={
+                                            (header.column.columnDef as any).fieldProps?.options
+                                          }
+                                        />
+                                      )}
+                                      {pinning && enableColumnPinning && (
+                                        /* One compact cycle control per header
                                          (left → right → unpin) — two full
                                          buttons crowded the header (owner). */
-                                      <pinning.PinButton columnId={header.column.id} />
-                                    )}
+                                        <pinning.PinButton columnId={header.column.id} />
+                                      )}
+                                    </View>
                                   </View>
-                                </View>
-                                {canResize && resizeHandler && (
-                                  <View
-                                    position="absolute"
-                                    right={-4}
-                                    top={0}
-                                    height={2000}
-                                    width={8}
-                                    cursor="col-resize"
-                                    onMouseDown={resizeHandler as any}
-                                    onTouchStart={resizeHandler as any}
-                                    role="separator"
-                                    aria-valuenow={colSize}
-                                    aria-valuemin={colMinSize}
-                                    aria-valuemax={colMaxSize}
-                                    aria-label={withInterp(
-                                      t("Resize {{column}} column", {
-                                        column: header.column.columnDef.header || header.column.id,
-                                      }),
-                                      {
-                                        column: header.column.columnDef.header || header.column.id,
-                                      },
-                                    )}
-                                    style={{ touchAction: "none" }}
-                                    zIndex={10}
-                                  />
-                                )}
-                              </Table.HeaderCell>
-                            );
-                          })}
+                                  {canResize && resizeHandler && (
+                                    <View
+                                      position="absolute"
+                                      right={-4}
+                                      top={0}
+                                      height={2000}
+                                      width={8}
+                                      cursor="col-resize"
+                                      onMouseDown={resizeHandler as any}
+                                      onTouchStart={resizeHandler as any}
+                                      role="separator"
+                                      aria-valuenow={colSize}
+                                      aria-valuemin={colMinSize}
+                                      aria-valuemax={colMaxSize}
+                                      aria-label={withInterp(
+                                        t("Resize {{column}} column", {
+                                          column:
+                                            header.column.columnDef.header || header.column.id,
+                                        }),
+                                        {
+                                          column:
+                                            header.column.columnDef.header || header.column.id,
+                                        },
+                                      )}
+                                      style={{ touchAction: "none" }}
+                                      zIndex={10}
+                                    />
+                                  )}
+                                </Table.HeaderCell>
+                              );
+                            })}
 
-                          {showDeleteRow && !readOnly && (
-                            <Table.HeaderCell
-                              cellWidth={chrome.deleteCol}
-                              cellHeight={cellHeight as any}
-                              cellLocation="last"
-                            />
-                          )}
+                            {showDeleteRow && !readOnly && (
+                              <Table.HeaderCell
+                                cellWidth={chrome.deleteCol}
+                                cellHeight={cellHeight as any}
+                                cellLocation="last"
+                              />
+                            )}
+                          </Table.Row>
+                        );
+                      })}
+                    </Table.Head>
+
+                    {/* Table Body */}
+                    <Table.Body
+                      // Virtualized mode hosts a div rowgroup (DataTableVirtualized)
+                      // inside a tbody>tr>td bridge; presentation-ing the bridge
+                      // keeps the AT grid tree clean: table > rowgroup(thead) +
+                      // rowgroup(virtual rows) with no cell-wrapping-rowgroup
+                      // noise. aria-label is prohibited on presentation roles.
+                      role={isVirtualized ? "presentation" : "rowgroup"}
+                      aria-label={isVirtualized ? undefined : t("Table data")}
+                      // Pinning: the flex-variant overflowY:auto computes
+                      // overflow-x:auto, making the body its own horizontal
+                      // scroller — headers (outside it) then never move with
+                      // the columns. Visible keeps the sticky chain clean so
+                      // the content View is the one scrollport.
+                      {...(hScroll && enableColumnPinning
+                        ? { overflowY: "visible" as any, overflowX: "visible" as any }
+                        : {})}
+                      ref={(node: any) => {
+                        tableBodyRef.current = node ?? null;
+                      }}
+                    >
+                      {displayRows.length === 0 ? (
+                        <Table.Row>
+                          <Table.Cell>
+                            {isRefetching ? null : (
+                              <EmptyState
+                                size={resolvedSize}
+                                aria-live="polite"
+                                title={
+                                  computed.hasActiveFilters
+                                    ? t("No results found")
+                                    : t("No data available")
+                                }
+                              />
+                            )}
+                          </Table.Cell>
                         </Table.Row>
-                      );
-                    })}
-                  </Table.Head>
-
-                  {/* Table Body */}
-                  <Table.Body
-                    // Virtualized mode hosts a div rowgroup (DataTableVirtualized)
-                    // inside a tbody>tr>td bridge; presentation-ing the bridge
-                    // keeps the AT grid tree clean: table > rowgroup(thead) +
-                    // rowgroup(virtual rows) with no cell-wrapping-rowgroup
-                    // noise. aria-label is prohibited on presentation roles.
-                    role={isVirtualized ? "presentation" : "rowgroup"}
-                    aria-label={isVirtualized ? undefined : t("Table data")}
-                    // Pinning: the flex-variant overflowY:auto computes
-                    // overflow-x:auto, making the body its own horizontal
-                    // scroller — headers (outside it) then never move with
-                    // the columns. Visible keeps the sticky chain clean so
-                    // the content View is the one scrollport.
-                    {...(hScroll && enableColumnPinning
-                      ? { overflowY: "visible" as any, overflowX: "visible" as any }
-                      : {})}
-                    ref={(node: any) => {
-                      tableBodyRef.current = node ?? null;
-                    }}
-                  >
-                    {displayRows.length === 0 ? (
-                      <Table.Row>
-                        <Table.Cell>
-                          {isRefetching ? null : (
-                            <EmptyState
-                              compact
-                              aria-live="polite"
-                              title={
-                                computed.hasActiveFilters
-                                  ? t("No results found")
-                                  : t("No data available")
-                              }
+                      ) : isVirtualized ? (
+                        <Table.Row role="presentation">
+                          <Table.Cell
+                            role="presentation"
+                            padding={0}
+                            // In the default flex displayMode colSpan is inert
+                            // and the context default gives cells a fixed token
+                            // width — the virtualized body must fill the row
+                            // explicitly or it collapses to that token. (In the
+                            // real-<table> displayMode the colSpan attribute
+                            // now genuinely spans.)
+                            cellWidth="auto"
+                            style={
+                              {
+                                display: "block",
+                                overflow: "hidden",
+                                width: "100%",
+                                minWidth: 0,
+                              } as any
+                            }
+                            {...({
+                              colSpan:
+                                table.getVisibleLeafColumns().length +
+                                extraColumnsBefore +
+                                extraColumnsAfter,
+                            } as any)}
+                          >
+                            <DataTableVirtualized
+                              virtualItems={virtualItems}
+                              totalSize={totalSize}
+                              bodyScrollRef={bodyScrollRef}
+                              virtualizationHeight={virtualizationHeight}
+                              tableRows={displayRows}
+                              headerGroups={headerGroups}
+                              showRowNumbers={showRowNumbers}
+                              enableRowExpansion={enableRowExpansion}
+                              showDeleteRow={showDeleteRow}
+                              readOnly={readOnly}
+                              enableKeyboardNavigation={enableKeyboardNavigation}
+                              keyboardNav={keyboardNav}
+                              getColSizeProps={getColSizeProps}
+                              renderRowContent={renderRowContent}
+                              extraColumnsBefore={extraColumnsBefore}
+                              extraColumnsAfter={extraColumnsAfter}
+                              table={table}
+                              hasInfiniteTail={hasInfiniteTail}
+                              rowHeightPx={rowHeightPx}
+                              tableZebraOn={tableZebraOn}
+                              {...(rowPressActive ? { getRowPressProps } : {})}
                             />
-                          )}
-                        </Table.Cell>
-                      </Table.Row>
-                    ) : isVirtualized ? (
-                      <Table.Row role="presentation">
-                        <Table.Cell
-                          role="presentation"
-                          padding={0}
-                          // In the default flex displayMode colSpan is inert
-                          // and the context default gives cells a fixed token
-                          // width — the virtualized body must fill the row
-                          // explicitly or it collapses to that token. (In the
-                          // real-<table> displayMode the colSpan attribute
-                          // now genuinely spans.)
-                          cellWidth="auto"
-                          style={
-                            {
-                              display: "block",
-                              overflow: "hidden",
-                              width: "100%",
-                              minWidth: 0,
-                            } as any
-                          }
-                          {...({
-                            colSpan:
-                              table.getVisibleLeafColumns().length +
-                              extraColumnsBefore +
-                              extraColumnsAfter,
-                          } as any)}
-                        >
-                          <DataTableVirtualized
-                            virtualItems={virtualItems}
-                            totalSize={totalSize}
-                            bodyScrollRef={bodyScrollRef}
-                            virtualizationHeight={virtualizationHeight}
-                            tableRows={displayRows}
-                            headerGroups={headerGroups}
-                            showRowNumbers={showRowNumbers}
-                            enableRowExpansion={enableRowExpansion}
-                            showDeleteRow={showDeleteRow}
-                            readOnly={readOnly}
-                            enableKeyboardNavigation={enableKeyboardNavigation}
-                            keyboardNav={keyboardNav}
-                            getColSizeProps={getColSizeProps}
-                            renderRowContent={renderRowContent}
-                            extraColumnsBefore={extraColumnsBefore}
-                            extraColumnsAfter={extraColumnsAfter}
-                            table={table}
-                            hasInfiniteTail={hasInfiniteTail}
-                            rowHeightPx={rowHeightPx}
-                            tableZebraOn={tableZebraOn}
-                            {...(rowPressActive ? { getRowPressProps } : {})}
-                          />
-                        </Table.Cell>
-                      </Table.Row>
-                    ) : (
-                      <>
-                        {displayRows.map((row: any, index: number) => {
-                          rowCounter.current++;
-                          const isLastRow = index === displayRows.length - 1;
-
-                          // Grouped row: render a single header cell spanning all columns
-                          // with expand toggle, group label, and item count.
-                          if (enableGrouping && row.getIsGrouped?.()) {
-                            const colSpan =
-                              table.getVisibleLeafColumns().length +
-                              extraColumnsBefore +
-                              extraColumnsAfter;
-                            const indent = (row.depth ?? 0) * chrome.indent;
-                            return (
+                          </Table.Cell>
+                        </Table.Row>
+                      ) : (
+                        <>
+                          {displayRows.map((row: any, index: number) => {
+                            rowCounter.current++;
+                            const isLastRow = index === displayRows.length - 1;
+
+                            // Grouped row: render a single header cell spanning all columns
+                            // with expand toggle, group label, and item count.
+                            if (enableGrouping && row.getIsGrouped?.()) {
+                              const colSpan =
+                                table.getVisibleLeafColumns().length +
+                                extraColumnsBefore +
+                                extraColumnsAfter;
+                              const indent = (row.depth ?? 0) * chrome.indent;
+                              return (
+                                <Table.Row
+                                  key={row.id}
+                                  backgroundColor="$color3"
+                                  flexShrink={0}
+                                  aria-rowindex={rowCounter.current}
+                                >
+                                  <Table.Cell {...({ colSpan } as any)}>
+                                    <View
+                                      flexDirection="row"
+                                      alignItems="center"
+                                      gap="$2"
+                                      paddingInlineStart={indent}
+                                      cursor="pointer"
+                                      onPress={() => row.toggleExpanded()}
+                                      // Keyboard/AT contract: expandable group
+                                      // header is a toggle button (Enter/Space).
+                                      role="button"
+                                      tabIndex={0}
+                                      aria-expanded={row.getIsExpanded()}
+                                      {...({
+                                        onKeyDown: (e: React.KeyboardEvent) => {
+                                          if (e.key === "Enter" || e.key === " ") {
+                                            e.preventDefault();
+                                            row.toggleExpanded();
+                                          }
+                                        },
+                                      } as any)}
+                                    >
+                                      <Text fontFamily="$mono" fontSize="$3">
+                                        {row.getIsExpanded() ? "▼" : "▶"}
+                                      </Text>
+                                      <SizableText
+                                        fontFamily={knobProps.heading.fontFamily}
+                                        size="$4"
+                                      >
+                                        {String(row.groupingValue ?? "—")}
+                                      </SizableText>
+                                      <Text color="$placeholderColor" fontSize="$2">
+                                        ({row.subRows?.length ?? 0})
+                                      </Text>
+                                    </View>
+                                  </Table.Cell>
+                                </Table.Row>
+                              );
+                            }
+
+                            const mainRow = (
                               <Table.Row
-                                key={row.id}
-                                backgroundColor="$color3"
+                                {...(tableRowStateProps({
+                                  selected: Boolean(enableRowSelection && row.getIsSelected?.()),
+                                  keyboardFocused: false,
+                                  zebraOn: tableZebraOn,
+                                  index,
+                                  pressable: rowPressActive,
+                                }) as any)}
+                                {...({ animation: "quick" } as any)}
                                 flexShrink={0}
+                                rowLocation={
+                                  rowCounter.current === 0
+                                    ? "first"
+                                    : rowCounter.current === allRowsLength - 1
+                                      ? "last"
+                                      : "middle"
+                                }
+                                key={`${row.id}-${index}`}
                                 aria-rowindex={rowCounter.current}
+                                aria-label={withInterp(t("Row {{row}}", { row: index + 1 }), {
+                                  row: index + 1,
+                                })}
+                                tabIndex={-1}
+                                {...({
+                                  "data-table-zebra": tableZebraOn
+                                    ? index % 2 === 0
+                                      ? "even"
+                                      : "odd"
+                                    : "off",
+                                } as any)}
+                                {...(getRowPressProps(row, index) as any)}
+                                {...(rowIntentProps(row.original) as any)}
                               >
-                                <Table.Cell {...({ colSpan } as any)}>
-                                  <View
-                                    flexDirection="row"
-                                    alignItems="center"
-                                    gap="$2"
-                                    paddingInlineStart={indent}
-                                    cursor="pointer"
-                                    onPress={() => row.toggleExpanded()}
-                                    // Keyboard/AT contract: expandable group
-                                    // header is a toggle button (Enter/Space).
-                                    role="button"
-                                    tabIndex={0}
-                                    aria-expanded={row.getIsExpanded()}
+                                {renderRowContent(row, index, isLastRow)}
+                              </Table.Row>
+                            );
+
+                            const subRow =
+                              enableRowExpansion &&
+                              renderSubComponent &&
+                              row.getIsExpanded() &&
+                              !row.subRows?.length ? (
+                                <Table.Row key={`${row.id}-sub`} backgroundColor="$color2">
+                                  <Table.Cell
                                     {...({
-                                      onKeyDown: (e: React.KeyboardEvent) => {
-                                        if (e.key === "Enter" || e.key === " ") {
-                                          e.preventDefault();
-                                          row.toggleExpanded();
-                                        }
-                                      },
+                                      colSpan:
+                                        table.getVisibleLeafColumns().length +
+                                        extraColumnsBefore +
+                                        extraColumnsAfter,
                                     } as any)}
                                   >
-                                    <Text fontFamily="$mono" fontSize="$3">
-                                      {row.getIsExpanded() ? "▼" : "▶"}
-                                    </Text>
-                                    <Text fontWeight="600">{String(row.groupingValue ?? "—")}</Text>
-                                    <Text color="$placeholderColor" fontSize="$2">
-                                      ({row.subRows?.length ?? 0})
-                                    </Text>
-                                  </View>
-                                </Table.Cell>
-                              </Table.Row>
-                            );
-                          }
+                                    {renderSubComponent(row)}
+                                  </Table.Cell>
+                                </Table.Row>
+                              ) : null;
 
-                          const mainRow = (
+                            return (
+                              <React.Fragment key={row.id}>
+                                {mainRow}
+                                {subRow}
+                              </React.Fragment>
+                            );
+                          })}
+                          {/* Filler row — fills remaining space with background */}
+                          {isFlexLayout && (
                             <Table.Row
-                              {...(tableRowStateProps({
-                                selected: Boolean(enableRowSelection && row.getIsSelected?.()),
-                                keyboardFocused: false,
-                                zebraOn: tableZebraOn,
-                                index,
-                                pressable: rowPressActive,
-                              }) as any)}
-                              {...({ animation: "quick" } as any)}
-                              flexShrink={0}
-                              rowLocation={
-                                rowCounter.current === 0
+                              key="filler-row"
+                              aria-hidden={true}
+                              backgroundColor="$color1"
+                              flex={1}
+                              flexShrink={1}
+                              flexGrow={1}
+                              flexBasis={0}
+                              minHeight={0}
+                            >
+                              {enableRowSelection && (
+                                <Table.Cell
+                                  cellWidth={selectionColWidth}
+                                  cellLocation="first"
+                                  padding={0}
+                                  minHeight={0}
+                                />
+                              )}
+                              {showRowNumbers && (
+                                <Table.Cell
+                                  cellWidth={chrome.rowNumberCol}
+                                  cellLocation={enableRowSelection ? "middle" : "first"}
+                                  padding={0}
+                                  minHeight={0}
+                                />
+                              )}
+                              {enableRowExpansion && (
+                                <Table.Cell
+                                  cellWidth={chrome.expandCol}
+                                  cellLocation={
+                                    enableRowSelection || showRowNumbers ? "middle" : "first"
+                                  }
+                                  padding={0}
+                                  minHeight={0}
+                                />
+                              )}
+                              {headerGroups[0]?.headers.map((header: any, headerIndex: number) => {
+                                const isFirstDataCell =
+                                  headerIndex === 0 &&
+                                  !enableRowSelection &&
+                                  !showRowNumbers &&
+                                  !enableRowExpansion;
+                                const isLastDataCell =
+                                  headerIndex === headerGroups[0].headers.length - 1 &&
+                                  !(showDeleteRow && !readOnly);
+                                const cellLoc = isFirstDataCell
                                   ? "first"
-                                  : rowCounter.current === allRowsLength - 1
+                                  : isLastDataCell
                                     ? "last"
-                                    : "middle"
-                              }
-                              key={`${row.id}-${index}`}
-                              aria-rowindex={rowCounter.current}
-                              aria-label={withInterp(t("Row {{row}}", { row: index + 1 }), {
-                                row: index + 1,
+                                    : "middle";
+                                return (
+                                  <Table.Cell
+                                    key={header.id}
+                                    {...cellFlexProps}
+                                    {...getColSizeProps(header.column)}
+                                    cellLocation={cellLoc}
+                                    padding={0}
+                                    minHeight={0}
+                                  />
+                                );
                               })}
-                              tabIndex={-1}
-                              {...({
-                                "data-table-zebra": tableZebraOn
-                                  ? index % 2 === 0
-                                    ? "even"
-                                    : "odd"
-                                  : "off",
-                              } as any)}
-                              {...(getRowPressProps(row, index) as any)}
-                              {...(rowIntentProps(row.original) as any)}
-                            >
-                              {renderRowContent(row, index, isLastRow)}
-                            </Table.Row>
-                          );
-
-                          const subRow =
-                            enableRowExpansion &&
-                            renderSubComponent &&
-                            row.getIsExpanded() &&
-                            !row.subRows?.length ? (
-                              <Table.Row key={`${row.id}-sub`} backgroundColor="$color2">
+                              {showDeleteRow && !readOnly && (
                                 <Table.Cell
-                                  {...({
-                                    colSpan:
-                                      table.getVisibleLeafColumns().length +
-                                      extraColumnsBefore +
-                                      extraColumnsAfter,
-                                  } as any)}
-                                >
-                                  {renderSubComponent(row)}
-                                </Table.Cell>
-                              </Table.Row>
-                            ) : null;
-
-                          return (
-                            <React.Fragment key={row.id}>
-                              {mainRow}
-                              {subRow}
-                            </React.Fragment>
-                          );
-                        })}
-                        {/* Filler row — fills remaining space with background */}
-                        {isFlexLayout && (
-                          <Table.Row
-                            key="filler-row"
-                            aria-hidden={true}
-                            backgroundColor="$color1"
-                            flex={1}
-                            flexShrink={1}
-                            flexGrow={1}
-                            flexBasis={0}
-                            minHeight={0}
-                          >
+                                  cellWidth={chrome.deleteCol}
+                                  cellLocation="last"
+                                  padding={0}
+                                  minHeight={0}
+                                />
+                              )}
+                            </Table.Row>
+                          )}
+                        </>
+                      )}
+                      {/* DF-12 / Axiom 6: clipped-viewport affordance — rows are
+                        cut off below the fold, so the frame says so with a
+                        bottom fade that clears once the last row is reached.
+                        Sticky inside the scroll container; zero layout cost
+                        (a zero-height row whose cell paints the fade upward
+                        over the last visible row). Rendered as a Table.Row
+                        and a <td>: a <div> is not a valid child of the real
+                        <tbody> or <tr> (SSR parsers foster-parent it out of
+                        the table). Only reachable in the flex displayMode
+                        (bodyClipped needs a scrollable body), where the row
+                        renders display:flex like the old View. */}
+                      {isWeb && bodyClipped && (
+                        <Table.Row
+                          aria-hidden={true}
+                          role="presentation"
+                          position={"sticky" as any}
+                          bottom={0}
+                          height={0}
+                          flexShrink={0}
+                          zIndex={2}
+                          pointerEvents="none"
+                          {...({ "data-table-clip-affordance": "true" } as any)}
+                        >
+                          <View
+                            {...({ render: "td" } as Record<string, unknown>)}
+                            position="absolute"
+                            left={0}
+                            right={0}
+                            bottom={0}
+                            height={28}
+                            style={{
+                              background:
+                                "linear-gradient(to bottom, rgba(0,0,0,0), var(--background))",
+                            }}
+                          />
+                        </Table.Row>
+                      )}
+                    </Table.Body>
+
+                    {/* Table Footer */}
+                    {hasFooter && (
+                      <Table.Foot>
+                        {footerGroups.map((footerGroup: any) => (
+                          <Table.Row key={footerGroup.id}>
                             {enableRowSelection && (
                               <Table.Cell
                                 cellWidth={selectionColWidth}
+                                cellHeight={cellHeight as any}
                                 cellLocation="first"
-                                padding={0}
-                                minHeight={0}
                               />
                             )}
                             {showRowNumbers && (
                               <Table.Cell
                                 cellWidth={chrome.rowNumberCol}
+                                cellHeight={cellHeight as any}
                                 cellLocation={enableRowSelection ? "middle" : "first"}
-                                padding={0}
-                                minHeight={0}
                               />
                             )}
                             {enableRowExpansion && (
                               <Table.Cell
                                 cellWidth={chrome.expandCol}
+                                cellHeight={cellHeight as any}
                                 cellLocation={
                                   enableRowSelection || showRowNumbers ? "middle" : "first"
                                 }
-                                padding={0}
-                                minHeight={0}
                               />
                             )}
-                            {headerGroups[0]?.headers.map((header: any, headerIndex: number) => {
-                              const isFirstDataCell =
-                                headerIndex === 0 &&
-                                !enableRowSelection &&
-                                !showRowNumbers &&
-                                !enableRowExpansion;
-                              const isLastDataCell =
-                                headerIndex === headerGroups[0].headers.length - 1 &&
-                                !(showDeleteRow && !readOnly);
-                              const cellLoc = isFirstDataCell
-                                ? "first"
-                                : isLastDataCell
-                                  ? "last"
-                                  : "middle";
+                            {footerGroup.headers.map((header: any) => {
+                              const stickyStyle = getStickyStyle(header.column.id);
+                              const columnAlign = resolveColumnAlign({
+                                ...(header.column.columnDef as DataTableColumn),
+                                id: header.column.id,
+                              });
                               return (
                                 <Table.Cell
                                   key={header.id}
                                   {...cellFlexProps}
                                   {...getColSizeProps(header.column)}
-                                  cellLocation={cellLoc}
-                                  padding={0}
-                                  minHeight={0}
-                                />
+                                  {...(isWeb && stickyStyle
+                                    ? {
+                                        style: {
+                                          position: "sticky",
+                                          ...("insetInlineStart" in stickyStyle && {
+                                            insetInlineStart: stickyStyle.insetInlineStart,
+                                          }),
+                                          ...("insetInlineEnd" in stickyStyle && {
+                                            insetInlineEnd: stickyStyle.insetInlineEnd,
+                                          }),
+                                          zIndex: 2,
+                                          backgroundColor: "var(--color2)",
+                                        } as React.CSSProperties,
+                                      }
+                                    : {})}
+                                  justifyContent={alignToFlex(columnAlign)}
+                                  data-align={columnAlign}
+                                >
+                                  {header.isPlaceholder ? null : (
+                                    <View
+                                      width="100%"
+                                      minWidth={0}
+                                      flexDirection="row"
+                                      alignItems="center"
+                                      justifyContent={alignToFlex(columnAlign)}
+                                      data-cell-align={columnAlign}
+                                      style={isWeb ? { textAlign: columnAlign } : undefined}
+                                    >
+                                      {flexRender(
+                                        header.column.columnDef.footer,
+                                        header.getContext(),
+                                      )}
+                                    </View>
+                                  )}
+                                </Table.Cell>
                               );
                             })}
                             {showDeleteRow && !readOnly && (
                               <Table.Cell
                                 cellWidth={chrome.deleteCol}
+                                cellHeight={cellHeight as any}
                                 cellLocation="last"
-                                padding={0}
-                                minHeight={0}
                               />
                             )}
                           </Table.Row>
-                        )}
-                      </>
+                        ))}
+                      </Table.Foot>
                     )}
-                    {/* DF-12 / Axiom 6: clipped-viewport affordance — rows are
-                        cut off below the fold, so the frame says so with a
-                        bottom fade that clears once the last row is reached.
-                        Sticky inside the scroll container; zero layout cost
-                        (a zero-height row whose cell paints the fade upward
-                        over the last visible row). Rendered as a Table.Row
-                        and a <td>: a <div> is not a valid child of the real
-                        <tbody> or <tr> (SSR parsers foster-parent it out of
-                        the table). Only reachable in the flex displayMode
-                        (bodyClipped needs a scrollable body), where the row
-                        renders display:flex like the old View. */}
-                    {isWeb && bodyClipped && (
-                      <Table.Row
-                        aria-hidden={true}
-                        role="presentation"
-                        position={"sticky" as any}
-                        bottom={0}
-                        height={0}
-                        flexShrink={0}
-                        zIndex={2}
-                        pointerEvents="none"
-                        {...({ "data-table-clip-affordance": "true" } as any)}
-                      >
-                        <View
-                          {...({ render: "td" } as Record<string, unknown>)}
-                          position="absolute"
-                          left={0}
-                          right={0}
-                          bottom={0}
-                          height={28}
-                          style={{
-                            background:
-                              "linear-gradient(to bottom, rgba(0,0,0,0), var(--background))",
-                          }}
-                        />
-                      </Table.Row>
-                    )}
-                  </Table.Body>
-
-                  {/* Table Footer */}
-                  {hasFooter && (
-                    <Table.Foot>
-                      {footerGroups.map((footerGroup: any) => (
-                        <Table.Row key={footerGroup.id}>
-                          {enableRowSelection && (
-                            <Table.Cell
-                              cellWidth={selectionColWidth}
-                              cellHeight={cellHeight as any}
-                              cellLocation="first"
-                            />
-                          )}
-                          {showRowNumbers && (
-                            <Table.Cell
-                              cellWidth={chrome.rowNumberCol}
-                              cellHeight={cellHeight as any}
-                              cellLocation={enableRowSelection ? "middle" : "first"}
-                            />
-                          )}
-                          {enableRowExpansion && (
-                            <Table.Cell
-                              cellWidth={chrome.expandCol}
-                              cellHeight={cellHeight as any}
-                              cellLocation={
-                                enableRowSelection || showRowNumbers ? "middle" : "first"
-                              }
-                            />
-                          )}
-                          {footerGroup.headers.map((header: any) => {
-                            const stickyStyle = getStickyStyle(header.column.id);
-                            const columnAlign = resolveColumnAlign({
-                              ...(header.column.columnDef as DataTableColumn),
-                              id: header.column.id,
-                            });
-                            return (
-                              <Table.Cell
-                                key={header.id}
-                                {...cellFlexProps}
-                                {...getColSizeProps(header.column)}
-                                {...(isWeb && stickyStyle
-                                  ? {
-                                      style: {
-                                        position: "sticky",
-                                        ...("insetInlineStart" in stickyStyle && {
-                                          insetInlineStart: stickyStyle.insetInlineStart,
-                                        }),
-                                        ...("insetInlineEnd" in stickyStyle && {
-                                          insetInlineEnd: stickyStyle.insetInlineEnd,
-                                        }),
-                                        zIndex: 2,
-                                        backgroundColor: "var(--color2)",
-                                      } as React.CSSProperties,
-                                    }
-                                  : {})}
-                                justifyContent={alignToFlex(columnAlign)}
-                                data-align={columnAlign}
-                              >
-                                {header.isPlaceholder ? null : (
-                                  <View
-                                    width="100%"
-                                    minWidth={0}
-                                    flexDirection="row"
-                                    alignItems="center"
-                                    justifyContent={alignToFlex(columnAlign)}
-                                    data-cell-align={columnAlign}
-                                    style={isWeb ? { textAlign: columnAlign } : undefined}
-                                  >
-                                    {flexRender(
-                                      header.column.columnDef.footer,
-                                      header.getContext(),
-                                    )}
-                                  </View>
-                                )}
-                              </Table.Cell>
-                            );
-                          })}
-                          {showDeleteRow && !readOnly && (
-                            <Table.Cell
-                              cellWidth={chrome.deleteCol}
-                              cellHeight={cellHeight as any}
-                              cellLocation="last"
-                            />
-                          )}
-                        </Table.Row>
-                      ))}
-                    </Table.Foot>
-                  )}
-                </Table>
-              </View>
-            )}
-
-            {infinite ? (
-              <DataTableInfiniteTail
-                infinite={infinite}
-                visibleCount={tableRows.length}
-                showAppendSkeleton={!isVirtualized}
-                rowHeightPx={rowHeightPx}
-                fontSize={knobProps.sizeToken}
-                gapProps={knobProps.gap}
-                sentinel={
-                  !isVirtualized && !infinite.exhausted && !infinite.appendError && isWeb ? (
-                    <View
-                      // @ts-ignore web ref for IntersectionObserver
-                      ref={sentinelRef as any}
-                      height={1}
-                      width="100%"
-                      aria-hidden
-                      {...({ "data-testid": "infinite-sentinel" } as any)}
-                    />
-                  ) : null
-                }
-              />
-            ) : null}
-
-            {enableRowSelection && bulkBarPlacement === "bottom" ? (
-              <View width="100%" {...(disabled ? disabledState.chromeKnobProps : {})}>
-                <DataTableBulkActions
-                  actions={resolvedBulkActions}
-                  maxVisibleActions={5}
-                  showSelectionCount
-                  placement="bottom"
+                  </Table>
+                </View>
+              )}
+
+              {infinite ? (
+                <DataTableInfiniteTail
+                  infinite={infinite}
+                  visibleCount={tableRows.length}
+                  showAppendSkeleton={!isVirtualized}
+                  rowHeightPx={rowHeightPx}
+                  fontSize={knobProps.sizeToken}
+                  gapProps={knobProps.gap}
+                  sentinel={
+                    !isVirtualized && !infinite.exhausted && !infinite.appendError && isWeb ? (
+                      <View
+                        // @ts-ignore web ref for IntersectionObserver
+                        ref={sentinelRef as any}
+                        height={1}
+                        width="100%"
+                        aria-hidden
+                        {...({ "data-testid": "infinite-sentinel" } as any)}
+                      />
+                    ) : null
+                  }
                 />
-              </View>
-            ) : null}
-
-            {/* Add Row Button */}
-            {showAddRow && !readOnly && (
-              <View>
-                <Button
-                  icon={PlusIcon}
-                  disabled={disabled || (maxRows !== undefined && tableData.length >= maxRows)}
-                  onPress={effectiveHandleAddRow}
-                  aria-label={t("Add Row")}
-                >
-                  {t("Add Row")}
-                </Button>
-              </View>
-            )}
+              ) : null}
+
+              {enableRowSelection && bulkBarPlacement === "bottom" ? (
+                <View width="100%" {...(disabled ? disabledState.chromeKnobProps : {})}>
+                  <DataTableBulkActions
+                    actions={resolvedBulkActions}
+                    maxVisibleActions={5}
+                    showSelectionCount
+                    placement="bottom"
+                  />
+                </View>
+              ) : null}
+
+              {/* Add Row Button */}
+              {showAddRow && !readOnly && (
+                <View>
+                  <Button
+                    icon={PlusIcon}
+                    disabled={disabled || (maxRows !== undefined && tableData.length >= maxRows)}
+                    onPress={effectiveHandleAddRow}
+                    aria-label={t("Add Row")}
+                  >
+                    {t("Add Row")}
+                  </Button>
+                </View>
+              )}
+            </Surface>
 
             {/* Pagination footer (pages mode only; infinite replaces it with the tail status) */}
             {enablePagination && !infinite && (