@multiplatform.one/table 6.1.0 → 6.3.0

package/src/components/DataTable/DataTableRoot.tsx

@@ -11,83 +11,79 @@
 
 import {
   CaretDownIcon,
+  CaretLeftIcon,
   CaretRightIcon,
   CaretUpDownIcon,
   PlusIcon,
   TrashIcon,
 } from "@phosphor-icons/react";
-import { Button, Field, useFormField, zIndex } from "@multiplatform.one/forms";
+import { Button, Checkbox, Field, Spinner, useFormField, zIndex } from "@multiplatform.one/forms";
 import { flexRender } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import React, { useRef, useMemo, useCallback } from "react";
-import { Tooltip } from "@multiplatform.one/components";
-import { Spinner, Text, View, isWeb, useMedia } from "tamagui";
+import { ensureFocusVisibleRing, useResolvedKnobs } from "@multiplatform.one/theme";
+import React, { useEffect, useRef, useMemo, useCallback, useState } from "react";
+import {
+  AsyncBoundary,
+  EmptyState,
+  Skeleton,
+  Tooltip,
+  useDirection,
+} from "@multiplatform.one/components";
+import { Text, View, isWeb, useMedia } from "tamagui";
 import { useTranslation } from "react-i18next";
 import { useDataTable } from "../../hooks/useDataTable";
 import { useDragScroll } from "../../hooks/useDragScroll";
 import { useDataTableKeyboard } from "../../hooks/useDataTableKeyboard";
-import type { DataTableColumn, DataTableField, DataTableProps } from "../../types";
+import type {
+  BulkAction,
+  DataTableColumn,
+  DataTableField,
+  DataTableProps,
+  SelectAllScope,
+} from "../../types";
 import { DataTableColumnPinning } from "../DataTableColumnPinning";
 import { DataTablePagination } from "../DataTablePagination";
 import { DataTableToolbar } from "../DataTableToolbar";
+import { DataTableBulkActions } from "../DataTableBulkActions";
 import { DataTableCell } from "../DataTableCell";
 import { ColumnHeaderFilter } from "../ColumnHeaderFilter";
+import { DataTableFilterChips } from "../DataTableFilterChips";
 import { Table } from "@multiplatform.one/table-primitives";
 import { DataTableContext } from "./DataTableContext";
 import { DataTableStateContext } from "./DataTableStateContext";
-import type { DataTableStateContextValue } from "./DataTableStateContext";
+import type {
+  DataTableFilterUi,
+  DataTableStateContextValue,
+  FilterEditTarget,
+} from "./DataTableStateContext";
+import { DataTableCardControls } from "./DataTableCardControls";
 import { DataTableMobileCards } from "./DataTableMobileCards";
 import { DataTableVirtualized } from "./DataTableVirtualized";
+import { alignToFlex, getDefaultColumnAlign } from "../../utils/columnAlign";
+import { mapFieldToFilterType } from "../../utils/filterFields";
+import { INFINITE_TRIGGER_ROWS } from "../../utils/paginationDefaults";
+import { bidiIsolate, withInterp } from "../../utils/withInterp";
+
+const SELECTION_COL_WIDTH = 40;
 
 /** Returns the field type for a column, defaulting to "input" */
 function getColumnField(column: DataTableColumn): DataTableField {
   return column.field ?? "input";
 }
 
-/** Returns true if the field type should be right-aligned (numeric fields) */
-function isNumericField(field: DataTableField): boolean {
-  switch (field) {
-    case "stepper":
-    case "slider":
-    case "progress":
-    case "rating":
-    case "duration":
-      return true;
-    default:
-      return false;
-  }
+/** Resolve DG-TBL-01 column alignment for a column def. */
+function resolveColumnAlign(column: DataTableColumn) {
+  return getDefaultColumnAlign({
+    id: typeof column.id === "string" ? column.id : undefined,
+    align: column.align,
+    field: getColumnField(column),
+    fieldProps: column.fieldProps,
+    meta: column.meta as { align?: "left" | "center" | "right"; role?: string } | undefined,
+  });
 }
 
-/** Maps field type to filter-compatible types */
-function mapFieldToFilterType(
-  field?: DataTableField,
-): "text" | "number" | "date" | "boolean" | "select" {
-  switch (field) {
-    case "stepper":
-    case "slider":
-    case "progress":
-    case "rating":
-    case "duration":
-      return "number";
-    case "datepicker":
-    case "datetimepicker":
-    case "timepicker":
-    case "daterangepicker":
-    case "multidatepicker":
-      return "date";
-    case "checkbox":
-    case "switch":
-      return "boolean";
-    case "select":
-    case "combobox":
-    case "radiogroup":
-    case "togglegroup":
-      return "select";
-    default:
-      return "text";
-  }
-}
+// mapFieldToFilterType moved to utils/filterFields (shared with the filter
+// model — LC-16, one mapping).
 
 const rowHeightPx = 40;
 
@@ -107,6 +103,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
   columns,
   initialState,
   onStateChange,
+  onRetry,
   syncWithUrl = false,
   urlDebounceMs = 500,
   urlStrategy,
@@ -114,14 +111,19 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
   manualPagination = false,
   manualSorting = false,
   enableFiltering = true,
+  filterableFields,
   enableSorting = true,
   enablePagination = true,
+  pageSizeOptions,
+  paginationMode = "pages",
+  loadPage,
   enableColumnVisibility = true,
   enableColumnOrdering = false,
   enableColumnResizing = false,
   enableGlobalSearch = true,
   enableViews = false,
   columnLayout = "equal",
+  layout = "auto",
   enableVirtualization = false,
   virtualizationHeight,
   virtualizationOverscan = 5,
@@ -132,6 +134,9 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
   maxPinnedColumns = 3,
   enableGrouping = false,
   enableKeyboardNavigation = false,
+  enableRowSelection = false,
+  selectAllScope: selectAllScopeProp,
+  bulkActions,
   readOnly = false,
   onCellChange,
   name,
@@ -151,7 +156,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
   className,
   size,
   compact = false,
-  disabled: _disabled = false,
+  disabled = false,
   children,
   "aria-label": ariaLabel,
   "aria-describedby": ariaDescribedBy,
@@ -159,7 +164,25 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
 }: DataTableRootProps<TData>) {
   const { t } = useTranslation();
   const { sm } = useMedia();
-  const { knobProps } = useResolvedKnobs({ intent: undefined, component: "DataTable", compact });
+  // Resolved responsive layout: cards below `$sm` (W11 compact class) unless
+  // pinned via the `layout` prop. Same table state drives both layouts.
+  const showCards = layout === "cards" || (layout === "auto" && sm === false);
+  const { knobProps, disabledState } = useResolvedKnobs({
+    intent: undefined,
+    component: "DataTable",
+    compact,
+  });
+  // Collapsed expand-caret points toward inline-end, so it mirrors in RTL via
+  // glyph swap (useDirection, Axiom 15); rotation sign flips so expanded
+  // still points down.
+  const isRTL = useDirection() === "rtl";
+  const ExpandCaretIcon = isRTL ? CaretLeftIcon : CaretRightIcon;
+  const expandedCaretRotation = isRTL ? "rotate(-90deg)" : "rotate(90deg)";
+  const tableZebraOn = knobProps.tableZebra === "on";
+  const bulkBarPlacement = knobProps.bulkBarPlacement === "bottom" ? "bottom" : "top";
+  // House selectAllScope knob (DG-TBL-03): prop overrides knob; default page.
+  const selectAllScope: SelectAllScope =
+    selectAllScopeProp ?? (knobProps.selectAllScope === "filtered" ? "filtered" : "page");
   const { resolvedForm } = useFormField({ form: formProp });
 
   const isFormMode = Boolean(name && resolvedForm);
@@ -176,8 +199,11 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
     manualPagination,
     manualSorting,
     enableFiltering,
+    filterableFields,
     enableSorting,
     enablePagination,
+    paginationMode,
+    loadPage,
     enableColumnVisibility,
     enableColumnOrdering,
     enableColumnResizing,
@@ -194,17 +220,43 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
     maxPinnedColumns,
     enableGrouping,
     enableKeyboardNavigation,
+    enableRowSelection,
     rowCount,
     pageCount,
   });
 
+  const resolvedBulkActions = (bulkActions ?? []) as BulkAction<TData>[];
+
+  const selectAllChecked =
+    enableRowSelection &&
+    (selectAllScope === "filtered"
+      ? table.getIsAllRowsSelected()
+      : table.getIsAllPageRowsSelected());
+  const selectAllIndeterminate =
+    enableRowSelection &&
+    (selectAllScope === "filtered"
+      ? table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()
+      : table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected());
+
+  const toggleSelectAll = useCallback(() => {
+    if (selectAllScope === "filtered") {
+      table.toggleAllRowsSelected();
+    } else {
+      table.toggleAllPageRowsSelected();
+    }
+  }, [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 headerGroups = table.getHeaderGroups();
-  const tableRows = table.getRowModel().rows;
+  const rowModelRows = table.getRowModel().rows;
+  // Infinite mode reveals accumulated pages only; loader mode's row model is
+  // already just the accumulated rows, so the slice is a no-op there.
+  const infinite = computed.infinite;
+  const tableRows = infinite ? rowModelRows.slice(0, infinite.visibleRowCount) : rowModelRows;
   const footerGroups = table.getFooterGroups();
 
   const hasFooter = footerGroups.some((group: any) =>
@@ -219,15 +271,35 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
   const getColSizeProps = useCallback(
     (col: {
       getSize: () => number;
+      getIsPinned?: () => "left" | "right" | false;
       columnDef: { size?: number; minSize?: number; maxSize?: number };
     }) => {
       const hasExplicitSize = col.columnDef.size != null;
-      if (hasExplicitSize || enableColumnResizing) {
+      // A pinned column must render at exactly getSize(): getStickyStyle sums
+      // getSize() of preceding pinned columns for the sticky inset, so a
+      // flexed pinned column (equal layout) would drift every offset after
+      // the first. min/max clamp the box under any flex resolution.
+      const isPinned = enableColumnPinning && Boolean(col.getIsPinned?.());
+      if (isPinned) {
+        const size = col.getSize();
+        return {
+          width: size,
+          minWidth: size,
+          maxWidth: size,
+          flexGrow: 0,
+          flexShrink: 0,
+          flexBasis: "auto" as const,
+        };
+      }
+      // Scroll layout needs one concrete width per column (from the column
+      // def, TanStack default otherwise) so independent flex rows stay
+      // aligned while the table grows past its container.
+      if (hasExplicitSize || enableColumnResizing || columnLayout === "scroll") {
         return { width: col.getSize() };
       }
       return {};
     },
-    [enableColumnResizing],
+    [enableColumnResizing, columnLayout, enableColumnPinning],
   );
 
   // HTML5 column drag-and-drop (web only). Reorder swaps the dragged column
@@ -264,14 +336,17 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
   }, [enableColumnOrdering, table]);
 
   const bodyScrollRef = useRef<HTMLDivElement>(null);
+  // isWeb, not window-presence: RN (Hermes) aliases a window global, but
+  // react-virtual needs real DOM scroll elements — keep it inert on native.
   const isVirtualized =
-    enableVirtualization &&
-    virtualizationHeight != null &&
-    virtualizationHeight > 0 &&
-    typeof window !== "undefined";
+    enableVirtualization && virtualizationHeight != null && virtualizationHeight > 0 && isWeb;
 
+  // Infinite mode adds one tail row to the virtual count while more pages
+  // exist: it renders the appending skeleton and extends the scroll range so
+  // appended pages grow geometry instead of collapsing it.
+  const hasInfiniteTail = Boolean(infinite && !infinite.exhausted && tableRows.length > 0);
   const virtualizer = useVirtualizer({
-    count: tableRows.length,
+    count: tableRows.length + (hasInfiniteTail ? 1 : 0),
     getScrollElement: () => bodyScrollRef.current,
     estimateSize: () => rowHeightPx,
     overscan: virtualizationOverscan,
@@ -281,31 +356,112 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
   const virtualItems = isVirtualized ? virtualizer.getVirtualItems() : [];
   const totalSize = isVirtualized ? virtualizer.getTotalSize() : 0;
 
+  // ---- Infinite mode: load-more triggers ----
+
+  const loadMoreRef = useRef<(() => void) | undefined>(undefined);
+  loadMoreRef.current = infinite?.loadMore;
+
+  // Virtualized: append when the last rendered virtual row nears the tail
+  // (standard TanStack Virtual infinite pattern — overscan gives lead time).
+  const lastVirtualIndex = virtualItems.length ? virtualItems[virtualItems.length - 1].index : -1;
+  React.useEffect(() => {
+    if (!infinite || !isVirtualized || infinite.exhausted) return;
+    if (lastVirtualIndex < 0) return;
+    if (lastVirtualIndex >= tableRows.length - INFINITE_TRIGGER_ROWS) {
+      loadMoreRef.current?.();
+    }
+  }, [infinite?.exhausted, isVirtualized, lastVirtualIndex, tableRows.length, !!infinite]);
+
+  // Non-virtualized (grid or card list): IntersectionObserver sentinel below
+  // the content. Re-observed on row-count changes so short pages keep loading
+  // while the sentinel stays on screen.
+  const sentinelRef = useRef<HTMLElement | null>(null);
+  React.useEffect(() => {
+    if (!infinite || isVirtualized || infinite.exhausted) return;
+    if (!isWeb || typeof IntersectionObserver === "undefined") return;
+    const node = sentinelRef.current;
+    if (!node) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) loadMoreRef.current?.();
+        }
+      },
+      { rootMargin: `${INFINITE_TRIGGER_ROWS * rowHeightPx}px` },
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [!!infinite, infinite?.exhausted, isVirtualized, tableRows.length]);
+
   const isFlexLayout = columnLayout !== "auto";
   const displayMode = isFlexLayout ? ("flex" as const) : ("table" as const);
 
+  // Column pinning shares the scroll layout's horizontal geometry: the
+  // content View is the ONE horizontal scrollport (header + body + footer
+  // rows all ride inside it) and the Table floors at max-content so rows
+  // never overflow their own boxes. Sticky resolves against the NEAREST
+  // scroll container, so with pinning the Table (overflow:hidden base) and
+  // Table.Body (overflowY:auto flex variant, which computes overflow-x:auto)
+  // must be overridden to overflow:visible — otherwise the body scrolls on
+  // its own while the header stays put and pinned cells stick to the wrong
+  // scrollport (the LTR pinning breakage).
+  const hScroll = isWeb && isFlexLayout && (columnLayout === "scroll" || enableColumnPinning);
+  // In the horizontal-overflow modes, body cell content is clipped to the
+  // cell box: flex-mode cells default to overflow:visible, so overlong text
+  // paints over neighbor cells and bleeds out from under sticky pinned
+  // columns (LC-10 containment at the cell grain).
+  const clipBodyCells = hScroll;
+
   const cellFlexProps = useMemo(() => {
     if (!isFlexLayout) return {};
-    if (columnLayout === "scroll") return { flex: 0, flexShrink: 0, flexGrow: 0, minWidth: 80 };
-    if (enableColumnResizing) return { flex: 0, flexShrink: 0, flexGrow: 0 };
+    if (columnLayout === "scroll") {
+      // flexBasis auto, not the `flex: 0` shorthand: RN expands `flex: 0` to
+      // basis 0, which overrides per-column widths and crushes every cell to
+      // the minWidth floor (contents then overflow and get clipped).
+      return { flexGrow: 0, flexShrink: 0, flexBasis: "auto" as const, minWidth: 80 };
+    }
+    // Same flexBasis trap as the scroll branch above: `flex: 0` expands to
+    // basis 0 and the per-column width from getColSizeProps loses, crushing
+    // every resizable cell to the min-width floor (content then overlaps).
+    if (enableColumnResizing) {
+      return { flexGrow: 0, flexShrink: 0, flexBasis: "auto" as const };
+    }
     return { flex: 1, flexShrink: 1, flexGrow: 1, flexBasis: 0, minWidth: 0 };
   }, [isFlexLayout, columnLayout, enableColumnResizing]);
 
-  const pinning = useMemo(
+  // Columns offered by the card-layout filter builder (grid mode filters
+  // through ColumnHeaderFilter in the headers instead).
+  const cardFilterColumns = useMemo(
     () =>
-      enableColumnPinning
-        ? DataTableColumnPinning({
-            table,
-            maxPinnedColumns,
-            allowPinning: true,
-          })
-        : null,
-    [enableColumnPinning, table, maxPinnedColumns],
+      columns
+        .filter((col) => (col as any).enableColumnFilter !== false)
+        .map((col) => ({
+          id: (col.id as string) || ((col as any).accessorKey as string) || "",
+          label:
+            typeof col.header === "string"
+              ? col.header
+              : (col.id as string) || ((col as any).accessorKey as string) || "",
+          type: mapFieldToFilterType(col.field),
+        }))
+        .filter((col) => col.id),
+    [columns],
   );
 
+  // DataTableColumnPinning is a hook-style helper (it calls useState/useMemo/
+  // useCallback internally), so it must run unconditionally at the top level
+  // of this component. Calling it inside useMemo crashed with "Should have a
+  // queue. You are likely calling Hooks conditionally."
+  const pinningHelpers = DataTableColumnPinning({
+    table,
+    maxPinnedColumns,
+    allowPinning: true,
+    disabled,
+  });
+  const pinning = enableColumnPinning ? pinningHelpers : null;
+
   const keyboardNav = useDataTableKeyboard({
     table,
-    enabled: enableKeyboardNavigation,
+    enabled: enableKeyboardNavigation && !disabled,
     viewportHeight: virtualizationHeight ?? 400,
     onScrollToRow: isVirtualized
       ? (idx) => virtualizer.scrollToIndex(idx, { align: "auto" })
@@ -319,8 +475,11 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
 
   const handleCellChange = useCallback(
     async (rowIndex: number, columnId: string, newValue: any) => {
-      if (readOnly) return;
+      if (readOnly || disabled) return;
       const previousValue = data[rowIndex]?.[columnId];
+      // Bail on no-op commits so a field that re-emits the same primitive value
+      // (e.g. OTP sync effects) cannot force a new data array every render.
+      if (Object.is(previousValue, newValue)) return;
       if (onCellChange) {
         const result = await onCellChange(rowIndex, columnId, newValue, previousValue);
         if (result === false) return;
@@ -331,25 +490,25 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
         onDataChange(newData);
       }
     },
-    [readOnly, data, onCellChange, isFormMode, onDataChange],
+    [readOnly, disabled, data, onCellChange, isFormMode, onDataChange],
   );
 
   const handleAddRow = useCallback(() => {
-    if (readOnly || (maxRows && data.length >= maxRows)) return;
+    if (readOnly || disabled || (maxRows && data.length >= maxRows)) return;
     const newRow = { ...defaultRow, idx: data.length + 1 } as unknown as TData;
     if (!isFormMode && onDataChange) {
       onDataChange([...data, newRow]);
     }
-  }, [readOnly, maxRows, data, defaultRow, isFormMode, onDataChange]);
+  }, [readOnly, disabled, maxRows, data, defaultRow, isFormMode, onDataChange]);
 
   const handleDeleteRow = useCallback(
     (rowIndex: number) => {
-      if (readOnly || data.length <= minRows) return;
+      if (readOnly || disabled || data.length <= minRows) return;
       if (!isFormMode && onDataChange) {
         onDataChange(data.filter((_, idx) => idx !== rowIndex));
       }
     },
-    [readOnly, minRows, data, isFormMode, onDataChange],
+    [readOnly, disabled, minRows, data, isFormMode, onDataChange],
   );
 
   const isCompact = resolvedSize === "sm" || compact;
@@ -382,7 +541,9 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
           fieldProps={columnDef.fieldProps}
           onChange={(newValue) => handleCellChange(rowIndex, columnId, newValue)}
           readOnly={readOnly}
+          disabled={disabled}
           columnId={columnId}
+          columnLabel={typeof columnDef.header === "string" ? columnDef.header : undefined}
           rowIndex={rowIndex}
           rowData={rowData}
           size={knobProps.sizeToken}
@@ -392,12 +553,13 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
         />
       );
     },
-    [handleCellChange, readOnly, knobProps.sizeToken, isCompact],
+    [handleCellChange, readOnly, disabled, knobProps.sizeToken, isCompact],
   );
 
   const isSSR = typeof window === "undefined";
 
-  const extraColumnsBefore = (showRowNumbers ? 1 : 0) + (enableRowExpansion ? 1 : 0);
+  const extraColumnsBefore =
+    (enableRowSelection ? 1 : 0) + (showRowNumbers ? 1 : 0) + (enableRowExpansion ? 1 : 0);
   const extraColumnsAfter = showDeleteRow && !readOnly ? 1 : 0;
 
   const getStickyStyle = useCallback(
@@ -418,11 +580,14 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
           const col = table.getColumn(leftPinned[i]);
           if (col) leftOffset += col.getSize();
         }
+        if (enableRowSelection) leftOffset += SELECTION_COL_WIDTH;
         if (enableRowExpansion) leftOffset += 32;
         if (showRowNumbers) leftOffset += 50;
+        // Logical inset (RTL backlog #2): TanStack's "left" bucket is the
+        // reading-start side, so the sticky offset must flip with direction.
         return {
           position: "sticky" as const,
-          left: leftOffset,
+          insetInlineStart: leftOffset,
           zIndex: 2,
           backgroundColor: "$color2",
         };
@@ -437,7 +602,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
         if (showDeleteRow && !readOnly) rightOffset += 60;
         return {
           position: "sticky" as const,
-          right: rightOffset,
+          insetInlineEnd: rightOffset,
           zIndex: 2,
           backgroundColor: "$color2",
         };
@@ -449,6 +614,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
       enableColumnPinning,
       pinning,
       table,
+      enableRowSelection,
       enableRowExpansion,
       showRowNumbers,
       showDeleteRow,
@@ -457,13 +623,51 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
   );
 
   const renderRowContent = useCallback(
-    (row: any, rowIndex: number, _isLastRow: boolean) => {
+    // `cellElement="div"` is the virtualized escape hatch: virtual rows are
+    // absolutely-positioned <div role="row"> hosts, and a real <td> is not a
+    // valid <div> child (React validateDOMNesting + SSR reparenting). The
+    // div cells keep role="cell" from the primitive, preserving the
+    // roles-based grid semantics.
+    (row: any, rowIndex: number, _isLastRow: boolean, cellElement?: "div") => {
       const rowData = row.original as TData;
+      const cellRenderProps = cellElement ? ({ render: cellElement } as any) : {};
 
       return (
         <>
+          {enableRowSelection && (
+            <Table.Cell
+              {...cellRenderProps}
+              cellWidth={SELECTION_COL_WIDTH}
+              cellHeight={cellHeight as any}
+              cellLocation="first"
+              justifyContent="center"
+            >
+              <Checkbox
+                checked={row.getIsSelected()}
+                onChange={(checked) => {
+                  if (disabled) return;
+                  row.toggleSelected(!!checked);
+                }}
+                disabled={disabled}
+                checkboxProps={{
+                  // Row identity in the name so repeated per-row actions are
+                  // differentiated for screen readers (DG-A11Y-06).
+                  "aria-label": withInterp(t("Select row {{row}}", { row: rowIndex + 1 }), {
+                    row: rowIndex + 1,
+                  }),
+                }}
+                compact={isCompact}
+              />
+            </Table.Cell>
+          )}
+
           {showRowNumbers && (
-            <Table.Cell cellWidth={50} cellHeight={cellHeight as any} cellLocation="first">
+            <Table.Cell
+              {...cellRenderProps}
+              cellWidth={50}
+              cellHeight={cellHeight as any}
+              cellLocation={enableRowSelection ? "middle" : "first"}
+            >
               <Text fontSize={knobProps.sizeToken} color="$color10">
                 {rowIndex + 1}
               </Text>
@@ -472,9 +676,10 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
 
           {enableRowExpansion && (
             <Table.Cell
+              {...cellRenderProps}
               cellWidth={32 + row.depth * 20}
               cellHeight={cellHeight as any}
-              cellLocation={showRowNumbers ? "middle" : "first"}
+              cellLocation={enableRowSelection || showRowNumbers ? "middle" : "first"}
               paddingLeft={0}
               paddingRight={0}
             >
@@ -516,18 +721,30 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                 )}
                 {row.getCanExpand() ? (
                   <View
-                    onPress={() => row.toggleExpanded()}
-                    cursor="pointer"
+                    onPress={() => {
+                      if (disabled) return;
+                      row.toggleExpanded();
+                    }}
+                    cursor={disabled ? "not-allowed" : "pointer"}
+                    aria-disabled={disabled || undefined}
                     padding="$1"
                     aria-expanded={row.getIsExpanded()}
-                    aria-label={row.getIsExpanded() ? "Collapse row" : "Expand row"}
+                    aria-label={
+                      row.getIsExpanded()
+                        ? withInterp(t("Collapse row {{row}}", { row: rowIndex + 1 }), {
+                            row: rowIndex + 1,
+                          })
+                        : withInterp(t("Expand row {{row}}", { row: rowIndex + 1 }), {
+                            row: rowIndex + 1,
+                          })
+                    }
                     hoverStyle={{ backgroundColor: "$color4" }}
                     borderRadius="$2"
                   >
-                    <CaretRightIcon
+                    <ExpandCaretIcon
                       size={14}
                       style={{
-                        transform: row.getIsExpanded() ? "rotate(90deg)" : "none",
+                        transform: row.getIsExpanded() ? expandedCaretRotation : "none",
                         transition: "transform 0.15s ease",
                       }}
                     />
@@ -540,24 +757,37 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
           )}
 
           {row.getVisibleCells().map((cell: any, cellIndex: number) => {
-            const isFirstDataCell = cellIndex === 0 && !showRowNumbers && !enableRowExpansion;
+            const isFirstDataCell =
+              cellIndex === 0 && !enableRowSelection && !showRowNumbers && !enableRowExpansion;
             const isLastDataCell = cellIndex === row.getVisibleCells().length - 1 && !showDeleteRow;
             const cellLocation = isFirstDataCell ? "first" : isLastDataCell ? "last" : "middle";
             const stickyStyle = getStickyStyle(cell.column.id);
+            const columnAlign = resolveColumnAlign({
+              ...(cell.column.columnDef as DataTableColumn),
+              id: cell.column.id,
+            });
 
             return (
               <Table.Cell
                 key={cell.id}
+                {...cellRenderProps}
                 {...cellFlexProps}
                 {...getColSizeProps(cell.column)}
                 cellHeight={cellHeight as any}
                 cellLocation={cellLocation}
+                justifyContent={alignToFlex(columnAlign)}
+                data-align={columnAlign}
+                {...(clipBodyCells ? { overflow: "hidden" as any } : {})}
                 {...(isWeb && stickyStyle
                   ? {
                       style: {
                         position: "sticky",
-                        ...("left" in stickyStyle && { left: stickyStyle.left }),
-                        ...("right" in stickyStyle && { right: stickyStyle.right }),
+                        ...("insetInlineStart" in stickyStyle && {
+                          insetInlineStart: stickyStyle.insetInlineStart,
+                        }),
+                        ...("insetInlineEnd" in stickyStyle && {
+                          insetInlineEnd: stickyStyle.insetInlineEnd,
+                        }),
                         zIndex: 2,
                         backgroundColor: "var(--color2)",
                       } as React.CSSProperties,
@@ -571,6 +801,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
 
           {showDeleteRow && !readOnly && (
             <Table.Cell
+              {...cellRenderProps}
               cellWidth={60}
               cellHeight={cellHeight as any}
               cellLocation="last"
@@ -580,9 +811,11 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                 chromeless
                 circular
                 icon={TrashIcon}
-                disabled={data.length <= minRows}
+                disabled={disabled || data.length <= minRows}
                 onPress={() => handleDeleteRow(rowIndex)}
-                aria-label={t("Delete row")}
+                aria-label={withInterp(t("Delete row {{row}}", { row: rowIndex + 1 }), {
+                  row: rowIndex + 1,
+                })}
               />
             </Table.Cell>
           )}
@@ -590,10 +823,12 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
       );
     },
     [
+      enableRowSelection,
       showRowNumbers,
       enableRowExpansion,
       showDeleteRow,
       readOnly,
+      disabled,
       cellHeight,
       knobProps.sizeToken,
       cellFlexProps,
@@ -603,14 +838,25 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
       handleDeleteRow,
       data.length,
       minRows,
+      isCompact,
       t,
+      ExpandCaretIcon,
+      expandedCaretRotation,
+      clipBodyCells,
     ],
   );
 
+  // Chip press → toolbar filter editor channel (DataTableFilterButton consumes)
+  const [filterEditTarget, setFilterEditTarget] = useState<FilterEditTarget | null>(null);
+  const filterUi = useMemo<DataTableFilterUi>(
+    () => ({ editTarget: filterEditTarget, requestEdit: setFilterEditTarget }),
+    [filterEditTarget],
+  );
+
   // Build the state context value
   const stateContextValue = useMemo<DataTableStateContextValue<TData>>(
-    () => ({ table, state, actions, computed }),
-    [table, state, actions, computed],
+    () => ({ table, state, actions, computed, selectAllScope, filterUi }),
+    [table, state, actions, computed, selectAllScope, filterUi],
   );
 
   const renderToolbarComponent = () => {
@@ -650,11 +896,12 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
   };
 
   const renderPaginationComponent = () => {
+    const resolvedPageSizeOptions = pageSizeOptions ?? [10, 20, 50, 100];
     if (renderPagination) {
       return renderPagination({
         pagination: state.pagination,
         onPaginationChange: actions.setPagination,
-        pageSizeOptions: [10, 20, 50, 100],
+        pageSizeOptions: resolvedPageSizeOptions,
       });
     }
 
@@ -662,7 +909,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
       <DataTablePagination
         pagination={state.pagination}
         onPaginationChange={actions.setPagination}
-        pageSizeOptions={[10, 20, 50, 100]}
+        pageSizeOptions={resolvedPageSizeOptions}
         compact
       />
     );
@@ -681,8 +928,61 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
     const hasToolbar = enableGlobalSearch || enableFiltering || enableViews;
     const scrollContainerRef = useRef<HTMLDivElement>(null);
 
-    // Enable drag-to-scroll when in scroll layout mode
-    useDragScroll(scrollContainerRef, columnLayout === "scroll" && isWeb && !isSSR);
+    // DF-12 / Axiom 6 HONEST STATE — a height-constrained body clips rows
+    // silently: macOS overlay scrollbars paint nothing at rest, so the frame
+    // reads "this is all the rows". Track whether rows are cut off below the
+    // fold and paint a bottom fade until the user reaches the last row.
+    const tableBodyRef = useRef<HTMLElement | null>(null);
+    const [bodyClipped, setBodyClipped] = useState(false);
+    useEffect(() => {
+      if (!isWeb || isSSR || showCards) return;
+      const el = tableBodyRef.current;
+      if (!el) return;
+      const update = () => {
+        setBodyClipped(el.scrollHeight - (el.scrollTop + el.clientHeight) > 1);
+      };
+      update();
+      el.addEventListener("scroll", update, { passive: true });
+      const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(update) : null;
+      ro?.observe(el);
+      return () => {
+        el.removeEventListener("scroll", update);
+        ro?.disconnect();
+      };
+    }, [tableRows.length, showCards]);
+
+    // Enable drag-to-scroll in the horizontal-overflow modes (scroll layout
+    // and column pinning share the content-View scrollport).
+    useDragScroll(scrollContainerRef, hScroll && !isSSR);
+
+    // Visible row range for the footer summary (1-based, clamped to total).
+    const rangeTotal = state.pagination.totalCount ?? 0;
+    const rangeStart =
+      rangeTotal === 0 ? 0 : state.pagination.pageIndex * state.pagination.pageSize + 1;
+    const rangeEnd = Math.min(
+      (state.pagination.pageIndex + 1) * state.pagination.pageSize,
+      rangeTotal,
+    );
+
+    // W9 / DG-ST-01,02,04 / DG-TBL-06 — first-class async states.
+    // Error wins over empty chrome; initial load uses a table-shaped skeleton.
+    // Selection API untouched.
+    const resolvedAriaLabel = ariaLabel || t("Data table");
+    if (state.error) {
+      return (
+        <AsyncBoundary
+          error={state.error}
+          onRetry={onRetry}
+          layout="table"
+          errorTitle={t("Couldn't load table")}
+          compact
+          aria-label={resolvedAriaLabel}
+        />
+      );
+    }
+    if ((state.isLoading || infinite?.isInitialLoading) && tableRows.length === 0) {
+      return <AsyncBoundary loading layout="table" aria-label={resolvedAriaLabel} />;
+    }
 
     return (
       <DataTableContext.Provider size={resolvedSize} compact={isCompact}>
@@ -691,34 +991,101 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
             flexDirection="column"
             gap={0}
             width="100%"
-            flex={1}
+            // flexBasis auto (not flex={1} basis-0): in an auto-height parent
+            // a basis-0 chain resolves to 0 and the whole table collapses to
+            // a sliver; basis auto sizes to content there while still filling
+            // sized parents (grow 1) and allowing inner scroll (shrink 1 +
+            // minHeight 0).
+            flexGrow={1}
+            flexShrink={1}
+            flexBasis="auto"
             minHeight={0}
             {...(isWeb && className ? { className } : {})}
-            aria-label={ariaLabel || "Data table"}
+            aria-label={resolvedAriaLabel}
             aria-describedby={ariaDescribedBy}
             aria-live="polite"
             aria-atomic="false"
+            // UX-011 / Axiom 6 HONEST STATE: the advertised `disabled` prop
+            // makes the whole assembly inert and says so. `inert` (React 19)
+            // blocks pointer, keyboard, and AT for every control inside —
+            // including chrome (toolbar/pagination) that has no disabled API
+            // of its own. LC-40 assembly fragment carries the dimWhole
+            // visual; keepLabel washes per-control chrome instead (cells,
+            // checkboxes, buttons receive their own `disabled` below).
+            aria-disabled={disabled || undefined}
+            {...(disabled
+              ? {
+                  ...disabledState.assemblyKnobProps,
+                  cursor: "not-allowed" as const,
+                  ...(isWeb ? ({ inert: true } as any) : { pointerEvents: "none" as const }),
+                }
+              : {})}
             {...props}
           >
-            {/* Toolbar */}
-            {hasToolbar && renderToolbarComponent()}
+            {/* 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>
+            )}
+
+            {/* 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}
 
             {/* Compound sub-components (children) */}
             {children}
 
-            {/* Mobile Card View */}
-            {sm === false ? (
-              <DataTableMobileCards
-                tableRows={tableRows}
-                showRowNumbers={showRowNumbers}
-                showDeleteRow={showDeleteRow}
-                readOnly={readOnly}
-                dataLength={tableData.length}
-                minRows={minRows}
-                hasActiveFilters={computed.hasActiveFilters}
-                renderCellContent={renderCellContent}
-                onDeleteRow={effectiveHandleDeleteRow}
-              />
+            {/* Card List View (layout="cards" or auto below $sm) */}
+            {showCards ? (
+              <>
+                {/* Header affordances (sort / per-column filter) live in the
+                    grid headers; the card list restores them here. */}
+                <DataTableCardControls
+                  table={table}
+                  enableSorting={enableSorting}
+                  enableFiltering={enableFiltering}
+                  availableColumns={cardFilterColumns}
+                  compact={isCompact}
+                  disabled={disabled}
+                />
+                <DataTableMobileCards
+                  tableRows={tableRows}
+                  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}
+                />
+              </>
             ) : (
               /* Table View */
               <View
@@ -732,9 +1099,18 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                 }}
                 flexDirection="column"
                 width="100%"
-                flex={1}
+                flexGrow={1}
+                flexShrink={1}
+                flexBasis="auto"
                 minHeight={0}
-                aria-label={`${ariaLabel || "Data table"} content`}
+                // 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}
                 onKeyDown={
                   enableKeyboardNavigation && !isSSR ? keyboardNav.handleKeyDown : undefined
@@ -756,21 +1132,21 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                   borderBottomLeftRadius={knobProps.borderRadius.borderRadius}
                   borderBottomRightRadius={knobProps.borderRadius.borderRadius}
                   marginBottom={0}
-                  aria-label={ariaLabel || "Data table"}
+                  aria-label={resolvedAriaLabel}
                   aria-rowcount={computed.totalPages * state.pagination.pageSize}
                   aria-colcount={
                     table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter
                   }
                   width="100%"
-                  {...(columnLayout === "scroll" && isWeb
-                    ? {
-                        overflowX: "auto" as any,
-                        style: { minWidth: "max-content", width: "max-content" },
-                      }
-                    : {})}
+                  {...(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 } : {})}
                 >
                   {/* Table Header */}
-                  <Table.Head zIndex="$1" aria-label="Table headers">
+                  <Table.Head zIndex="$1" aria-label={t("Table headers")}>
                     {headerGroups.map((headerGroup: any) => {
                       rowCounter.current++;
                       return (
@@ -796,11 +1172,43 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                             "aria-rowindex": rowCounter.current,
                           } as any)}
                         >
+                          {enableRowSelection && (
+                            <Table.HeaderCell
+                              cellWidth={SELECTION_COL_WIDTH}
+                              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={50}
                               cellHeight={cellHeight as any}
-                              cellLocation="first"
+                              cellLocation={enableRowSelection ? "middle" : "first"}
                             >
                               <Text fontSize="$4" fontWeight="600">
                                 #
@@ -812,7 +1220,9 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                             <Table.HeaderCell
                               cellWidth={32}
                               cellHeight={cellHeight as any}
-                              cellLocation={showRowNumbers ? "middle" : "first"}
+                              cellLocation={
+                                enableRowSelection || showRowNumbers ? "middle" : "first"
+                              }
                             >
                               <View width={14} />
                             </Table.HeaderCell>
@@ -828,13 +1238,19 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                             const colMaxSize =
                               header.column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER;
                             const stickyStyle = getStickyStyle(header.column.id);
-                            const columnField = getColumnField(
-                              header.column.columnDef as DataTableColumn,
-                            );
-                            const isNumeric = isNumericField(columnField);
+                            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 && !showRowNumbers && !enableRowExpansion;
+                              headerIndex === 0 &&
+                              !enableRowSelection &&
+                              !showRowNumbers &&
+                              !enableRowExpansion;
                             const isLastHeaderCell =
                               headerIndex === headerGroup.headers.length - 1 &&
                               !(showDeleteRow && !readOnly);
@@ -849,13 +1265,45 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                                 key={header.id}
                                 id={`${header.column.id}-header`}
                                 onPress={
-                                  isSortableHeader
+                                  isSortableHeader && !disabled
                                     ? header.column.getToggleSortingHandler()
                                     : undefined
                                 }
-                                cursor={isSortableHeader ? "pointer" : "default"}
+                                // 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"
@@ -865,7 +1313,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                                         : "none"
                                     : undefined
                                 }
-                                {...(dnd
+                                {...(dnd && !disabled
                                   ? ({
                                       draggable: true,
                                       onDragStart: (e: React.DragEvent<HTMLElement>) =>
@@ -881,9 +1329,11 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                                   ? {
                                       style: {
                                         position: "sticky",
-                                        ...("left" in stickyStyle && { left: stickyStyle.left }),
-                                        ...("right" in stickyStyle && {
-                                          right: (stickyStyle as any).right,
+                                        ...("insetInlineStart" in stickyStyle && {
+                                          insetInlineStart: stickyStyle.insetInlineStart,
+                                        }),
+                                        ...("insetInlineEnd" in stickyStyle && {
+                                          insetInlineEnd: (stickyStyle as any).insetInlineEnd,
                                         }),
                                         zIndex: 2,
                                         backgroundColor: "var(--color2)",
@@ -895,15 +1345,15 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                                   flexDirection="row"
                                   gap="$2"
                                   alignItems="center"
-                                  justifyContent={isNumeric ? "flex-end" : "space-between"}
+                                  justifyContent={isRightAligned ? "flex-end" : "space-between"}
                                   flex={1}
                                 >
                                   <View
                                     flexDirection="row"
                                     gap="$2"
                                     alignItems="center"
-                                    flex={isNumeric ? undefined : 1}
-                                    justifyContent={isNumeric ? "flex-end" : undefined}
+                                    flex={isRightAligned ? undefined : 1}
+                                    justifyContent={isRightAligned ? "flex-end" : undefined}
                                   >
                                     <Text fontSize="$4" userSelect="none">
                                       {header.isPlaceholder
@@ -973,16 +1423,10 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                                       />
                                     )}
                                     {pinning && enableColumnPinning && (
-                                      <>
-                                        <pinning.PinButton
-                                          columnId={header.column.id}
-                                          position="left"
-                                        />
-                                        <pinning.PinButton
-                                          columnId={header.column.id}
-                                          position="right"
-                                        />
-                                      </>
+                                      /* One compact cycle control per header
+                                         (left → right → unpin) — two full
+                                         buttons crowded the header (owner). */
+                                      <pinning.PinButton columnId={header.column.id} />
                                     )}
                                   </View>
                                 </View>
@@ -1000,7 +1444,14 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                                     aria-valuenow={colSize}
                                     aria-valuemin={colMinSize}
                                     aria-valuemax={colMaxSize}
-                                    aria-label={`Resize ${header.column.columnDef.header || header.column.id} column`}
+                                    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}
                                   />
@@ -1022,29 +1473,60 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                   </Table.Head>
 
                   {/* Table Body */}
-                  <Table.Body aria-label="Table data">
+                  <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;
+                    }}
+                  >
                     {tableRows.length === 0 ? (
                       <Table.Row>
                         <Table.Cell>
-                          <View
-                            padding="$8"
-                            alignItems="center"
-                            justifyContent="center"
+                          <EmptyState
+                            compact
                             aria-live="polite"
-                          >
-                            <Text color="$color10" fontSize="$4">
-                              {computed.hasActiveFilters
+                            title={
+                              computed.hasActiveFilters
                                 ? t("No results found")
-                                : t("No data available")}
-                            </Text>
-                          </View>
+                                : t("No data available")
+                            }
+                          />
                         </Table.Cell>
                       </Table.Row>
                     ) : isVirtualized ? (
-                      <Table.Row>
+                      <Table.Row role="presentation">
                         <Table.Cell
+                          role="presentation"
                           padding={0}
-                          style={{ display: "block", overflow: "hidden" } as any}
+                          // 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 +
@@ -1070,6 +1552,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                             extraColumnsBefore={extraColumnsBefore}
                             extraColumnsAfter={extraColumnsAfter}
                             table={table}
+                            hasInfiniteTail={hasInfiniteTail}
                           />
                         </Table.Cell>
                       </Table.Row>
@@ -1099,9 +1582,22 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                                     flexDirection="row"
                                     alignItems="center"
                                     gap="$2"
-                                    paddingLeft={indent}
+                                    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() ? "▼" : "▶"}
@@ -1123,9 +1619,9 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                                 keyboardNav.isNavigating &&
                                 index === keyboardNav.focusedRowIndex
                                   ? "$color4"
-                                  : index % 2 === 0
-                                    ? "$color1"
-                                    : "$color2"
+                                  : tableZebraOn && index % 2 === 1
+                                    ? "$color2"
+                                    : "$color1"
                               }
                               {...({ animation: "quick" } as any)}
                               hoverStyle={{ backgroundColor: "$color3" }}
@@ -1139,8 +1635,17 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                               }
                               key={`${row.id}-${index}`}
                               aria-rowindex={rowCounter.current}
-                              aria-label={`Row ${index + 1}`}
+                              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)}
                             >
                               {renderRowContent(row, index, isLastRow)}
                             </Table.Row>
@@ -1184,10 +1689,18 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                             flexBasis={0}
                             minHeight={0}
                           >
+                            {enableRowSelection && (
+                              <Table.Cell
+                                cellWidth={SELECTION_COL_WIDTH}
+                                cellLocation="first"
+                                padding={0}
+                                minHeight={0}
+                              />
+                            )}
                             {showRowNumbers && (
                               <Table.Cell
                                 cellWidth={50}
-                                cellLocation="first"
+                                cellLocation={enableRowSelection ? "middle" : "first"}
                                 padding={0}
                                 minHeight={0}
                               />
@@ -1195,14 +1708,19 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                             {enableRowExpansion && (
                               <Table.Cell
                                 cellWidth={32}
-                                cellLocation={showRowNumbers ? "middle" : "first"}
+                                cellLocation={
+                                  enableRowSelection || showRowNumbers ? "middle" : "first"
+                                }
                                 padding={0}
                                 minHeight={0}
                               />
                             )}
                             {headerGroups[0]?.headers.map((header: any, headerIndex: number) => {
                               const isFirstDataCell =
-                                headerIndex === 0 && !showRowNumbers && !enableRowExpansion;
+                                headerIndex === 0 &&
+                                !enableRowSelection &&
+                                !showRowNumbers &&
+                                !enableRowExpansion;
                               const isLastDataCell =
                                 headerIndex === headerGroups[0].headers.length - 1 &&
                                 !(showDeleteRow && !readOnly);
@@ -1234,6 +1752,34 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                         )}
                       </>
                     )}
+                    {/* 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
+                        (negative margin overlays the last visible row).
+                        Rendered as a Table.Row: a <div> is not a valid child
+                        of the real <tbody> (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={28}
+                        marginTop={-28}
+                        flexShrink={0}
+                        zIndex={2}
+                        pointerEvents="none"
+                        {...({ "data-table-clip-affordance": "true" } as any)}
+                        style={{
+                          background:
+                            "linear-gradient(to bottom, rgba(0,0,0,0), var(--background))",
+                        }}
+                      />
+                    )}
                   </Table.Body>
 
                   {/* Table Footer */}
@@ -1256,12 +1802,98 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
               </View>
             )}
 
+            {/* Infinite mode tail: sentinel (non-virtualized trigger), append
+                skeleton (bounded by the actual load — no infinite spinner),
+                and an honest, announced end-of-data state (DG-ST-01/04). */}
+            {infinite ? (
+              <View flexDirection="column" width="100%">
+                {!isVirtualized && !infinite.exhausted && 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}
+                {!isVirtualized && infinite.isAppending ? (
+                  <View
+                    flexDirection="column"
+                    width="100%"
+                    {...knobProps.gap}
+                    paddingVertical="$2"
+                    aria-hidden
+                    {...({ "data-testid": "infinite-append-skeleton" } as any)}
+                  >
+                    {Array.from({ length: 3 }).map((_, i) => (
+                      <Skeleton key={i} width="100%" height={rowHeightPx - 8} />
+                    ))}
+                  </View>
+                ) : null}
+                <Text
+                  role="status"
+                  aria-live="polite"
+                  textAlign="center"
+                  paddingVertical="$2"
+                  fontSize={knobProps.sizeToken}
+                  color="$color10"
+                  {...({ "data-testid": "infinite-status" } as any)}
+                >
+                  {/* Numeric labels are bidi-isolated so RTL contexts keep
+                      the interpolated runs in order (FSI…PDI). */}
+                  {infinite.isAppending
+                    ? t("Loading more rows…")
+                    : infinite.exhausted
+                      ? typeof infinite.totalCount === "number" && infinite.totalCount > 0
+                        ? bidiIsolate(
+                            withInterp(
+                              t("All {{count}} rows loaded", { count: infinite.totalCount }),
+                              {
+                                count: infinite.totalCount,
+                              },
+                            ),
+                          )
+                        : t("End of results")
+                      : typeof infinite.totalCount === "number"
+                        ? bidiIsolate(
+                            withInterp(
+                              t("Showing {{visible}} of {{total}} rows", {
+                                visible: tableRows.length,
+                                total: infinite.totalCount,
+                              }),
+                              { visible: tableRows.length, total: infinite.totalCount },
+                            ),
+                          )
+                        : bidiIsolate(
+                            withInterp(
+                              t("Showing {{visible}} rows", { visible: tableRows.length }),
+                              {
+                                visible: tableRows.length,
+                              },
+                            ),
+                          )}
+                </Text>
+              </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={maxRows !== undefined && tableData.length >= maxRows}
+                  disabled={disabled || (maxRows !== undefined && tableData.length >= maxRows)}
                   onPress={effectiveHandleAddRow}
                   aria-label={t("Add Row")}
                 >
@@ -1270,8 +1902,42 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
               </View>
             )}
 
-            {/* Pagination */}
-            {enablePagination && <View paddingTop="$3">{renderPaginationComponent()}</View>}
+            {/* Pagination footer (pages mode only; infinite replaces it with the tail status) */}
+            {enablePagination && !infinite && (
+              <View
+                paddingTop="$3"
+                flexDirection="row"
+                alignItems="center"
+                justifyContent="space-between"
+                flexWrap="wrap"
+                {...knobProps.gap}
+                {...(disabled ? disabledState.chromeKnobProps : {})}
+              >
+                {renderPaginationComponent()}
+                {/* DF-12 / Axiom 6: visible range/total — the footer states how
+                    many rows exist even when a height-constrained body clips
+                    some below the fold ("1–6 of 6", not "what you see is all"). */}
+                <Text
+                  fontSize={knobProps.sizeToken}
+                  color="$color11"
+                  aria-live="polite"
+                  {...({ "data-table-range": "true" } as any)}
+                >
+                  {/* Bidi-isolated: an RTL paragraph would otherwise reorder
+                      the latin/numeric runs ("1–5 of 5" → "of 5 5–1"). */}
+                  {bidiIsolate(
+                    withInterp(
+                      t("{{start}}–{{end}} of {{total}}", {
+                        start: rangeStart,
+                        end: rangeEnd,
+                        total: rangeTotal,
+                      }),
+                      { start: rangeStart, end: rangeEnd, total: rangeTotal },
+                    ),
+                  )}
+                </Text>
+              </View>
+            )}
 
             {/* Loading State */}
             {state.isLoading && (
@@ -1286,7 +1952,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                 zIndex={zIndex.loading}
                 aria-busy={true}
                 aria-live="assertive"
-                aria-label="Loading table data"
+                aria-label={t("Loading table data")}
                 role="status"
               >
                 <Spinner size="large" color="$color10" />
@@ -1309,16 +1975,16 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
           return renderInner(
             formData,
             () => {
-              if (readOnly || (maxRows && formData.length >= maxRows)) return;
+              if (readOnly || disabled || (maxRows && formData.length >= maxRows)) return;
               const newRow = { ...defaultRow, idx: formData.length + 1 } as unknown as TData;
               setFormData([...formData, newRow]);
             },
             (idx: number) => {
-              if (readOnly || formData.length <= minRows) return;
+              if (readOnly || disabled || formData.length <= minRows) return;
               setFormData(formData.filter((_, i) => i !== idx));
             },
             async (rowIndex: number, columnId: string, newValue: any) => {
-              if (readOnly) return;
+              if (readOnly || disabled) return;
               const previousValue = formData[rowIndex]?.[columnId];
               if (onCellChange) {
                 const result = await onCellChange(rowIndex, columnId, newValue, previousValue);