@multiplatform.one/table 6.0.4 → 6.3.0

package/dist/esm/components/DataTable/DataTableRoot.native.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import { CaretDownIcon, CaretRightIcon, CaretUpDownIcon, PlusIcon, TrashIcon } from "@phosphor-icons/react";
-import { Button, Field, useFormField, zIndex } from "@multiplatform.one/forms";
+import { CaretDownIcon, CaretLeftIcon, CaretRightIcon, CaretUpDownIcon, PlusIcon, TrashIcon } from "@phosphor-icons/react";
+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.native.js";
 import { useDragScroll } from "../../hooks/useDragScroll.native.js";
@@ -15,54 +15,33 @@ import { useDataTableKeyboard } from "../../hooks/useDataTableKeyboard.native.js
 import { DataTableColumnPinning } from "../DataTableColumnPinning/index.native.js";
 import { DataTablePagination } from "../DataTablePagination/index.native.js";
 import { DataTableToolbar } from "../DataTableToolbar/index.native.js";
+import { DataTableBulkActions } from "../DataTableBulkActions/index.native.js";
 import { DataTableCell } from "../DataTableCell/index.native.js";
 import { ColumnHeaderFilter } from "../ColumnHeaderFilter/index.native.js";
+import { DataTableFilterChips } from "../DataTableFilterChips/index.native.js";
 import { Table } from "@multiplatform.one/table-primitives";
 import { DataTableContext } from "./DataTableContext.native.js";
 import { DataTableStateContext } from "./DataTableStateContext.native.js";
+import { DataTableCardControls } from "./DataTableCardControls.native.js";
 import { DataTableMobileCards } from "./DataTableMobileCards.native.js";
 import { DataTableVirtualized } from "./DataTableVirtualized.native.js";
+import { alignToFlex, getDefaultColumnAlign } from "../../utils/columnAlign.native.js";
+import { mapFieldToFilterType } from "../../utils/filterFields.native.js";
+import { INFINITE_TRIGGER_ROWS } from "../../utils/paginationDefaults.native.js";
+import { bidiIsolate, withInterp } from "../../utils/withInterp.native.js";
+var SELECTION_COL_WIDTH = 40;
 function getColumnField(column) {
   var _column_field;
   return (_column_field = column.field) !== null && _column_field !== void 0 ? _column_field : "input";
 }
-function isNumericField(field) {
-  switch (field) {
-    case "stepper":
-    case "slider":
-    case "progress":
-    case "rating":
-    case "duration":
-      return true;
-    default:
-      return false;
-  }
-}
-function mapFieldToFilterType(field) {
-  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";
-  }
+function resolveColumnAlign(column) {
+  return getDefaultColumnAlign({
+    id: typeof column.id === "string" ? column.id : void 0,
+    align: column.align,
+    field: getColumnField(column),
+    fieldProps: column.fieldProps,
+    meta: column.meta
+  });
 }
 var rowHeightPx = 40;
 function DataTableRoot(param) {
@@ -71,6 +50,7 @@ function DataTableRoot(param) {
     columns,
     initialState,
     onStateChange,
+    onRetry,
     syncWithUrl = false,
     urlDebounceMs = 500,
     urlStrategy,
@@ -78,14 +58,19 @@ function DataTableRoot(param) {
     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,
@@ -96,6 +81,9 @@ function DataTableRoot(param) {
     maxPinnedColumns = 3,
     enableGrouping = false,
     enableKeyboardNavigation = false,
+    enableRowSelection = false,
+    selectAllScope: selectAllScopeProp,
+    bulkActions,
     readOnly = false,
     onCellChange,
     name,
@@ -115,7 +103,7 @@ function DataTableRoot(param) {
     className,
     size,
     compact = false,
-    disabled: _disabled = false,
+    disabled = false,
     children,
     "aria-label": ariaLabel,
     "aria-describedby": ariaDescribedBy,
@@ -127,13 +115,21 @@ function DataTableRoot(param) {
   var {
     sm
   } = useMedia();
+  var showCards = layout === "cards" || layout === "auto" && sm === false;
   var {
-    knobProps
+    knobProps,
+    disabledState
   } = useResolvedKnobs({
     intent: void 0,
     component: "DataTable",
     compact
   });
+  var isRTL = useDirection() === "rtl";
+  var ExpandCaretIcon = isRTL ? CaretLeftIcon : CaretRightIcon;
+  var expandedCaretRotation = isRTL ? "rotate(-90deg)" : "rotate(90deg)";
+  var tableZebraOn = knobProps.tableZebra === "on";
+  var bulkBarPlacement = knobProps.bulkBarPlacement === "bottom" ? "bottom" : "top";
+  var selectAllScope = selectAllScopeProp !== null && selectAllScopeProp !== void 0 ? selectAllScopeProp : knobProps.selectAllScope === "filtered" ? "filtered" : "page";
   var {
     resolvedForm
   } = useFormField({
@@ -157,8 +153,11 @@ function DataTableRoot(param) {
     manualPagination,
     manualSorting,
     enableFiltering,
+    filterableFields,
     enableSorting,
     enablePagination,
+    paginationMode,
+    loadPage,
     enableColumnVisibility,
     enableColumnOrdering,
     enableColumnResizing,
@@ -175,13 +174,26 @@ function DataTableRoot(param) {
     maxPinnedColumns,
     enableGrouping,
     enableKeyboardNavigation,
+    enableRowSelection,
     rowCount,
     pageCount
   });
+  var resolvedBulkActions = bulkActions !== null && bulkActions !== void 0 ? bulkActions : [];
+  var selectAllChecked = enableRowSelection && (selectAllScope === "filtered" ? table.getIsAllRowsSelected() : table.getIsAllPageRowsSelected());
+  var selectAllIndeterminate = enableRowSelection && (selectAllScope === "filtered" ? table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected() : table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected());
+  var toggleSelectAll = useCallback(function () {
+    if (selectAllScope === "filtered") {
+      table.toggleAllRowsSelected();
+    } else {
+      table.toggleAllPageRowsSelected();
+    }
+  }, [selectAllScope, table]);
   var resolvedSize = size !== null && size !== void 0 ? size : knobProps.sizeToken === "$3" ? "sm" : knobProps.sizeToken === "$5" ? "lg" : "md";
   var cellHeight = resolvedSize === "sm" ? "$3" : resolvedSize === "lg" ? "$5" : "$4";
   var headerGroups = table.getHeaderGroups();
-  var tableRows = table.getRowModel().rows;
+  var rowModelRows = table.getRowModel().rows;
+  var infinite = computed.infinite;
+  var tableRows = infinite ? rowModelRows.slice(0, infinite.visibleRowCount) : rowModelRows;
   var footerGroups = table.getFooterGroups();
   var hasFooter = footerGroups.some(function (group) {
     return group.headers.some(function (header) {
@@ -192,14 +204,27 @@ function DataTableRoot(param) {
   var rowCounter = useRef(-1);
   rowCounter.current = -1;
   var getColSizeProps = useCallback(function (col) {
+    var _col_getIsPinned;
     var hasExplicitSize = col.columnDef.size != null;
-    if (hasExplicitSize || enableColumnResizing) {
+    var isPinned = enableColumnPinning && Boolean((_col_getIsPinned = col.getIsPinned) === null || _col_getIsPinned === void 0 ? void 0 : _col_getIsPinned.call(col));
+    if (isPinned) {
+      var size2 = col.getSize();
+      return {
+        width: size2,
+        minWidth: size2,
+        maxWidth: size2,
+        flexGrow: 0,
+        flexShrink: 0,
+        flexBasis: "auto"
+      };
+    }
+    if (hasExplicitSize || enableColumnResizing || columnLayout === "scroll") {
       return {
         width: col.getSize()
       };
     }
     return {};
-  }, [enableColumnResizing]);
+  }, [enableColumnResizing, columnLayout, enableColumnPinning]);
   var dnd = useMemo(function () {
     if (!enableColumnOrdering || !isWeb) return null;
     return {
@@ -232,9 +257,10 @@ function DataTableRoot(param) {
     };
   }, [enableColumnOrdering, table]);
   var bodyScrollRef = useRef(null);
-  var isVirtualized = enableVirtualization && virtualizationHeight != null && virtualizationHeight > 0 && typeof window !== "undefined";
+  var isVirtualized = enableVirtualization && virtualizationHeight != null && virtualizationHeight > 0 && isWeb;
+  var hasInfiniteTail = Boolean(infinite && !infinite.exhausted && tableRows.length > 0);
   var virtualizer = useVirtualizer({
-    count: tableRows.length,
+    count: tableRows.length + (hasInfiniteTail ? 1 : 0),
     getScrollElement: function getScrollElement() {
       return bodyScrollRef.current;
     },
@@ -246,21 +272,76 @@ function DataTableRoot(param) {
   });
   var virtualItems = isVirtualized ? virtualizer.getVirtualItems() : [];
   var totalSize = isVirtualized ? virtualizer.getTotalSize() : 0;
+  var loadMoreRef = useRef(void 0);
+  loadMoreRef.current = infinite === null || infinite === void 0 ? void 0 : infinite.loadMore;
+  var lastVirtualIndex = virtualItems.length ? virtualItems[virtualItems.length - 1].index : -1;
+  React.useEffect(function () {
+    if (!infinite || !isVirtualized || infinite.exhausted) return;
+    if (lastVirtualIndex < 0) return;
+    if (lastVirtualIndex >= tableRows.length - INFINITE_TRIGGER_ROWS) {
+      var _loadMoreRef_current;
+      (_loadMoreRef_current = loadMoreRef.current) === null || _loadMoreRef_current === void 0 ? void 0 : _loadMoreRef_current.call(loadMoreRef);
+    }
+  }, [infinite === null || infinite === void 0 ? void 0 : infinite.exhausted, isVirtualized, lastVirtualIndex, tableRows.length, !!infinite]);
+  var sentinelRef = useRef(null);
+  React.useEffect(function () {
+    if (!infinite || isVirtualized || infinite.exhausted) return;
+    if (!isWeb || typeof IntersectionObserver === "undefined") return;
+    var node = sentinelRef.current;
+    if (!node) return;
+    var observer = new IntersectionObserver(function (entries) {
+      var _iteratorNormalCompletion = true,
+        _didIteratorError = false,
+        _iteratorError = void 0;
+      try {
+        for (var _iterator = entries[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+          var entry = _step.value;
+          var _loadMoreRef_current;
+          if (entry.isIntersecting) (_loadMoreRef_current = loadMoreRef.current) === null || _loadMoreRef_current === void 0 ? void 0 : _loadMoreRef_current.call(loadMoreRef);
+        }
+      } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion && _iterator.return != null) {
+            _iterator.return();
+          }
+        } finally {
+          if (_didIteratorError) {
+            throw _iteratorError;
+          }
+        }
+      }
+    }, {
+      rootMargin: `${INFINITE_TRIGGER_ROWS * rowHeightPx}px`
+    });
+    observer.observe(node);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [!!infinite, infinite === null || infinite === void 0 ? void 0 : infinite.exhausted, isVirtualized, tableRows.length]);
   var isFlexLayout = columnLayout !== "auto";
   var displayMode = isFlexLayout ? "flex" : "table";
+  var hScroll = isWeb && isFlexLayout && (columnLayout === "scroll" || enableColumnPinning);
+  var clipBodyCells = hScroll;
   var cellFlexProps = useMemo(function () {
     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") {
+      return {
+        flexGrow: 0,
+        flexShrink: 0,
+        flexBasis: "auto",
+        minWidth: 80
+      };
+    }
+    if (enableColumnResizing) {
+      return {
+        flexGrow: 0,
+        flexShrink: 0,
+        flexBasis: "auto"
+      };
+    }
     return {
       flex: 1,
       flexShrink: 1,
@@ -269,16 +350,29 @@ function DataTableRoot(param) {
       minWidth: 0
     };
   }, [isFlexLayout, columnLayout, enableColumnResizing]);
-  var pinning = useMemo(function () {
-    return enableColumnPinning ? DataTableColumnPinning({
-      table,
-      maxPinnedColumns,
-      allowPinning: true
-    }) : null;
-  }, [enableColumnPinning, table, maxPinnedColumns]);
+  var cardFilterColumns = useMemo(function () {
+    return columns.filter(function (col) {
+      return col.enableColumnFilter !== false;
+    }).map(function (col) {
+      return {
+        id: col.id || col.accessorKey || "",
+        label: typeof col.header === "string" ? col.header : col.id || col.accessorKey || "",
+        type: mapFieldToFilterType(col.field)
+      };
+    }).filter(function (col) {
+      return col.id;
+    });
+  }, [columns]);
+  var pinningHelpers = DataTableColumnPinning({
+    table,
+    maxPinnedColumns,
+    allowPinning: true,
+    disabled
+  });
+  var pinning = enableColumnPinning ? pinningHelpers : null;
   var keyboardNav = useDataTableKeyboard({
     table,
-    enabled: enableKeyboardNavigation,
+    enabled: enableKeyboardNavigation && !disabled,
     viewportHeight: virtualizationHeight !== null && virtualizationHeight !== void 0 ? virtualizationHeight : 400,
     onScrollToRow: isVirtualized ? function (idx) {
       return virtualizer.scrollToIndex(idx, {
@@ -291,8 +385,9 @@ function DataTableRoot(param) {
   });
   var handleCellChange = useCallback(async function (rowIndex, columnId, newValue) {
     var _data_rowIndex;
-    if (readOnly) return;
+    if (readOnly || disabled) return;
     var previousValue = (_data_rowIndex = data[rowIndex]) === null || _data_rowIndex === void 0 ? void 0 : _data_rowIndex[columnId];
+    if (Object.is(previousValue, newValue)) return;
     if (onCellChange) {
       var result = await onCellChange(rowIndex, columnId, newValue, previousValue);
       if (result === false) return;
@@ -305,9 +400,9 @@ function DataTableRoot(param) {
       };
       onDataChange(newData);
     }
-  }, [readOnly, data, onCellChange, isFormMode, onDataChange]);
+  }, [readOnly, disabled, data, onCellChange, isFormMode, onDataChange]);
   var handleAddRow = useCallback(function () {
-    if (readOnly || maxRows && data.length >= maxRows) return;
+    if (readOnly || disabled || maxRows && data.length >= maxRows) return;
     var newRow = {
       ...defaultRow,
       idx: data.length + 1
@@ -315,15 +410,15 @@ function DataTableRoot(param) {
     if (!isFormMode && onDataChange) {
       onDataChange([...data, newRow]);
     }
-  }, [readOnly, maxRows, data, defaultRow, isFormMode, onDataChange]);
+  }, [readOnly, disabled, maxRows, data, defaultRow, isFormMode, onDataChange]);
   var handleDeleteRow = useCallback(function (rowIndex) {
-    if (readOnly || data.length <= minRows) return;
+    if (readOnly || disabled || data.length <= minRows) return;
     if (!isFormMode && onDataChange) {
       onDataChange(data.filter(function (_, idx) {
         return idx !== rowIndex;
       }));
     }
-  }, [readOnly, minRows, data, isFormMode, onDataChange]);
+  }, [readOnly, disabled, minRows, data, isFormMode, onDataChange]);
   var isCompact = resolvedSize === "sm" || compact;
   var renderCellContent = useCallback(function (cell, rowIndex, rowData) {
     var _columnDef_fieldProps;
@@ -351,7 +446,9 @@ function DataTableRoot(param) {
         return handleCellChange(rowIndex, columnId, newValue);
       },
       readOnly,
+      disabled,
       columnId,
+      columnLabel: typeof columnDef.header === "string" ? columnDef.header : void 0,
       rowIndex,
       rowData,
       size: knobProps.sizeToken,
@@ -359,9 +456,9 @@ function DataTableRoot(param) {
       linkedValue,
       onLinkedChange
     });
-  }, [handleCellChange, readOnly, knobProps.sizeToken, isCompact]);
+  }, [handleCellChange, readOnly, disabled, knobProps.sizeToken, isCompact]);
   var isSSR = typeof window === "undefined";
-  var extraColumnsBefore = (showRowNumbers ? 1 : 0) + (enableRowExpansion ? 1 : 0);
+  var extraColumnsBefore = (enableRowSelection ? 1 : 0) + (showRowNumbers ? 1 : 0) + (enableRowExpansion ? 1 : 0);
   var extraColumnsAfter = showDeleteRow && !readOnly ? 1 : 0;
   var getStickyStyle = useCallback(function (columnId) {
     if (!enableColumnPinning || !pinning) return void 0;
@@ -379,11 +476,12 @@ function DataTableRoot(param) {
         var col = table.getColumn(leftPinned[i]);
         if (col) leftOffset += col.getSize();
       }
+      if (enableRowSelection) leftOffset += SELECTION_COL_WIDTH;
       if (enableRowExpansion) leftOffset += 32;
       if (showRowNumbers) leftOffset += 50;
       return {
         position: "sticky",
-        left: leftOffset,
+        insetInlineStart: leftOffset,
         zIndex: 2,
         backgroundColor: "$color2"
       };
@@ -397,29 +495,64 @@ function DataTableRoot(param) {
       if (showDeleteRow && !readOnly) rightOffset += 60;
       return {
         position: "sticky",
-        right: rightOffset,
+        insetInlineEnd: rightOffset,
         zIndex: 2,
         backgroundColor: "$color2"
       };
     }
     return void 0;
-  }, [enableColumnPinning, pinning, table, enableRowExpansion, showRowNumbers, showDeleteRow, readOnly]);
-  var renderRowContent = useCallback(function (row, rowIndex, _isLastRow) {
+  }, [enableColumnPinning, pinning, table, enableRowSelection, enableRowExpansion, showRowNumbers, showDeleteRow, readOnly]);
+  var renderRowContent = useCallback(
+  // `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.
+  function (row, rowIndex, _isLastRow, cellElement) {
     var rowData = row.original;
+    var cellRenderProps = cellElement ? {
+      render: cellElement
+    } : {};
     return /* @__PURE__ */_jsxs(_Fragment, {
-      children: [showRowNumbers && /* @__PURE__ */_jsx(Table.Cell, {
-        cellWidth: 50,
+      children: [enableRowSelection && /* @__PURE__ */_jsx(Table.Cell, {
+        ...cellRenderProps,
+        cellWidth: SELECTION_COL_WIDTH,
         cellHeight,
         cellLocation: "first",
+        justifyContent: "center",
+        children: /* @__PURE__ */_jsx(Checkbox, {
+          checked: row.getIsSelected(),
+          onChange: function onChange(checked) {
+            if (disabled) return;
+            row.toggleSelected(!!checked);
+          },
+          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
+        })
+      }), showRowNumbers && /* @__PURE__ */_jsx(Table.Cell, {
+        ...cellRenderProps,
+        cellWidth: 50,
+        cellHeight,
+        cellLocation: enableRowSelection ? "middle" : "first",
         children: /* @__PURE__ */_jsx(Text, {
           fontSize: knobProps.sizeToken,
           color: "$color10",
           children: rowIndex + 1
         })
       }), enableRowExpansion && /* @__PURE__ */_jsx(Table.Cell, {
+        ...cellRenderProps,
         cellWidth: 32 + row.depth * 20,
         cellHeight,
-        cellLocation: showRowNumbers ? "middle" : "first",
+        cellLocation: enableRowSelection || showRowNumbers ? "middle" : "first",
         paddingLeft: 0,
         paddingRight: 0,
         children: /* @__PURE__ */_jsxs(View, {
@@ -456,20 +589,30 @@ function DataTableRoot(param) {
             })
           }), row.getCanExpand() ? /* @__PURE__ */_jsx(View, {
             onPress: function onPress() {
-              return row.toggleExpanded();
+              if (disabled) return;
+              row.toggleExpanded();
             },
-            cursor: "pointer",
+            cursor: disabled ? "not-allowed" : "pointer",
+            "aria-disabled": disabled || void 0,
             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",
-            children: /* @__PURE__ */_jsx(CaretRightIcon, {
+            children: /* @__PURE__ */_jsx(ExpandCaretIcon, {
               size: 14,
               style: {
-                transform: row.getIsExpanded() ? "rotate(90deg)" : "none",
+                transform: row.getIsExpanded() ? expandedCaretRotation : "none",
                 transition: "transform 0.15s ease"
               }
             })
@@ -478,23 +621,33 @@ function DataTableRoot(param) {
           })]
         })
       }), row.getVisibleCells().map(function (cell, cellIndex) {
-        var isFirstDataCell = cellIndex === 0 && !showRowNumbers && !enableRowExpansion;
+        var isFirstDataCell = cellIndex === 0 && !enableRowSelection && !showRowNumbers && !enableRowExpansion;
         var isLastDataCell = cellIndex === row.getVisibleCells().length - 1 && !showDeleteRow;
         var cellLocation = isFirstDataCell ? "first" : isLastDataCell ? "last" : "middle";
         var stickyStyle = getStickyStyle(cell.column.id);
+        var columnAlign = resolveColumnAlign({
+          ...cell.column.columnDef,
+          id: cell.column.id
+        });
         return /* @__PURE__ */_jsx(Table.Cell, {
+          ...cellRenderProps,
           ...cellFlexProps,
           ...getColSizeProps(cell.column),
           cellHeight,
           cellLocation,
+          justifyContent: alignToFlex(columnAlign),
+          "data-align": columnAlign,
+          ...(clipBodyCells ? {
+            overflow: "hidden"
+          } : {}),
           ...(isWeb && stickyStyle ? {
             style: {
               position: "sticky",
-              ...("left" in stickyStyle && {
-                left: stickyStyle.left
+              ...("insetInlineStart" in stickyStyle && {
+                insetInlineStart: stickyStyle.insetInlineStart
               }),
-              ...("right" in stickyStyle && {
-                right: stickyStyle.right
+              ...("insetInlineEnd" in stickyStyle && {
+                insetInlineEnd: stickyStyle.insetInlineEnd
               }),
               zIndex: 2,
               backgroundColor: "var(--color2)"
@@ -503,6 +656,7 @@ function DataTableRoot(param) {
           children: renderCellContent(cell, rowIndex, rowData)
         }, cell.id);
       }), showDeleteRow && !readOnly && /* @__PURE__ */_jsx(Table.Cell, {
+        ...cellRenderProps,
         cellWidth: 60,
         cellHeight,
         cellLocation: "last",
@@ -511,23 +665,36 @@ function DataTableRoot(param) {
           chromeless: true,
           circular: true,
           icon: TrashIcon,
-          disabled: data.length <= minRows,
+          disabled: disabled || data.length <= minRows,
           onPress: function onPress() {
             return handleDeleteRow(rowIndex);
           },
-          "aria-label": t("Delete row")
+          "aria-label": withInterp(t("Delete row {{row}}", {
+            row: rowIndex + 1
+          }), {
+            row: rowIndex + 1
+          })
         })
       })]
     });
-  }, [showRowNumbers, enableRowExpansion, showDeleteRow, readOnly, cellHeight, knobProps.sizeToken, cellFlexProps, getColSizeProps, getStickyStyle, renderCellContent, handleDeleteRow, data.length, minRows, t]);
+  }, [enableRowSelection, showRowNumbers, enableRowExpansion, showDeleteRow, readOnly, disabled, cellHeight, knobProps.sizeToken, cellFlexProps, getColSizeProps, getStickyStyle, renderCellContent, handleDeleteRow, data.length, minRows, isCompact, t, ExpandCaretIcon, expandedCaretRotation, clipBodyCells]);
+  var [filterEditTarget, setFilterEditTarget] = useState(null);
+  var filterUi = useMemo(function () {
+    return {
+      editTarget: filterEditTarget,
+      requestEdit: setFilterEditTarget
+    };
+  }, [filterEditTarget]);
   var stateContextValue = useMemo(function () {
     return {
       table,
       state,
       actions,
-      computed
+      computed,
+      selectAllScope,
+      filterUi
     };
-  }, [table, state, actions, computed]);
+  }, [table, state, actions, computed, selectAllScope, filterUi]);
   var renderToolbarComponent = function renderToolbarComponent2() {
     var _table_getState_columnFilters;
     var activeFilterCount = ((_table_getState_columnFilters = table.getState().columnFilters) === null || _table_getState_columnFilters === void 0 ? void 0 : _table_getState_columnFilters.length) || 0;
@@ -561,25 +728,68 @@ function DataTableRoot(param) {
     });
   };
   var renderPaginationComponent = function renderPaginationComponent2() {
+    var resolvedPageSizeOptions = pageSizeOptions !== null && pageSizeOptions !== void 0 ? pageSizeOptions : [10, 20, 50, 100];
     if (renderPagination) {
       return renderPagination({
         pagination: state.pagination,
         onPaginationChange: actions.setPagination,
-        pageSizeOptions: [10, 20, 50, 100]
+        pageSizeOptions: resolvedPageSizeOptions
       });
     }
     return /* @__PURE__ */_jsx(DataTablePagination, {
       pagination: state.pagination,
       onPaginationChange: actions.setPagination,
-      pageSizeOptions: [10, 20, 50, 100],
+      pageSizeOptions: resolvedPageSizeOptions,
       compact: true
     });
   };
   var renderInner = function renderInner2(tableData, effectiveHandleAddRow, effectiveHandleDeleteRow, _effectiveHandleCellChange) {
+    var _state_pagination_totalCount;
     var _headerGroups_;
     var hasToolbar = enableGlobalSearch || enableFiltering || enableViews;
     var scrollContainerRef = useRef(null);
-    useDragScroll(scrollContainerRef, columnLayout === "scroll" && isWeb && !isSSR);
+    var tableBodyRef = useRef(null);
+    var [bodyClipped, setBodyClipped] = useState(false);
+    useEffect(function () {
+      if (!isWeb || isSSR || showCards) return;
+      var el = tableBodyRef.current;
+      if (!el) return;
+      var update = function update2() {
+        setBodyClipped(el.scrollHeight - (el.scrollTop + el.clientHeight) > 1);
+      };
+      update();
+      el.addEventListener("scroll", update, {
+        passive: true
+      });
+      var ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(update) : null;
+      ro === null || ro === void 0 ? void 0 : ro.observe(el);
+      return function () {
+        el.removeEventListener("scroll", update);
+        ro === null || ro === void 0 ? void 0 : ro.disconnect();
+      };
+    }, [tableRows.length, showCards]);
+    useDragScroll(scrollContainerRef, hScroll && !isSSR);
+    var rangeTotal = (_state_pagination_totalCount = state.pagination.totalCount) !== null && _state_pagination_totalCount !== void 0 ? _state_pagination_totalCount : 0;
+    var rangeStart = rangeTotal === 0 ? 0 : state.pagination.pageIndex * state.pagination.pageSize + 1;
+    var rangeEnd = Math.min((state.pagination.pageIndex + 1) * state.pagination.pageSize, rangeTotal);
+    var resolvedAriaLabel = ariaLabel || t("Data table");
+    if (state.error) {
+      return /* @__PURE__ */_jsx(AsyncBoundary, {
+        error: state.error,
+        onRetry,
+        layout: "table",
+        errorTitle: t("Couldn't load table"),
+        compact: true,
+        "aria-label": resolvedAriaLabel
+      });
+    }
+    if ((state.isLoading || (infinite === null || infinite === void 0 ? void 0 : infinite.isInitialLoading)) && tableRows.length === 0) {
+      return /* @__PURE__ */_jsx(AsyncBoundary, {
+        loading: true,
+        layout: "table",
+        "aria-label": resolvedAriaLabel
+      });
+    }
     return /* @__PURE__ */_jsx(DataTableContext.Provider, {
       size: resolvedSize,
       compact: isCompact,
@@ -589,29 +799,97 @@ function DataTableRoot(param) {
           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 || void 0,
+          ...(disabled ? {
+            ...disabledState.assemblyKnobProps,
+            cursor: "not-allowed",
+            ...(isWeb ? {
+              inert: true
+            } : {
+              pointerEvents: "none"
+            })
+          } : {}),
           ...props,
-          children: [/* Toolbar */
-          hasToolbar && renderToolbarComponent(), /* Compound sub-components (children) */
-          children, /* Mobile Card View */
-          sm === false ? /* @__PURE__ */_jsx(DataTableMobileCards, {
-            tableRows,
-            showRowNumbers,
-            showDeleteRow,
-            readOnly,
-            dataLength: tableData.length,
-            minRows,
-            hasActiveFilters: computed.hasActiveFilters,
-            renderCellContent,
-            onDeleteRow: effectiveHandleDeleteRow
+          children: [
+          /* 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 && /* @__PURE__ */_jsx(View, {
+            width: "100%",
+            ...(disabled ? disabledState.chromeKnobProps : {}),
+            children: renderToolbarComponent()
+          }),
+          /* Active filter chips — visibility surface for ALL filters,
+          including hidden-column filters (Axiom 6 HONEST STATE) */
+          enableFiltering && /* @__PURE__ */_jsx(View, {
+            width: "100%",
+            ...(disabled ? disabledState.chromeKnobProps : {}),
+            children: /* @__PURE__ */_jsx(DataTableFilterChips, {})
+          }), /* Auto selection toolbar (DG-TBL-02) — placement from house bulkBarPlacement */
+          enableRowSelection && bulkBarPlacement === "top" ? /* @__PURE__ */_jsx(View, {
+            width: "100%",
+            ...(disabled ? disabledState.chromeKnobProps : {}),
+            children: /* @__PURE__ */_jsx(DataTableBulkActions, {
+              actions: resolvedBulkActions,
+              maxVisibleActions: 5,
+              showSelectionCount: true,
+              placement: "top"
+            })
+          }) : null, /* Compound sub-components (children) */
+          children, /* Card List View (layout="cards" or auto below $sm) */
+          showCards ? /* @__PURE__ */_jsxs(_Fragment, {
+            children: [
+            /* Header affordances (sort / per-column filter) live in the
+            grid headers; the card list restores them here. */
+            /* @__PURE__ */
+            _jsx(DataTableCardControls, {
+              table,
+              enableSorting,
+              enableFiltering,
+              availableColumns: cardFilterColumns,
+              compact: isCompact,
+              disabled
+            }), /* @__PURE__ */_jsx(DataTableMobileCards, {
+              tableRows,
+              enableRowSelection,
+              showRowNumbers,
+              showDeleteRow,
+              readOnly,
+              disabled,
+              dataLength: tableData.length,
+              minRows,
+              hasActiveFilters: computed.hasActiveFilters,
+              renderCellContent,
+              onDeleteRow: effectiveHandleDeleteRow,
+              selectAllChecked,
+              selectAllIndeterminate,
+              onToggleSelectAll: toggleSelectAll,
+              compact: isCompact
+            })]
           }) : (/* Table View */
           /* @__PURE__ */_jsx(View, {
             ref: function ref(node) {
@@ -624,9 +902,22 @@ function DataTableRoot(param) {
             },
             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"
+            } : {}),
+            "aria-label": withInterp(t("{{label}} content", {
+              label: resolvedAriaLabel
+            }), {
+              label: resolvedAriaLabel
+            }),
             tabIndex: enableKeyboardNavigation && !isSSR ? 0 : void 0,
             onKeyDown: enableKeyboardNavigation && !isSSR ? keyboardNav.handleKeyDown : void 0,
             onPress: enableKeyboardNavigation && !isSSR ? keyboardNav.handleContainerClick : void 0,
@@ -647,21 +938,26 @@ function DataTableRoot(param) {
               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",
+              ...(hScroll ? {
                 style: {
-                  minWidth: "max-content",
-                  width: "max-content"
+                  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"
+              } : {}),
               children: [/* Table Header */
               /* @__PURE__ */_jsx(Table.Head, {
                 zIndex: "$1",
-                "aria-label": "Table headers",
+                "aria-label": t("Table headers"),
                 children: headerGroups.map(function (headerGroup) {
                   rowCounter.current++;
                   return /* @__PURE__ */_jsxs(Table.Row, {
@@ -675,10 +971,29 @@ function DataTableRoot(param) {
                       borderBottomRightRadius: "$0",
                       "aria-rowindex": rowCounter.current
                     },
-                    children: [showRowNumbers && /* @__PURE__ */_jsx(Table.HeaderCell, {
-                      cellWidth: 50,
+                    children: [enableRowSelection && /* @__PURE__ */_jsx(Table.HeaderCell, {
+                      cellWidth: SELECTION_COL_WIDTH,
                       cellHeight,
                       cellLocation: "first",
+                      justifyContent: "center",
+                      children: /* @__PURE__ */_jsx(Checkbox, {
+                        checked: selectAllIndeterminate ? "indeterminate" : selectAllChecked,
+                        disabled,
+                        onChange: function onChange(checked) {
+                          if (disabled || checked === "indeterminate") return;
+                          var shouldSelect = checked === true;
+                          var 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
+                      })
+                    }), showRowNumbers && /* @__PURE__ */_jsx(Table.HeaderCell, {
+                      cellWidth: 50,
+                      cellHeight,
+                      cellLocation: enableRowSelection ? "middle" : "first",
                       children: /* @__PURE__ */_jsx(Text, {
                         fontSize: "$4",
                         fontWeight: "600",
@@ -687,7 +1002,7 @@ function DataTableRoot(param) {
                     }), enableRowExpansion && /* @__PURE__ */_jsx(Table.HeaderCell, {
                       cellWidth: 32,
                       cellHeight,
-                      cellLocation: showRowNumbers ? "middle" : "first",
+                      cellLocation: enableRowSelection || showRowNumbers ? "middle" : "first",
                       children: /* @__PURE__ */_jsx(View, {
                         width: 14
                       })
@@ -702,19 +1017,45 @@ function DataTableRoot(param) {
                       var colMinSize = (_header_column_columnDef_minSize = header.column.columnDef.minSize) !== null && _header_column_columnDef_minSize !== void 0 ? _header_column_columnDef_minSize : 0;
                       var colMaxSize = (_header_column_columnDef_maxSize = header.column.columnDef.maxSize) !== null && _header_column_columnDef_maxSize !== void 0 ? _header_column_columnDef_maxSize : Number.MAX_SAFE_INTEGER;
                       var stickyStyle = getStickyStyle(header.column.id);
-                      var columnField = getColumnField(header.column.columnDef);
-                      var isNumeric = isNumericField(columnField);
-                      var isFirstHeaderCell = headerIndex === 0 && !showRowNumbers && !enableRowExpansion;
+                      var columnDef = header.column.columnDef;
+                      var columnAlign = resolveColumnAlign({
+                        ...columnDef,
+                        id: header.column.id
+                      });
+                      var headerJustify = alignToFlex(columnAlign);
+                      var isRightAligned = columnAlign === "right";
+                      var isFirstHeaderCell = headerIndex === 0 && !enableRowSelection && !showRowNumbers && !enableRowExpansion;
                       var isLastHeaderCell = headerIndex === headerGroup.headers.length - 1 && !(showDeleteRow && !readOnly);
                       var headerCellLocation = isFirstHeaderCell ? "first" : isLastHeaderCell ? "last" : "middle";
                       return /* @__PURE__ */_jsxs(Table.HeaderCell, {
                         id: `${header.column.id}-header`,
-                        onPress: isSortableHeader ? header.column.getToggleSortingHandler() : void 0,
-                        cursor: isSortableHeader ? "pointer" : "default",
+                        onPress: isSortableHeader && !disabled ? header.column.getToggleSortingHandler() : void 0,
+                        // 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: function onKeyDown(e) {
+                            if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
+                              var _header_column_getToggleSortingHandler;
+                              e.preventDefault();
+                              (_header_column_getToggleSortingHandler = header.column.getToggleSortingHandler()) === null || _header_column_getToggleSortingHandler === void 0 ? void 0 : _header_column_getToggleSortingHandler(e);
+                            }
+                          },
+                          focusVisibleStyle: ensureFocusVisibleRing({
+                            outlineOffset: -2
+                          })
+                        } : {}),
+                        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" : void 0,
-                        ...(dnd ? {
+                        ...(dnd && !disabled ? {
                           draggable: true,
                           onDragStart: function onDragStart(e) {
                             return dnd.onDragStart(e, header.column.id);
@@ -729,11 +1070,11 @@ function DataTableRoot(param) {
                         ...(isWeb && stickyStyle ? {
                           style: {
                             position: "sticky",
-                            ...("left" in stickyStyle && {
-                              left: stickyStyle.left
+                            ...("insetInlineStart" in stickyStyle && {
+                              insetInlineStart: stickyStyle.insetInlineStart
                             }),
-                            ...("right" in stickyStyle && {
-                              right: stickyStyle.right
+                            ...("insetInlineEnd" in stickyStyle && {
+                              insetInlineEnd: stickyStyle.insetInlineEnd
                             }),
                             zIndex: 2,
                             backgroundColor: "var(--color2)"
@@ -743,14 +1084,14 @@ function DataTableRoot(param) {
                           flexDirection: "row",
                           gap: "$2",
                           alignItems: "center",
-                          justifyContent: isNumeric ? "flex-end" : "space-between",
+                          justifyContent: isRightAligned ? "flex-end" : "space-between",
                           flex: 1,
                           children: [/* @__PURE__ */_jsxs(View, {
                             flexDirection: "row",
                             gap: "$2",
                             alignItems: "center",
-                            flex: isNumeric ? void 0 : 1,
-                            justifyContent: isNumeric ? "flex-end" : void 0,
+                            flex: isRightAligned ? void 0 : 1,
+                            justifyContent: isRightAligned ? "flex-end" : void 0,
                             children: [/* @__PURE__ */_jsx(Text, {
                               fontSize: "$4",
                               userSelect: "none",
@@ -789,14 +1130,13 @@ function DataTableRoot(param) {
                               },
                               isFiltered: header.column.getIsFiltered(),
                               options: (_header_column_columnDef_fieldProps = header.column.columnDef.fieldProps) === null || _header_column_columnDef_fieldProps === void 0 ? void 0 : _header_column_columnDef_fieldProps.options
-                            }), pinning && enableColumnPinning && /* @__PURE__ */_jsxs(_Fragment, {
-                              children: [/* @__PURE__ */_jsx(pinning.PinButton, {
-                                columnId: header.column.id,
-                                position: "left"
-                              }), /* @__PURE__ */_jsx(pinning.PinButton, {
-                                columnId: header.column.id,
-                                position: "right"
-                              })]
+                            }), pinning && enableColumnPinning &&
+                            /* One compact cycle control per header
+                            (left → right → unpin) — two full
+                            buttons crowded the header (owner). */
+                            /* @__PURE__ */
+                            _jsx(pinning.PinButton, {
+                              columnId: header.column.id
                             })]
                           })]
                         }), canResize && resizeHandler && /* @__PURE__ */_jsx(View, {
@@ -812,7 +1152,11 @@ function DataTableRoot(param) {
                           "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"
                           },
@@ -827,28 +1171,51 @@ function DataTableRoot(param) {
                   }, headerGroup.id);
                 })
               }), /* Table Body */
-              /* @__PURE__ */_jsx(Table.Body, {
-                "aria-label": "Table data",
-                children: tableRows.length === 0 ? /* @__PURE__ */_jsx(Table.Row, {
+              /* @__PURE__ */_jsxs(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 ? void 0 : 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",
+                  overflowX: "visible"
+                } : {}),
+                ref: function ref(node) {
+                  tableBodyRef.current = node !== null && node !== void 0 ? node : null;
+                },
+                children: [tableRows.length === 0 ? /* @__PURE__ */_jsx(Table.Row, {
                   children: /* @__PURE__ */_jsx(Table.Cell, {
-                    children: /* @__PURE__ */_jsx(View, {
-                      padding: "$8",
-                      alignItems: "center",
-                      justifyContent: "center",
+                    children: /* @__PURE__ */_jsx(EmptyState, {
+                      compact: true,
                       "aria-live": "polite",
-                      children: /* @__PURE__ */_jsx(Text, {
-                        color: "$color10",
-                        fontSize: "$4",
-                        children: computed.hasActiveFilters ? t("No results found") : t("No data available")
-                      })
+                      title: computed.hasActiveFilters ? t("No results found") : t("No data available")
                     })
                   })
                 }) : isVirtualized ? /* @__PURE__ */_jsx(Table.Row, {
+                  role: "presentation",
                   children: /* @__PURE__ */_jsx(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"
+                      overflow: "hidden",
+                      width: "100%",
+                      minWidth: 0
                     },
                     ...{
                       colSpan: table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter
@@ -870,7 +1237,8 @@ function DataTableRoot(param) {
                       renderRowContent,
                       extraColumnsBefore,
                       extraColumnsAfter,
-                      table
+                      table,
+                      hasInfiniteTail
                     })
                   })
                 }) : /* @__PURE__ */_jsxs(_Fragment, {
@@ -895,11 +1263,24 @@ function DataTableRoot(param) {
                             flexDirection: "row",
                             alignItems: "center",
                             gap: "$2",
-                            paddingLeft: indent,
+                            paddingInlineStart: indent,
                             cursor: "pointer",
                             onPress: function onPress() {
                               return row.toggleExpanded();
                             },
+                            // Keyboard/AT contract: expandable group
+                            // header is a toggle button (Enter/Space).
+                            role: "button",
+                            tabIndex: 0,
+                            "aria-expanded": row.getIsExpanded(),
+                            ...{
+                              onKeyDown: function onKeyDown(e) {
+                                if (e.key === "Enter" || e.key === " ") {
+                                  e.preventDefault();
+                                  row.toggleExpanded();
+                                }
+                              }
+                            },
                             children: [/* @__PURE__ */_jsx(Text, {
                               fontFamily: "$mono",
                               fontSize: "$3",
@@ -917,7 +1298,7 @@ function DataTableRoot(param) {
                       }, row.id);
                     }
                     var mainRow = /* @__PURE__ */_createElement(Table.Row, {
-                      backgroundColor: enableKeyboardNavigation && keyboardNav.isNavigating && index === keyboardNav.focusedRowIndex ? "$color4" : index % 2 === 0 ? "$color1" : "$color2",
+                      backgroundColor: enableKeyboardNavigation && keyboardNav.isNavigating && index === keyboardNav.focusedRowIndex ? "$color4" : tableZebraOn && index % 2 === 1 ? "$color2" : "$color1",
                       ...{
                         animation: "quick"
                       },
@@ -928,8 +1309,15 @@ function DataTableRoot(param) {
                       rowLocation: rowCounter.current === 0 ? "first" : rowCounter.current === allRowsLength - 1 ? "last" : "middle",
                       key: `${row.id}-${index}`,
                       "aria-rowindex": rowCounter.current,
-                      "aria-label": `Row ${index + 1}`,
-                      tabIndex: -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"
+                      }
                     }, renderRowContent(row, index, isLastRow));
                     var subRow = enableRowExpansion && renderSubComponent && row.getIsExpanded() && !((_row_subRows = row.subRows) === null || _row_subRows === void 0 ? void 0 : _row_subRows.length) ? /* @__PURE__ */_jsx(Table.Row, {
                       backgroundColor: "$color2",
@@ -952,18 +1340,23 @@ function DataTableRoot(param) {
                     flexGrow: 1,
                     flexBasis: 0,
                     minHeight: 0,
-                    children: [showRowNumbers && /* @__PURE__ */_jsx(Table.Cell, {
-                      cellWidth: 50,
+                    children: [enableRowSelection && /* @__PURE__ */_jsx(Table.Cell, {
+                      cellWidth: SELECTION_COL_WIDTH,
                       cellLocation: "first",
                       padding: 0,
                       minHeight: 0
+                    }), showRowNumbers && /* @__PURE__ */_jsx(Table.Cell, {
+                      cellWidth: 50,
+                      cellLocation: enableRowSelection ? "middle" : "first",
+                      padding: 0,
+                      minHeight: 0
                     }), enableRowExpansion && /* @__PURE__ */_jsx(Table.Cell, {
                       cellWidth: 32,
-                      cellLocation: showRowNumbers ? "middle" : "first",
+                      cellLocation: enableRowSelection || showRowNumbers ? "middle" : "first",
                       padding: 0,
                       minHeight: 0
                     }), (_headerGroups_ = headerGroups[0]) === null || _headerGroups_ === void 0 ? void 0 : _headerGroups_.headers.map(function (header, headerIndex) {
-                      var isFirstDataCell = headerIndex === 0 && !showRowNumbers && !enableRowExpansion;
+                      var isFirstDataCell = headerIndex === 0 && !enableRowSelection && !showRowNumbers && !enableRowExpansion;
                       var isLastDataCell = headerIndex === headerGroups[0].headers.length - 1 && !(showDeleteRow && !readOnly);
                       var cellLoc = isFirstDataCell ? "first" : isLastDataCell ? "last" : "middle";
                       return /* @__PURE__ */_jsx(Table.Cell, {
@@ -980,7 +1373,34 @@ function DataTableRoot(param) {
                       minHeight: 0
                     })]
                   }, "filler-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
+                (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 && /* @__PURE__ */_jsx(Table.Row, {
+                  "aria-hidden": true,
+                  role: "presentation",
+                  position: "sticky",
+                  bottom: 0,
+                  height: 28,
+                  marginTop: -28,
+                  flexShrink: 0,
+                  zIndex: 2,
+                  pointerEvents: "none",
+                  ...{
+                    "data-table-clip-affordance": "true"
+                  },
+                  style: {
+                    background: "linear-gradient(to bottom, rgba(0,0,0,0), var(--background))"
+                  }
+                })]
               }), /* Table Footer */
               hasFooter && /* @__PURE__ */_jsx(Table.Foot, {
                 children: footerGroups.map(function (footerGroup) {
@@ -994,19 +1414,120 @@ function DataTableRoot(param) {
                 })
               })]
             })
-          })), /* Add Row Button */
+          })),
+          /* 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 ? /* @__PURE__ */_jsxs(View, {
+            flexDirection: "column",
+            width: "100%",
+            children: [!isVirtualized && !infinite.exhausted && isWeb ? /* @__PURE__ */_jsx(View, {
+              // @ts-ignore web ref for IntersectionObserver
+              ref: sentinelRef,
+              height: 1,
+              width: "100%",
+              "aria-hidden": true,
+              ...{
+                "data-testid": "infinite-sentinel"
+              }
+            }) : null, !isVirtualized && infinite.isAppending ? /* @__PURE__ */_jsx(View, {
+              flexDirection: "column",
+              width: "100%",
+              ...knobProps.gap,
+              paddingVertical: "$2",
+              "aria-hidden": true,
+              ...{
+                "data-testid": "infinite-append-skeleton"
+              },
+              children: Array.from({
+                length: 3
+              }).map(function (_, i) {
+                return /* @__PURE__ */_jsx(Skeleton, {
+                  width: "100%",
+                  height: rowHeightPx - 8
+                }, i);
+              })
+            }) : null, /* @__PURE__ */_jsx(Text, {
+              role: "status",
+              "aria-live": "polite",
+              textAlign: "center",
+              paddingVertical: "$2",
+              fontSize: knobProps.sizeToken,
+              color: "$color10",
+              ...{
+                "data-testid": "infinite-status"
+              },
+              children: (
+              /* Numeric labels are bidi-isolated so RTL contexts keep
+              the interpolated runs in order (FSI…PDI). */
+              infinite.isAppending ? t("Loading more rows\u2026") : 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
+              })))
+            })]
+          }) : null, enableRowSelection && bulkBarPlacement === "bottom" ? /* @__PURE__ */_jsx(View, {
+            width: "100%",
+            ...(disabled ? disabledState.chromeKnobProps : {}),
+            children: /* @__PURE__ */_jsx(DataTableBulkActions, {
+              actions: resolvedBulkActions,
+              maxVisibleActions: 5,
+              showSelectionCount: true,
+              placement: "bottom"
+            })
+          }) : null, /* Add Row Button */
           showAddRow && !readOnly && /* @__PURE__ */_jsx(View, {
             children: /* @__PURE__ */_jsx(Button, {
               icon: PlusIcon,
-              disabled: maxRows !== void 0 && tableData.length >= maxRows,
+              disabled: disabled || maxRows !== void 0 && tableData.length >= maxRows,
               onPress: effectiveHandleAddRow,
               "aria-label": t("Add Row"),
               children: t("Add Row")
             })
-          }), /* Pagination */
-          enablePagination && /* @__PURE__ */_jsx(View, {
+          }), /* Pagination footer (pages mode only; infinite replaces it with the tail status) */
+          enablePagination && !infinite && /* @__PURE__ */_jsxs(View, {
             paddingTop: "$3",
-            children: renderPaginationComponent()
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            flexWrap: "wrap",
+            ...knobProps.gap,
+            ...(disabled ? disabledState.chromeKnobProps : {}),
+            children: [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"). */
+            /* @__PURE__ */
+            _jsx(Text, {
+              fontSize: knobProps.sizeToken,
+              color: "$color11",
+              "aria-live": "polite",
+              ...{
+                "data-table-range": "true"
+              },
+              children: (
+              /* Bidi-isolated: an RTL paragraph would otherwise reorder
+              the latin/numeric runs ("1–5 of 5" → "of 5 5–1"). */
+              bidiIsolate(withInterp(t("{{start}}\u2013{{end}} of {{total}}", {
+                start: rangeStart,
+                end: rangeEnd,
+                total: rangeTotal
+              }), {
+                start: rangeStart,
+                end: rangeEnd,
+                total: rangeTotal
+              })))
+            })]
           }), /* Loading State */
           state.isLoading && /* @__PURE__ */_jsx(View, {
             position: "absolute",
@@ -1019,7 +1540,7 @@ function DataTableRoot(param) {
             zIndex: zIndex.loading,
             "aria-busy": true,
             "aria-live": "assertive",
-            "aria-label": "Loading table data",
+            "aria-label": t("Loading table data"),
             role: "status",
             children: /* @__PURE__ */_jsx(Spinner, {
               size: "large",
@@ -1042,20 +1563,20 @@ function DataTableRoot(param) {
           return field.handleChange(next);
         };
         return renderInner(formData, function () {
-          if (readOnly || maxRows && formData.length >= maxRows) return;
+          if (readOnly || disabled || maxRows && formData.length >= maxRows) return;
           var newRow = {
             ...defaultRow,
             idx: formData.length + 1
           };
           setFormData([...formData, newRow]);
         }, function (idx) {
-          if (readOnly || formData.length <= minRows) return;
+          if (readOnly || disabled || formData.length <= minRows) return;
           setFormData(formData.filter(function (_, i) {
             return i !== idx;
           }));
         }, async function (rowIndex, columnId, newValue) {
           var _formData_rowIndex;
-          if (readOnly) return;
+          if (readOnly || disabled) return;
           var previousValue = (_formData_rowIndex = formData[rowIndex]) === null || _formData_rowIndex === void 0 ? void 0 : _formData_rowIndex[columnId];
           if (onCellChange) {
             var result = await onCellChange(rowIndex, columnId, newValue, previousValue);