@multiplatform.one/table 6.0.4 → 6.3.0

package/dist/esm/components/DataTable/DataTableRoot.mjs

@@ -1,11 +1,11 @@
-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.mjs";
 import { useDragScroll } from "../../hooks/useDragScroll.mjs";
@@ -13,55 +13,34 @@ import { useDataTableKeyboard } from "../../hooks/useDataTableKeyboard.mjs";
 import { DataTableColumnPinning } from "../DataTableColumnPinning/index.mjs";
 import { DataTablePagination } from "../DataTablePagination/index.mjs";
 import { DataTableToolbar } from "../DataTableToolbar/index.mjs";
+import { DataTableBulkActions } from "../DataTableBulkActions/index.mjs";
 import { DataTableCell } from "../DataTableCell/index.mjs";
 import { ColumnHeaderFilter } from "../ColumnHeaderFilter/index.mjs";
+import { DataTableFilterChips } from "../DataTableFilterChips/index.mjs";
 import { Table } from "@multiplatform.one/table-primitives";
 import { DataTableContext } from "./DataTableContext.mjs";
 import { DataTableStateContext } from "./DataTableStateContext.mjs";
+import { DataTableCardControls } from "./DataTableCardControls.mjs";
 import { DataTableMobileCards } from "./DataTableMobileCards.mjs";
 import { DataTableVirtualized } from "./DataTableVirtualized.mjs";
+import { alignToFlex, getDefaultColumnAlign } from "../../utils/columnAlign.mjs";
+import { mapFieldToFilterType } from "../../utils/filterFields.mjs";
+import { INFINITE_TRIGGER_ROWS } from "../../utils/paginationDefaults.mjs";
+import { bidiIsolate, withInterp } from "../../utils/withInterp.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
+const SELECTION_COL_WIDTH = 40;
 function getColumnField(column) {
   return 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
+  });
 }
 const rowHeightPx = 40;
 function DataTableRoot({
@@ -69,6 +48,7 @@ function DataTableRoot({
   columns,
   initialState,
   onStateChange,
+  onRetry,
   syncWithUrl = false,
   urlDebounceMs = 500,
   urlStrategy,
@@ -76,14 +56,19 @@ function DataTableRoot({
   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,
@@ -94,6 +79,9 @@ function DataTableRoot({
   maxPinnedColumns = 3,
   enableGrouping = false,
   enableKeyboardNavigation = false,
+  enableRowSelection = false,
+  selectAllScope: selectAllScopeProp,
+  bulkActions,
   readOnly = false,
   onCellChange,
   name,
@@ -113,7 +101,7 @@ function DataTableRoot({
   className,
   size,
   compact = false,
-  disabled: _disabled = false,
+  disabled = false,
   children,
   "aria-label": ariaLabel,
   "aria-describedby": ariaDescribedBy,
@@ -125,13 +113,21 @@ function DataTableRoot({
   const {
     sm
   } = useMedia();
+  const showCards = layout === "cards" || layout === "auto" && sm === false;
   const {
-    knobProps
+    knobProps,
+    disabledState
   } = useResolvedKnobs({
     intent: void 0,
     component: "DataTable",
     compact
   });
+  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";
+  const selectAllScope = selectAllScopeProp ?? (knobProps.selectAllScope === "filtered" ? "filtered" : "page");
   const {
     resolvedForm
   } = useFormField({
@@ -155,8 +151,11 @@ function DataTableRoot({
     manualPagination,
     manualSorting,
     enableFiltering,
+    filterableFields,
     enableSorting,
     enablePagination,
+    paginationMode,
+    loadPage,
     enableColumnVisibility,
     enableColumnOrdering,
     enableColumnResizing,
@@ -173,13 +172,26 @@ function DataTableRoot({
     maxPinnedColumns,
     enableGrouping,
     enableKeyboardNavigation,
+    enableRowSelection,
     rowCount,
     pageCount
   });
+  const resolvedBulkActions = bulkActions ?? [];
+  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 = 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;
+  const infinite = computed.infinite;
+  const tableRows = infinite ? rowModelRows.slice(0, infinite.visibleRowCount) : rowModelRows;
   const footerGroups = table.getFooterGroups();
   const hasFooter = footerGroups.some(group => group.headers.some(header => header.column.columnDef.footer != null));
   const allRowsLength = tableRows.length + headerGroups.length + (hasFooter ? footerGroups.length : 0);
@@ -187,13 +199,25 @@ function DataTableRoot({
   rowCounter.current = -1;
   const getColSizeProps = useCallback(col => {
     const hasExplicitSize = col.columnDef.size != null;
-    if (hasExplicitSize || enableColumnResizing) {
+    const isPinned = enableColumnPinning && Boolean(col.getIsPinned?.());
+    if (isPinned) {
+      const 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]);
   const dnd = useMemo(() => {
     if (!enableColumnOrdering || !isWeb) return null;
     return {
@@ -222,9 +246,10 @@ function DataTableRoot({
     };
   }, [enableColumnOrdering, table]);
   const bodyScrollRef = useRef(null);
-  const isVirtualized = enableVirtualization && virtualizationHeight != null && virtualizationHeight > 0 && typeof window !== "undefined";
+  const isVirtualized = enableVirtualization && virtualizationHeight != null && virtualizationHeight > 0 && isWeb;
+  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,
@@ -232,21 +257,53 @@ function DataTableRoot({
   });
   const virtualItems = isVirtualized ? virtualizer.getVirtualItems() : [];
   const totalSize = isVirtualized ? virtualizer.getTotalSize() : 0;
+  const loadMoreRef = useRef(void 0);
+  loadMoreRef.current = infinite?.loadMore;
+  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]);
+  const sentinelRef = useRef(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" : "table";
+  const hScroll = isWeb && isFlexLayout && (columnLayout === "scroll" || enableColumnPinning);
+  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") {
+      return {
+        flexGrow: 0,
+        flexShrink: 0,
+        flexBasis: "auto",
+        minWidth: 80
+      };
+    }
+    if (enableColumnResizing) {
+      return {
+        flexGrow: 0,
+        flexShrink: 0,
+        flexBasis: "auto"
+      };
+    }
     return {
       flex: 1,
       flexShrink: 1,
@@ -255,14 +312,21 @@ function DataTableRoot({
       minWidth: 0
     };
   }, [isFlexLayout, columnLayout, enableColumnResizing]);
-  const pinning = useMemo(() => enableColumnPinning ? DataTableColumnPinning({
+  const cardFilterColumns = useMemo(() => columns.filter(col => col.enableColumnFilter !== false).map(col => ({
+    id: col.id || col.accessorKey || "",
+    label: typeof col.header === "string" ? col.header : col.id || col.accessorKey || "",
+    type: mapFieldToFilterType(col.field)
+  })).filter(col => col.id), [columns]);
+  const pinningHelpers = DataTableColumnPinning({
     table,
     maxPinnedColumns,
-    allowPinning: true
-  }) : null, [enableColumnPinning, 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"
@@ -272,8 +336,9 @@ function DataTableRoot({
     } : void 0
   });
   const handleCellChange = useCallback(async (rowIndex, columnId, newValue) => {
-    if (readOnly) return;
+    if (readOnly || disabled) return;
     const previousValue = data[rowIndex]?.[columnId];
+    if (Object.is(previousValue, newValue)) return;
     if (onCellChange) {
       const result = await onCellChange(rowIndex, columnId, newValue, previousValue);
       if (result === false) return;
@@ -286,9 +351,9 @@ function DataTableRoot({
       };
       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
@@ -296,13 +361,13 @@ function DataTableRoot({
     if (!isFormMode && onDataChange) {
       onDataChange([...data, newRow]);
     }
-  }, [readOnly, maxRows, data, defaultRow, isFormMode, onDataChange]);
+  }, [readOnly, disabled, maxRows, data, defaultRow, isFormMode, onDataChange]);
   const handleDeleteRow = useCallback(rowIndex => {
-    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;
   const renderCellContent = useCallback((cell, rowIndex, rowData) => {
     const columnDef = cell.column.columnDef;
@@ -327,7 +392,9 @@ function DataTableRoot({
       fieldProps: columnDef.fieldProps,
       onChange: newValue => handleCellChange(rowIndex, columnId, newValue),
       readOnly,
+      disabled,
       columnId,
+      columnLabel: typeof columnDef.header === "string" ? columnDef.header : void 0,
       rowIndex,
       rowData,
       size: knobProps.sizeToken,
@@ -335,9 +402,9 @@ function DataTableRoot({
       linkedValue,
       onLinkedChange
     });
-  }, [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(columnId => {
     if (!enableColumnPinning || !pinning) return void 0;
@@ -355,11 +422,12 @@ function DataTableRoot({
         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;
       return {
         position: "sticky",
-        left: leftOffset,
+        insetInlineStart: leftOffset,
         zIndex: 2,
         backgroundColor: "$color2"
       };
@@ -373,29 +441,64 @@ function DataTableRoot({
       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]);
-  const renderRowContent = useCallback((row, rowIndex, _isLastRow) => {
+  }, [enableColumnPinning, pinning, table, enableRowSelection, enableRowExpansion, showRowNumbers, showDeleteRow, readOnly]);
+  const 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.
+  (row, rowIndex, _isLastRow, cellElement) => {
     const rowData = row.original;
+    const 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: 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, {
@@ -429,19 +532,31 @@ function DataTableRoot({
               })]
             }, i))
           }), row.getCanExpand() ? /* @__PURE__ */jsx(View, {
-            onPress: () => row.toggleExpanded(),
-            cursor: "pointer",
+            onPress: () => {
+              if (disabled) return;
+              row.toggleExpanded();
+            },
+            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"
               }
             })
@@ -450,23 +565,33 @@ function DataTableRoot({
           })]
         })
       }), row.getVisibleCells().map((cell, cellIndex) => {
-        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,
+          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)"
@@ -475,6 +600,7 @@ function DataTableRoot({
           children: renderCellContent(cell, rowIndex, rowData)
         }, cell.id);
       }), showDeleteRow && !readOnly && /* @__PURE__ */jsx(Table.Cell, {
+        ...cellRenderProps,
         cellWidth: 60,
         cellHeight,
         cellLocation: "last",
@@ -483,19 +609,30 @@ function DataTableRoot({
           chromeless: true,
           circular: true,
           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
+          })
         })
       })]
     });
-  }, [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]);
+  const [filterEditTarget, setFilterEditTarget] = useState(null);
+  const filterUi = useMemo(() => ({
+    editTarget: filterEditTarget,
+    requestEdit: setFilterEditTarget
+  }), [filterEditTarget]);
   const stateContextValue = useMemo(() => ({
     table,
     state,
     actions,
-    computed
-  }), [table, state, actions, computed]);
+    computed,
+    selectAllScope,
+    filterUi
+  }), [table, state, actions, computed, selectAllScope, filterUi]);
   const renderToolbarComponent = () => {
     const activeFilterCount = table.getState().columnFilters?.length || 0;
     if (renderToolbar) {
@@ -528,24 +665,66 @@ function DataTableRoot({
     });
   };
   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
       });
     }
     return /* @__PURE__ */jsx(DataTablePagination, {
       pagination: state.pagination,
       onPaginationChange: actions.setPagination,
-      pageSizeOptions: [10, 20, 50, 100],
+      pageSizeOptions: resolvedPageSizeOptions,
       compact: true
     });
   };
   const renderInner = (tableData, effectiveHandleAddRow, effectiveHandleDeleteRow, _effectiveHandleCellChange) => {
     const hasToolbar = enableGlobalSearch || enableFiltering || enableViews;
     const scrollContainerRef = useRef(null);
-    useDragScroll(scrollContainerRef, columnLayout === "scroll" && isWeb && !isSSR);
+    const tableBodyRef = useRef(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]);
+    useDragScroll(scrollContainerRef, hScroll && !isSSR);
+    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);
+    const 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?.isInitialLoading) && tableRows.length === 0) {
+      return /* @__PURE__ */jsx(AsyncBoundary, {
+        loading: true,
+        layout: "table",
+        "aria-label": resolvedAriaLabel
+      });
+    }
     return /* @__PURE__ */jsx(DataTableContext.Provider, {
       size: resolvedSize,
       compact: isCompact,
@@ -555,26 +734,70 @@ function DataTableRoot({
           flexDirection: "column",
           gap: 0,
           width: "100%",
-          flex: 1,
+          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",
+          "aria-disabled": disabled || void 0,
+          ...(disabled ? {
+            ...disabledState.assemblyKnobProps,
+            cursor: "not-allowed",
+            ...(isWeb ? {
+              inert: true
+            } : {
+              pointerEvents: "none"
+            })
+          } : {}),
           ...props,
-          children: [hasToolbar && renderToolbarComponent(), children, sm === false ? /* @__PURE__ */jsx(DataTableMobileCards, {
-            tableRows,
-            showRowNumbers,
-            showDeleteRow,
-            readOnly,
-            dataLength: tableData.length,
-            minRows,
-            hasActiveFilters: computed.hasActiveFilters,
-            renderCellContent,
-            onDeleteRow: effectiveHandleDeleteRow
+          children: [hasToolbar && /* @__PURE__ */jsx(View, {
+            width: "100%",
+            ...(disabled ? disabledState.chromeKnobProps : {}),
+            children: renderToolbarComponent()
+          }), enableFiltering && /* @__PURE__ */jsx(View, {
+            width: "100%",
+            ...(disabled ? disabledState.chromeKnobProps : {}),
+            children: /* @__PURE__ */jsx(DataTableFilterChips, {})
+          }), enableRowSelection && bulkBarPlacement === "top" ? /* @__PURE__ */jsx(View, {
+            width: "100%",
+            ...(disabled ? disabledState.chromeKnobProps : {}),
+            children: /* @__PURE__ */jsx(DataTableBulkActions, {
+              actions: resolvedBulkActions,
+              maxVisibleActions: 5,
+              showSelectionCount: true,
+              placement: "top"
+            })
+          }) : null, children, showCards ? /* @__PURE__ */jsxs(Fragment, {
+            children: [/* @__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: node => {
@@ -587,9 +810,18 @@ function DataTableRoot({
             },
             flexDirection: "column",
             width: "100%",
-            flex: 1,
+            flexGrow: 1,
+            flexShrink: 1,
+            flexBasis: "auto",
             minHeight: 0,
-            "aria-label": `${ariaLabel || "Data table"} content`,
+            ...(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,
@@ -610,20 +842,21 @@ function DataTableRoot({
               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"
                 }
               } : {}),
+              ...(hScroll && enableColumnPinning ? {
+                overflow: "visible"
+              } : {}),
               children: [/* @__PURE__ */jsx(Table.Head, {
                 zIndex: "$1",
-                "aria-label": "Table headers",
+                "aria-label": t("Table headers"),
                 children: headerGroups.map(headerGroup => {
                   rowCounter.current++;
                   return /* @__PURE__ */jsxs(Table.Row, {
@@ -637,10 +870,29 @@ function DataTableRoot({
                       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: 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
+                      })
+                    }), showRowNumbers && /* @__PURE__ */jsx(Table.HeaderCell, {
+                      cellWidth: 50,
+                      cellHeight,
+                      cellLocation: enableRowSelection ? "middle" : "first",
                       children: /* @__PURE__ */jsx(Text, {
                         fontSize: "$4",
                         fontWeight: "600",
@@ -649,7 +901,7 @@ function DataTableRoot({
                     }), enableRowExpansion && /* @__PURE__ */jsx(Table.HeaderCell, {
                       cellWidth: 32,
                       cellHeight,
-                      cellLocation: showRowNumbers ? "middle" : "first",
+                      cellLocation: enableRowSelection || showRowNumbers ? "middle" : "first",
                       children: /* @__PURE__ */jsx(View, {
                         width: 14
                       })
@@ -662,19 +914,38 @@ function DataTableRoot({
                       const colMinSize = header.column.columnDef.minSize ?? 0;
                       const colMaxSize = header.column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER;
                       const stickyStyle = getStickyStyle(header.column.id);
-                      const columnField = getColumnField(header.column.columnDef);
-                      const isNumeric = isNumericField(columnField);
-                      const isFirstHeaderCell = headerIndex === 0 && !showRowNumbers && !enableRowExpansion;
+                      const columnDef = header.column.columnDef;
+                      const columnAlign = resolveColumnAlign({
+                        ...columnDef,
+                        id: header.column.id
+                      });
+                      const headerJustify = alignToFlex(columnAlign);
+                      const isRightAligned = columnAlign === "right";
+                      const isFirstHeaderCell = headerIndex === 0 && !enableRowSelection && !showRowNumbers && !enableRowExpansion;
                       const isLastHeaderCell = headerIndex === headerGroup.headers.length - 1 && !(showDeleteRow && !readOnly);
                       const headerCellLocation = isFirstHeaderCell ? "first" : isLastHeaderCell ? "last" : "middle";
                       return /* @__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,
+                        ...(isSortableHeader && !disabled && isWeb ? {
+                          tabIndex: 0,
+                          onKeyDown: e => {
+                            if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
+                              e.preventDefault();
+                              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: e => dnd.onDragStart(e, header.column.id),
                           onDragOver: dnd.onDragOver,
@@ -685,11 +956,11 @@ function DataTableRoot({
                         ...(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)"
@@ -699,14 +970,14 @@ function DataTableRoot({
                           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",
@@ -743,14 +1014,13 @@ function DataTableRoot({
                               onFilterChange: value => header.column.setFilterValue(value),
                               isFiltered: header.column.getIsFiltered(),
                               options: 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, {
@@ -766,7 +1036,11 @@ function DataTableRoot({
                           "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"
                           },
@@ -780,28 +1054,35 @@ function DataTableRoot({
                     })]
                   }, headerGroup.id);
                 })
-              }), /* @__PURE__ */jsx(Table.Body, {
-                "aria-label": "Table data",
-                children: tableRows.length === 0 ? /* @__PURE__ */jsx(Table.Row, {
+              }), /* @__PURE__ */jsxs(Table.Body, {
+                role: isVirtualized ? "presentation" : "rowgroup",
+                "aria-label": isVirtualized ? void 0 : t("Table data"),
+                ...(hScroll && enableColumnPinning ? {
+                  overflowY: "visible",
+                  overflowX: "visible"
+                } : {}),
+                ref: node => {
+                  tableBodyRef.current = 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,
+                    cellWidth: "auto",
                     style: {
                       display: "block",
-                      overflow: "hidden"
+                      overflow: "hidden",
+                      width: "100%",
+                      minWidth: 0
                     },
                     ...{
                       colSpan: table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter
@@ -823,7 +1104,8 @@ function DataTableRoot({
                       renderRowContent,
                       extraColumnsBefore,
                       extraColumnsAfter,
-                      table
+                      table,
+                      hasInfiniteTail
                     })
                   })
                 }) : /* @__PURE__ */jsxs(Fragment, {
@@ -845,9 +1127,20 @@ function DataTableRoot({
                             flexDirection: "row",
                             alignItems: "center",
                             gap: "$2",
-                            paddingLeft: indent,
+                            paddingInlineStart: indent,
                             cursor: "pointer",
                             onPress: () => row.toggleExpanded(),
+                            role: "button",
+                            tabIndex: 0,
+                            "aria-expanded": row.getIsExpanded(),
+                            ...{
+                              onKeyDown: e => {
+                                if (e.key === "Enter" || e.key === " ") {
+                                  e.preventDefault();
+                                  row.toggleExpanded();
+                                }
+                              }
+                            },
                             children: [/* @__PURE__ */jsx(Text, {
                               fontFamily: "$mono",
                               fontSize: "$3",
@@ -865,7 +1158,7 @@ function DataTableRoot({
                       }, row.id);
                     }
                     const 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"
                       },
@@ -876,8 +1169,15 @@ function DataTableRoot({
                       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));
                     const subRow = enableRowExpansion && renderSubComponent && row.getIsExpanded() && !row.subRows?.length ? /* @__PURE__ */jsx(Table.Row, {
                       backgroundColor: "$color2",
@@ -899,18 +1199,23 @@ function DataTableRoot({
                     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[0]?.headers.map((header, headerIndex) => {
-                      const isFirstDataCell = headerIndex === 0 && !showRowNumbers && !enableRowExpansion;
+                      const isFirstDataCell = headerIndex === 0 && !enableRowSelection && !showRowNumbers && !enableRowExpansion;
                       const isLastDataCell = headerIndex === headerGroups[0].headers.length - 1 && !(showDeleteRow && !readOnly);
                       const cellLoc = isFirstDataCell ? "first" : isLastDataCell ? "last" : "middle";
                       return /* @__PURE__ */jsx(Table.Cell, {
@@ -927,7 +1232,23 @@ function DataTableRoot({
                       minHeight: 0
                     })]
                   }, "filler-row")]
-                })
+                }), 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))"
+                  }
+                })]
               }), hasFooter && /* @__PURE__ */jsx(Table.Foot, {
                 children: footerGroups.map(footerGroup => /* @__PURE__ */jsx(Table.Row, {
                   children: footerGroup.headers.map(header => /* @__PURE__ */jsx(Table.Cell, {
@@ -936,17 +1257,100 @@ function DataTableRoot({
                 }, footerGroup.id))
               })]
             })
-          })), showAddRow && !readOnly && /* @__PURE__ */jsx(View, {
+          })), infinite ? /* @__PURE__ */jsxs(View, {
+            flexDirection: "column",
+            width: "100%",
+            children: [!isVirtualized && !infinite.exhausted && isWeb ? /* @__PURE__ */jsx(View, {
+              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((_, i) => /* @__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: 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, 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")
             })
-          }), enablePagination && /* @__PURE__ */jsx(View, {
+          }), 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(), /* @__PURE__ */jsx(Text, {
+              fontSize: knobProps.sizeToken,
+              color: "$color11",
+              "aria-live": "polite",
+              ...{
+                "data-table-range": "true"
+              },
+              children: bidiIsolate(withInterp(t("{{start}}\u2013{{end}} of {{total}}", {
+                start: rangeStart,
+                end: rangeEnd,
+                total: rangeTotal
+              }), {
+                start: rangeStart,
+                end: rangeEnd,
+                total: rangeTotal
+              }))
+            })]
           }), state.isLoading && /* @__PURE__ */jsx(View, {
             position: "absolute",
             top: 0,
@@ -958,7 +1362,7 @@ function DataTableRoot({
             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",
@@ -978,17 +1382,17 @@ function DataTableRoot({
         const formData = field.state.value ?? [];
         const setFormData = next => field.handleChange(next);
         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
           };
           setFormData([...formData, newRow]);
         }, idx => {
-          if (readOnly || formData.length <= minRows) return;
+          if (readOnly || disabled || formData.length <= minRows) return;
           setFormData(formData.filter((_, i) => i !== idx));
         }, async (rowIndex, columnId, newValue) => {
-          if (readOnly) return;
+          if (readOnly || disabled) return;
           const previousValue = formData[rowIndex]?.[columnId];
           if (onCellChange) {
             const result = await onCellChange(rowIndex, columnId, newValue, previousValue);