@multiplatform.one/table 6.4.2 → 6.6.0

package/src/components/DataTable/DataTable.stories.tsx

@@ -2,8 +2,14 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { fn } from "storybook/test";
 import { createColumnHelper } from "@tanstack/react-table";
 import React, { useMemo } from "react";
+import {
+  formatAbsoluteDate,
+  formatCurrency,
+  type GuardrailSpecimenParameter,
+} from "@multiplatform.one/theme";
 import { Button } from "@multiplatform.one/forms";
-import { Avatar, Text, View, YStack } from "tamagui";
+import { Avatar } from "@multiplatform.one/components";
+import { Text, View, YStack } from "tamagui";
 import {
   type DataTableColumn,
   type DataTableData,
@@ -84,7 +90,7 @@ const columns: DataTableColumn<User>[] = [
   columnHelper.accessor("avatar", {
     header: "Avatar",
     cell: (info) => (
-      <Avatar circular size="$3">
+      <Avatar circular size="$3" backgroundColor="$gray6">
         <Avatar.Image alt="User avatar" src={info.getValue()} />
         <Avatar.Fallback backgroundColor="$gray6" />
       </Avatar>
@@ -143,7 +149,11 @@ const columns: DataTableColumn<User>[] = [
   // Salary Column
   columnHelper.accessor("salary", {
     header: "Salary",
-    cell: (info) => <Text>${info.getValue().toLocaleString()}</Text>,
+    cell: (info) => (
+      <Text>
+        {formatCurrency(info.getValue() as number, { symbol: "$", fractionDigits: "auto" })}
+      </Text>
+    ),
     filterFn: "inNumberRange",
   }) as DataTableColumn<User>,
 
@@ -179,14 +189,14 @@ const columns: DataTableColumn<User>[] = [
   // Join Date Column
   columnHelper.accessor("joinDate", {
     header: "Join Date",
-    cell: (info) => <Text>{new Date(info.getValue()).toLocaleDateString()}</Text>,
+    cell: (info) => <Text>{formatAbsoluteDate(info.getValue() as string)}</Text>,
     filterFn: "includesString",
   }) as DataTableColumn<User>,
 
   // Last Login Column
   columnHelper.accessor("lastLogin", {
     header: "Last Login",
-    cell: (info) => <Text>{new Date(info.getValue()).toLocaleDateString()}</Text>,
+    cell: (info) => <Text>{formatAbsoluteDate(info.getValue() as string)}</Text>,
     filterFn: "includesString",
   }) as DataTableColumn<User>,
 
@@ -802,10 +812,14 @@ const editableColumns: DataTableColumn<EditablePerson>[] = [
     header: "Category",
     field: "select",
     fieldProps: {
+      // >5 options: shorter single-select lists trip `select-too-few-options` (DG-CTRL-01).
       options: [
         { label: "Electronics", value: "electronics" },
         { label: "Clothing", value: "clothing" },
         { label: "Food", value: "food" },
+        { label: "Books", value: "books" },
+        { label: "Toys", value: "toys" },
+        { label: "Garden", value: "garden" },
       ],
     },
   },
@@ -858,6 +872,15 @@ export const EditableTable: Story = {
  * state (see ReadOnly).
  */
 export const Disabled: Story = {
+  parameters: {
+    // LC-57 allowlist: this story IS the whole-table disabled-dial demo — every
+    // piece of chrome rests disabled by design, and per-control reasons would
+    // say nothing beyond what the story title already does.
+    guardrailSpecimen: {
+      warns: ["bare-disabled"],
+      reason: "Disabled-dial specimen: the entire table (all chrome) rests disabled by design.",
+    } satisfies GuardrailSpecimenParameter,
+  },
   args: {
     data: editableData as unknown as Record<string, any>[],
     columns: editableColumns as DataTableColumn<Record<string, any>>[],
@@ -1278,6 +1301,7 @@ const selectFieldData: SelectFieldRow[] = [
   { id: 3, category: "food", priority: "low", status: "inactive" },
 ];
 
+// >5 options per list: shorter single-select lists trip `select-too-few-options` (DG-CTRL-01).
 const selectFieldColumns: DataTableColumn<SelectFieldRow>[] = [
   {
     accessorKey: "category",
@@ -1288,6 +1312,9 @@ const selectFieldColumns: DataTableColumn<SelectFieldRow>[] = [
         { label: "Electronics", value: "electronics" },
         { label: "Clothing", value: "clothing" },
         { label: "Food", value: "food" },
+        { label: "Books", value: "books" },
+        { label: "Toys", value: "toys" },
+        { label: "Garden", value: "garden" },
       ],
     },
   },
@@ -1297,9 +1324,12 @@ const selectFieldColumns: DataTableColumn<SelectFieldRow>[] = [
     field: "select",
     fieldProps: {
       options: [
+        { label: "Highest", value: "highest" },
         { label: "High", value: "high" },
         { label: "Medium", value: "medium" },
         { label: "Low", value: "low" },
+        { label: "Lowest", value: "lowest" },
+        { label: "Deferred", value: "deferred" },
       ],
     },
   },
@@ -1312,6 +1342,9 @@ const selectFieldColumns: DataTableColumn<SelectFieldRow>[] = [
         { label: "Active", value: "active" },
         { label: "Pending", value: "pending" },
         { label: "Inactive", value: "inactive" },
+        { label: "Draft", value: "draft" },
+        { label: "Archived", value: "archived" },
+        { label: "Blocked", value: "blocked" },
       ],
     },
   },
@@ -2105,12 +2138,14 @@ const searchableColumns: DataTableColumn<SearchableRow>[] = [
     header: "Department",
     field: "select",
     fieldProps: {
+      // >5 options: shorter single-select lists trip `select-too-few-options` (DG-CTRL-01).
       options: [
         { label: "Engineering", value: "Engineering" },
         { label: "Marketing", value: "Marketing" },
         { label: "Sales", value: "Sales" },
         { label: "HR", value: "HR" },
         { label: "Finance", value: "Finance" },
+        { label: "Legal", value: "Legal" },
       ],
     },
   },
@@ -2773,10 +2808,14 @@ const hiddenFilterColumns: DataTableColumn<User>[] = [
     header: "Status",
     field: "select",
     fieldProps: {
+      // >5 options: shorter single-select lists trip `select-too-few-options` (DG-CTRL-01).
       options: [
         { label: "Active", value: "active" },
         { label: "Inactive", value: "inactive" },
         { label: "Pending", value: "pending" },
+        { label: "Draft", value: "draft" },
+        { label: "Archived", value: "archived" },
+        { label: "Blocked", value: "blocked" },
       ],
     },
   },
@@ -2875,3 +2914,149 @@ const CompoundCompositionStory = () => {
 export const CompoundComposition: Story = {
   render: () => <CompoundCompositionStory />,
 };
+
+// ============================================================================
+// ROW PRESS (onRowPress — first-class row activation)
+// ============================================================================
+
+/**
+ * onRowPress makes each row ONE pressable unit (LC-49/LC-50): click/tap
+ * anywhere in the row activates, the row set exposes a single roving tab
+ * stop (ArrowUp/Down + Home/End move it, Enter AND Space activate), and
+ * `rowLabel` names each row for AT. Inner interactive controls — the
+ * selection checkboxes and the per-row Edit button here — stay isolated:
+ * pressing them never fires the row press.
+ */
+const RowPressStory = () => {
+  const data = useMemo(() => generateUsers(8), []);
+  // Explicit ids on every column: DataTable seeds columnOrder from
+  // `col.id || ""`, so mixing id-less accessor columns with id'd display
+  // columns would reorder the id'd ones first.
+  const rowPressColumns = useMemo<DataTableColumn<User>[]>(
+    () => [
+      { id: "firstName", accessorKey: "firstName", header: "First Name" },
+      { id: "department", accessorKey: "department", header: "Department" },
+      {
+        id: "salary",
+        accessorKey: "salary",
+        header: "Salary",
+        align: "right",
+        cell: (info) => (
+          <Text fontWeight="600">
+            {formatCurrency(info.getValue() as number, { symbol: "$", fractionDigits: "auto" })}
+          </Text>
+        ),
+      },
+      {
+        id: "row_actions",
+        header: "Actions",
+        cell: () => (
+          <Button size="$2" onPress={fn()}>
+            Edit
+          </Button>
+        ),
+      },
+    ],
+    [],
+  );
+  return (
+    <DataTable
+      data={data}
+      columns={rowPressColumns as DataTableColumn<Record<string, any>>[]}
+      enableRowSelection
+      enableFiltering={false}
+      enableGlobalSearch={false}
+      enablePagination={false}
+      onRowPress={fn()}
+      rowLabel={(row) => (row as User).firstName}
+      aria-label="Row press table"
+    />
+  );
+};
+
+export const RowPress: Story = {
+  render: () => <RowPressStory />,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'First-class row activation: `onRowPress(row, index)` fires on click/tap anywhere in a row and on Enter/Space while the row is focused. One roving tab stop per row set (LC-49), arrow keys move it, and inner controls (selection checkboxes, buttons) never trigger the row press. `rowLabel` names rows and their selection checkboxes ("Select row User3").',
+      },
+    },
+  },
+};
+
+// ============================================================================
+// CUSTOM-CELL ALIGNMENT (DG-TBL-01 for custom renderers)
+// ============================================================================
+
+/**
+ * Custom `cell` renderers inherit the column `align` through the table's
+ * alignment container — no self-alignment. In the semantic-table
+ * displayMode (columnLayout="auto") the cell box is display:table-cell
+ * where flex justifyContent is a no-op; the wrapper restores the column
+ * line for custom content (numerics share one right edge, LC-44).
+ */
+const CustomCellAlignmentStory = () => {
+  const data = useMemo(() => generateUsers(6), []);
+  const alignColumns = useMemo<DataTableColumn<User>[]>(
+    () => [
+      {
+        id: "firstName",
+        accessorKey: "firstName",
+        header: "Name (left)",
+        cell: (info) => <Text fontWeight="600">{String(info.getValue())}</Text>,
+      },
+      {
+        id: "age",
+        accessorKey: "age",
+        header: "Age (right)",
+        align: "right",
+        cell: (info) => <Text>{String(info.getValue())}</Text>,
+      },
+      {
+        id: "salary",
+        accessorKey: "salary",
+        header: "Salary (right)",
+        align: "right",
+        cell: (info) => (
+          <Text fontWeight="600">
+            {formatCurrency(info.getValue() as number, { symbol: "$", fractionDigits: "auto" })}
+          </Text>
+        ),
+      },
+      {
+        id: "status",
+        accessorKey: "status",
+        header: "Status (center)",
+        align: "center",
+        cell: (info) => <Text>{String(info.getValue())}</Text>,
+      },
+    ],
+    [],
+  );
+  return (
+    <DataTable
+      data={data}
+      columns={alignColumns as DataTableColumn<Record<string, any>>[]}
+      columnLayout="auto"
+      enableFiltering={false}
+      enableGlobalSearch={false}
+      enablePagination={false}
+      readOnly
+      aria-label="Custom cell alignment table"
+    />
+  );
+};
+
+export const CustomCellAlignment: Story = {
+  render: () => <CustomCellAlignmentStory />,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Column `align` applies to CUSTOM cell renderers exactly like built-in field cells: the table wraps flexRender output in an alignment container (`data-cell-align`), so numeric custom cells right-align to one shared edge without any consumer alignment code.",
+      },
+    },
+  },
+};

package/src/components/DataTable/DataTableMobileCards.tsx

@@ -50,6 +50,18 @@ export interface DataTableMobileCardsProps<TData> {
   selectAllIndeterminate?: boolean;
   onToggleSelectAll?: () => void;
   compact?: boolean;
+  /**
+   * Accessible name for a row's selection checkbox ("Select row {identity}",
+   * built by DataTableRoot so cards and grid share one naming source).
+   */
+  selectRowLabel?: (row: any, rowIndex: number) => string;
+  /**
+   * onRowPress support: press/keyboard/AT props for one pressable row
+   * (built by DataTableRoot). Cards live outside the table tree, so they
+   * take the `card` variant (role="button") with the same activation,
+   * roving focus, and inner-control isolation as grid rows.
+   */
+  getRowPressProps?: (row: any, rowIndex: number, variant?: "row" | "card") => Record<string, any>;
 }
 
 export function DataTableMobileCards<TData extends Record<string, any>>({
@@ -68,6 +80,8 @@ export function DataTableMobileCards<TData extends Record<string, any>>({
   selectAllIndeterminate = false,
   onToggleSelectAll,
   compact = false,
+  selectRowLabel,
+  getRowPressProps,
 }: DataTableMobileCardsProps<TData>) {
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
@@ -92,6 +106,7 @@ export function DataTableMobileCards<TData extends Record<string, any>>({
           {...({
             "data-table-zebra": tableZebraOn ? (index % 2 === 0 ? "even" : "odd") : "off",
           } as any)}
+          {...(getRowPressProps ? (getRowPressProps(row, index, "card") as any) : {})}
         >
           {/* Card header: selection + primary-column title + row number + delete */}
           <XStack
@@ -115,9 +130,11 @@ export function DataTableMobileCards<TData extends Record<string, any>>({
                 }}
                 disabled={disabled}
                 checkboxProps={{
-                  "aria-label": withInterp(t("Select row {{row}}", { row: index + 1 }), {
-                    row: index + 1,
-                  }),
+                  "aria-label":
+                    selectRowLabel?.(row, index) ??
+                    withInterp(t("Select row {{row}}", { row: index + 1 }), {
+                      row: index + 1,
+                    }),
                 }}
                 compact={compact}
               />
@@ -198,11 +215,20 @@ export function DataTableMobileCards<TData extends Record<string, any>>({
       knobProps,
       tableZebraOn,
       t,
+      selectRowLabel,
+      getRowPressProps,
     ],
   );
 
   return (
-    <View flexDirection="column" {...knobProps.gap} testID="data-table-cards">
+    <View
+      flexDirection="column"
+      {...knobProps.gap}
+      testID="data-table-cards"
+      // Roving-focus DOM scope for onRowPress arrow keys (LC-49) — keeps
+      // ArrowUp/Down/Home/End inside THIS table's card list.
+      {...(getRowPressProps ? ({ "data-row-press-scope": "true" } as any) : {})}
+    >
       {enableRowSelection && tableRows.length > 0 && (
         <XStack alignItems="center" gap="$2" paddingBottom="$2">
           <Checkbox

package/src/components/DataTable/DataTableRoot.tsx

@@ -62,6 +62,7 @@ import { DataTableVirtualized } from "./DataTableVirtualized";
 import { alignToFlex, getDefaultColumnAlign } from "../../utils/columnAlign";
 import { mapFieldToFilterType } from "../../utils/filterFields";
 import { INFINITE_TRIGGER_ROWS } from "../../utils/paginationDefaults";
+import { isInteractiveInnerTarget } from "../../utils/rowPress";
 import { bidiIsolate, withInterp } from "../../utils/withInterp";
 
 const SELECTION_COL_WIDTH = 40;
@@ -134,6 +135,8 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
   maxPinnedColumns = 3,
   enableGrouping = false,
   enableKeyboardNavigation = false,
+  onRowPress,
+  rowLabel,
   enableRowSelection = false,
   selectAllScope: selectAllScopeProp,
   bulkActions,
@@ -473,6 +476,159 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
       : undefined,
   });
 
+  const isSSR = typeof window === "undefined";
+
+  // ---- Row press (onRowPress): the ROW is one pressable unit ----
+
+  const rowPressActive = Boolean(onRowPress) && !disabled;
+  // LC-49 roving anchor: the row set exposes exactly one tab stop — the
+  // focused row while focus is inside the set, else the first row.
+  const [rowPressAnchor, setRowPressAnchor] = useState(0);
+  const effectiveRowPressAnchor = Math.min(rowPressAnchor, Math.max(tableRows.length - 1, 0));
+
+  // Row identity for accessible names (DG-A11Y-06): consumer accessor →
+  // first visible column's cell value → undefined (caller picks its own
+  // positional fallback). Shared by the row-press label and the selection
+  // checkbox name so "which row is this control for" reads the same
+  // everywhere.
+  const deriveRowIdentity = useCallback(
+    (row: any): string | undefined => {
+      const fromAccessor = rowLabel?.(row.original as TData);
+      if (fromAccessor) return fromAccessor;
+      let firstCellValue: unknown;
+      try {
+        firstCellValue = row.getVisibleCells()[0]?.getValue();
+      } catch {
+        firstCellValue = undefined;
+      }
+      if (
+        (typeof firstCellValue === "string" && firstCellValue.length > 0) ||
+        typeof firstCellValue === "number"
+      ) {
+        return String(firstCellValue);
+      }
+      return undefined;
+    },
+    [rowLabel],
+  );
+
+  // Accessible name per pressable row: identity, else positional "Row {{row}}".
+  const deriveRowLabel = useCallback(
+    (row: any, rowIndex: number): string =>
+      deriveRowIdentity(row) ??
+      withInterp(t("Row {{row}}", { row: rowIndex + 1 }), { row: rowIndex + 1 }),
+    [deriveRowIdentity, t],
+  );
+
+  // Selection-toggle name: row identity beats a bare index ("Select row
+  // Bulbasaur", falling back to "Select row 3") so AT and automation can
+  // target a specific row's checkbox by name.
+  const deriveSelectRowLabel = useCallback(
+    (row: any, rowIndex: number): string => {
+      const identity = deriveRowIdentity(row) ?? String(rowIndex + 1);
+      return withInterp(t("Select row {{row}}", { row: identity }), { row: identity });
+    },
+    [deriveRowIdentity, t],
+  );
+
+  const activateRowPress = useCallback(
+    (row: any, rowIndex: number) => {
+      onRowPress?.(row.original as TData, rowIndex);
+    },
+    [onRowPress],
+  );
+
+  /**
+   * Press/keyboard/AT props for one pressable row (grid `<tr>`, virtualized
+   * row host, or mobile card). Spread LAST so the roving tabIndex overrides
+   * the static -1 the grid row carries otherwise.
+   *
+   * - Pointer: activation skips presses originating on inner interactive
+   *   elements (isInteractiveInnerTarget — the stopPropagation contract's
+   *   defensive arm).
+   * - Keyboard (LC-50): Enter AND Space each synthesize exactly one
+   *   activation (repeat + defaultPrevented guarded); arrows/Home/End rove
+   *   within the row set; Shift+Tab exits (no key trap).
+   */
+  const getRowPressProps = useCallback(
+    (row: any, rowIndex: number, variant: "row" | "card" = "row") => {
+      if (!rowPressActive) return {};
+      const handlePress = (event: any) => {
+        if (event?.defaultPrevented) return;
+        const targetEl = event?.target ?? event?.nativeEvent?.target;
+        if (isWeb && typeof Element !== "undefined" && targetEl instanceof Element) {
+          const boundary = targetEl.closest('[data-row-press="true"]');
+          if (isInteractiveInnerTarget(targetEl, boundary)) return;
+        }
+        activateRowPress(row, rowIndex);
+      };
+      return {
+        "aria-label": deriveRowLabel(row, rowIndex),
+        onPress: handlePress,
+        cursor: "pointer" as const,
+        pressStyle: { backgroundColor: "$color4" },
+        ...(variant === "card" ? { role: "button" as const } : {}),
+        ...(isWeb && !isSSR
+          ? {
+              tabIndex: rowIndex === effectiveRowPressAnchor ? 0 : -1,
+              focusVisibleStyle: ensureFocusVisibleRing({ outlineOffset: -2 }),
+              "data-row-press": "true",
+              onFocus: (e: React.FocusEvent) => {
+                // Only a focused ROW moves the anchor; focus on an inner
+                // control (own tab stop) leaves the roving state alone.
+                if (e.target === e.currentTarget) setRowPressAnchor(rowIndex);
+              },
+              onBlur: (e: React.FocusEvent) => {
+                const next = e.relatedTarget;
+                if (!(next instanceof Element) || !next.closest('[data-row-press="true"]')) {
+                  setRowPressAnchor(0);
+                }
+              },
+              onKeyDown: (e: React.KeyboardEvent) => {
+                if (e.defaultPrevented) return;
+                // Keys on focused inner controls belong to those controls.
+                if (e.target !== e.currentTarget) return;
+                const key = e.key;
+                if (key === "Enter" || key === " " || key === "Spacebar") {
+                  // preventDefault stops Space page-scroll; stopPropagation
+                  // keeps the container-level keyboard nav (Excel mode) from
+                  // double-activating the same physical key.
+                  e.preventDefault();
+                  e.stopPropagation();
+                  if (e.repeat) return;
+                  activateRowPress(row, rowIndex);
+                  return;
+                }
+                if (key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End") {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  const rowEl = e.currentTarget as HTMLElement;
+                  const scope =
+                    rowEl.closest('[data-row-press-scope="true"]') ?? rowEl.ownerDocument;
+                  const pressRows = Array.from(
+                    scope.querySelectorAll('[data-row-press="true"]'),
+                  ) as HTMLElement[];
+                  const currentIdx = pressRows.indexOf(rowEl);
+                  if (currentIdx < 0) return;
+                  const nextIdx =
+                    key === "Home"
+                      ? 0
+                      : key === "End"
+                        ? pressRows.length - 1
+                        : Math.min(
+                            Math.max(currentIdx + (key === "ArrowDown" ? 1 : -1), 0),
+                            pressRows.length - 1,
+                          );
+                  pressRows[nextIdx]?.focus();
+                }
+              },
+            }
+          : {}),
+      };
+    },
+    [rowPressActive, deriveRowLabel, activateRowPress, effectiveRowPressAnchor, isSSR],
+  );
+
   const handleCellChange = useCallback(
     async (rowIndex: number, columnId: string, newValue: any) => {
       if (readOnly || disabled) return;
@@ -519,7 +675,28 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
       const value = cell.getValue();
 
       if (columnDef.cell && !columnDef.field) {
-        return flexRender(columnDef.cell, cell.getContext());
+        // DG-TBL-01 for CUSTOM cell renderers: the cell box's own
+        // justifyContent no-ops in the semantic-table displayMode
+        // (display: table-cell is not a flex container), so the column's
+        // resolved alignment rides this full-width flex container instead —
+        // consumers never self-align. The built-in DataTableCell branch
+        // below aligns internally (CellWrapper) and stays unwrapped.
+        const customAlign = resolveColumnAlign({
+          ...(columnDef as DataTableColumn),
+          id: cell.column.id,
+        });
+        return (
+          <View
+            width="100%"
+            minWidth={0}
+            flexDirection="row"
+            alignItems="center"
+            justifyContent={alignToFlex(customAlign)}
+            {...({ "data-cell-align": customAlign } as any)}
+          >
+            {flexRender(columnDef.cell, cell.getContext())}
+          </View>
+        );
       }
 
       const columnField = getColumnField(columnDef);
@@ -556,8 +733,6 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
     [handleCellChange, readOnly, disabled, knobProps.sizeToken, isCompact],
   );
 
-  const isSSR = typeof window === "undefined";
-
   const extraColumnsBefore =
     (enableRowSelection ? 1 : 0) + (showRowNumbers ? 1 : 0) + (enableRowExpansion ? 1 : 0);
   const extraColumnsAfter = showDeleteRow && !readOnly ? 1 : 0;
@@ -651,10 +826,9 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                 disabled={disabled}
                 checkboxProps={{
                   // Row identity in the name so repeated per-row actions are
-                  // differentiated for screen readers (DG-A11Y-06).
-                  "aria-label": withInterp(t("Select row {{row}}", { row: rowIndex + 1 }), {
-                    row: rowIndex + 1,
-                  }),
+                  // differentiated for screen readers (DG-A11Y-06). The
+                  // aria-label rides the role="checkbox" frame itself.
+                  "aria-label": deriveSelectRowLabel(row, rowIndex),
                 }}
                 compact={isCompact}
               />
@@ -840,6 +1014,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
       minRows,
       isCompact,
       t,
+      deriveSelectRowLabel,
       ExpandCaretIcon,
       expandedCaretRotation,
       clipBodyCells,
@@ -1084,6 +1259,8 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                   selectAllIndeterminate={selectAllIndeterminate}
                   onToggleSelectAll={toggleSelectAll}
                   compact={isCompact}
+                  selectRowLabel={deriveSelectRowLabel}
+                  {...(rowPressActive ? { getRowPressProps } : {})}
                 />
               </>
             ) : (
@@ -1099,7 +1276,13 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                 }}
                 flexDirection="column"
                 width="100%"
-                flexGrow={1}
+                // Grow 0 / shrink 1 / basis auto: the grid frame hugs its
+                // rows and only compresses (into internal scroll) when the
+                // parent is shorter. flexGrow 1 stretched the frame to fill
+                // tall parents, painting a dead zone between the last row
+                // and the frame's bottom border on short pages (the frame
+                // claimed data area that held no data — Axiom 6/LC-37).
+                flexGrow={0}
                 flexShrink={1}
                 flexBasis="auto"
                 minHeight={0}
@@ -1144,6 +1327,8 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                   // to it instead of the scrolling content View. Content
                   // fits the max-content box, so nothing needs the clip.
                   {...(hScroll && enableColumnPinning ? { overflow: "visible" as any } : {})}
+                  // Roving-focus DOM scope for onRowPress arrow keys (LC-49).
+                  {...(rowPressActive ? ({ "data-row-press-scope": "true" } as any) : {})}
                 >
                   {/* Table Header */}
                   <Table.Head zIndex="$1" aria-label={t("Table headers")}>
@@ -1553,6 +1738,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                             extraColumnsAfter={extraColumnsAfter}
                             table={table}
                             hasInfiniteTail={hasInfiniteTail}
+                            {...(rowPressActive ? { getRowPressProps } : {})}
                           />
                         </Table.Cell>
                       </Table.Row>
@@ -1646,6 +1832,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                                     : "odd"
                                   : "off",
                               } as any)}
+                              {...(getRowPressProps(row, index) as any)}
                             >
                               {renderRowContent(row, index, isLastRow)}
                             </Table.Row>

package/src/components/DataTable/DataTableVirtualized.tsx

@@ -42,6 +42,12 @@ export interface DataTableVirtualizedProps {
    * scroll range so appended pages grow geometry seamlessly.
    */
   hasInfiniteTail?: boolean;
+  /**
+   * onRowPress support: press/keyboard/AT props for one pressable row
+   * (built by DataTableRoot; spread on the row host so virtual rows keep
+   * the same activation + roving-focus contract as grid rows).
+   */
+  getRowPressProps?: (row: any, rowIndex: number, variant?: "row" | "card") => Record<string, any>;
 }
 
 export function DataTableVirtualized({
@@ -60,6 +66,7 @@ export function DataTableVirtualized({
   getColSizeProps,
   renderRowContent,
   hasInfiniteTail = false,
+  getRowPressProps,
 }: DataTableVirtualizedProps) {
   return (
     <div
@@ -188,6 +195,7 @@ export function DataTableVirtualized({
               }
               role="row"
               aria-rowindex={virtualRow.index + 1}
+              {...(getRowPressProps ? (getRowPressProps(row, virtualRow.index) as any) : {})}
             >
               {/* div cells (role="cell" via the primitive): a real <td> is
                   not a valid child of the absolutely-positioned div rows */}