@multiplatform.one/table 7.23.1 → 7.24.0

package/dist/jsx/utils/viewData.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value"],"sources":["../../../src/utils/viewData.ts"],"sourcesContent":[null],"mappings":"AASO,YAAS;;AACd,IAAAA,SAAI,GAAAC,MAAA,CAAAC,cAAA;AACF,IAAAC,gBAAqB,GAAAF,MAAA,CAAAG,wBAAA;AACrB,IAAAC,iBAAc,GAAAJ,MAAgB,CAAAK,mBAAA;AAC5B,IAAAC,YAAA,GAAWN,MAAO,CAAAO,SAAM,CAAAC,cAAA;AACtB,IAAAC,QAAI,GAAAA,CAAIC,MAAA,EAAAC,GAAA,KAAe;EACrB,SAAAC,IAAK,IAAID,GAAA,EAAaZ,SACxB,CAAAW,MAAO,EAAAE,IAAA;IAAAC,GAAA,EAAAF,GAAA,CAAAC,IAAA;IAAAE,UAAA;EAAA;AACL;AAA6B,IAAAC,WAC/B,GAAAA,CAAAC,EAAA,EAAAC,IAAA,EAAAC,MAAA,EAAAC,IAAA;EAAA,IACFF,IAAA,WAAAA,IAAA,wBAAAA,IAAA;IACF,SAAAG,GAAA,IAAAhB,iBAAA,CAAAa,IAAA,GACA,IAAK,CAAAX,YAAM,CAAAe,IAAA,CAAAL,EAAA,EAAkBI,GAAE,KAAIA,GAAA,KAAAF,MAAA,EACnCnB,SAAO,CAAAiB,EAAA,EAAAI,GAAA;MAAAP,GAAA,EAAAA,CAAA,KAAAI,IAAA,CAAAG,GAAA;MAAAN,UAAA,IAAAK,IAAA,GAAAjB,gBAAA,CAAAe,IAAA,EAAAG,GAAA,MAAAD,IAAA,CAAAL;IAAA;EACT;EACE,OAAAE,EAAO;AAAC;AAEZ,IAAAM,YAAA,GAAAC,GAAA,IAAAR,WAAA,CAAAhB,SAAA;EAAAyB,KAAA;AAAA,IAAAD,GAAA","ignoreList":[]}
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","viewData_exports","getViewLeafRows","module","exports","table","leaves","walk","walk1","rows","_iteratorNormalCompletion","_didIteratorError","_iteratorError","_iterator","Symbol","iterator","_step","next","done","row","_row_getIsGrouped","getIsGrouped","_row_subRows","subRows","push","original","err","return","getSortedRowModel","unused"],"sources":["viewData.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n  for (var name in all)\n    __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar viewData_exports = {};\n__export(viewData_exports, {\n  getViewLeafRows: () => getViewLeafRows\n});\nmodule.exports = __toCommonJS(viewData_exports);\nfunction getViewLeafRows(table) {\n  try {\n    var leaves = [];\n    var walk = function walk1(rows) {\n      var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;\n      try {\n        for (var _iterator = rows[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {\n          var row = _step.value;\n          var _row_getIsGrouped;\n          if ((_row_getIsGrouped = row.getIsGrouped) === null || _row_getIsGrouped === void 0 ? void 0 : _row_getIsGrouped.call(row)) {\n            var _row_subRows;\n            walk((_row_subRows = row.subRows) !== null && _row_subRows !== void 0 ? _row_subRows : []);\n          } else {\n            leaves.push(row.original);\n          }\n        }\n      } catch (err) {\n        _didIteratorError = true;\n        _iteratorError = err;\n      } finally {\n        try {\n          if (!_iteratorNormalCompletion && _iterator.return != null) {\n            _iterator.return();\n          }\n        } finally {\n          if (_didIteratorError) {\n            throw _iteratorError;\n          }\n        }\n      }\n    };\n    walk(table.getSortedRowModel().rows);\n    return leaves;\n  } catch (unused) {\n    return [];\n  }\n}\n//# sourceMappingURL=viewData.js.map\n"],"mappings":"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","ignoreList":[]}

package/dist/jsx/utils/withInterp.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc"],"sources":["../../../src/utils/withInterp.ts"],"sourcesContent":[null],"mappings":"AAMO,YAAS;;AAId,IAAAA,SAAK,GAAAC,MAAW,CAAAC,cAAgB;AAChC,IAAAC,gBAAkB,GAAAF,MAAQ,CAAAG,wBAAsB;AAC9C,IAAAC,iBAAc,GAAAJ,MAAW,CAAAK,mBAAA;AACzB,IAAAC,YAAO,GAAAN,MAAU,CAAAO,SAAa,CAAAC,cAAiB;AAA2B,IAC3EC,QAAA,GAAAA,CAAAC,MAAA,EAAAC,GAAA;EACH,SAAAC,IAAA,IAAAD,GAAA,EAYOZ,SAAS,CAAAW,MAAA,EAAYE,IAAA,EAAsB;IAAAC,GAAA,EAAAF,GAAA,CAAAC,IAAA;IAAAE,UAAA;EAAA;AAChD;AACA,IAAAC,WAAO,GAASA,CAAAC,EAAA,EAAIC,IAAA,EAAAC,MAAA,EAAAC,IAAA;EACtB,IAAAF,IAAA,WAAAA,IAAA,wBAAAA,IAAA","ignoreList":[]}
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","withInterp_exports","bidiIsolate","withInterp","module","exports","translated","options","includes","replace","_","String","text"],"sources":["withInterp.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n  for (var name in all)\n    __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar withInterp_exports = {};\n__export(withInterp_exports, {\n  bidiIsolate: () => bidiIsolate,\n  withInterp: () => withInterp\n});\nmodule.exports = __toCommonJS(withInterp_exports);\nfunction withInterp(translated, options) {\n  if (!translated.includes(\"{{\")) return translated;\n  return translated.replace(/\\{\\{(\\w+)\\}\\}/g, function(_, key) {\n    var value = options[key];\n    return value === void 0 || value === null ? `{{${key}}}` : String(value);\n  });\n}\nfunction bidiIsolate(text) {\n  if (!text) return text;\n  return `\\u2068${text}\\u2069`;\n}\n//# sourceMappingURL=withInterp.js.map\n"],"mappings":"AAAA,YAAY;;AACZ,IAAIA,SAAS,GAAGC,MAAM,CAACC,cAAc;AACrC,IAAIC,gBAAgB,GAAGF,MAAM,CAACG,wBAAwB;AACtD,IAAIC,iBAAiB,GAAGJ,MAAM,CAACK,mBAAmB;AAClD,IAAIC,YAAY,GAAGN,MAAM,CAACO,SAAS,CAACC,cAAc;AAClD,IAAIC,QAAQ,GAAGA,CAACC,MAAM,EAAEC,GAAG,KAAK;EAC9B,KAAK,IAAIC,IAAI,IAAID,GAAG,EAClBZ,SAAS,CAACW,MAAM,EAAEE,IAAI,EAAE;IAAEC,GAAG,EAAEF,GAAG,CAACC,IAAI,CAAC;IAAEE,UAAU,EAAE;EAAK,CAAC,CAAC;AACjE,CAAC;AACD,IAAIC,WAAW,GAAGA,CAACC,EAAE,EAAEC,IAAI,EAAEC,MAAM,EAAEC,IAAI,KAAK;EAC5C,IAAIF,IAAI,IAAI,OAAOA,IAAI,KAAK,QAAQ,IAAI,OAAOA,IAAI,KAAK,UAAU,EAAE;IAClE,KAAK,IAAIG,GAAG,IAAIhB,iBAAiB,CAACa,IAAI,CAAC,EACrC,IAAI,CAACX,YAAY,CAACe,IAAI,CAACL,EAAE,EAAEI,GAAG,CAAC,IAAIA,GAAG,KAAKF,MAAM,EAC/CnB,SAAS,CAACiB,EAAE,EAAEI,GAAG,EAAE;MAAEP,GAAG,EAAEA,CAAA,KAAMI,IAAI,CAACG,GAAG,CAAC;MAAEN,UAAU,EAAE,EAAEK,IAAI,GAAGjB,gBAAgB,CAACe,IAAI,EAAEG,GAAG,CAAC,CAAC,IAAID,IAAI,CAACL;IAAW,CAAC,CAAC;EACxH;EACA,OAAOE,EAAE;AACX,CAAC;AACD,IAAIM,YAAY,GAAIC,GAAG,IAAKR,WAAW,CAAChB,SAAS,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE;EAAEyB,KAAK,EAAE;AAAK,CAAC,CAAC,EAAED,GAAG,CAAC;AAC1F,IAAIE,kBAAkB,GAAG,CAAC,CAAC;AAC3BhB,QAAQ,CAACgB,kBAAkB,EAAE;EAC3BC,WAAW,EAAEA,CAAA,KAAMA,WAAW;EAC9BC,UAAU,EAAEA,CAAA,KAAMA;AACpB,CAAC,CAAC;AACFC,MAAM,CAACC,OAAO,GAAGP,YAAY,CAACG,kBAAkB,CAAC;AACjD,SAASE,UAAUA,CAACG,UAAU,EAAEC,OAAO,EAAE;EACvC,IAAI,CAACD,UAAU,CAACE,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAOF,UAAU;EACjD,OAAOA,UAAU,CAACG,OAAO,CAAC,gBAAgB,EAAE,UAASC,CAAC,EAAEd,GAAG,EAAE;IAC3D,IAAII,KAAK,GAAGO,OAAO,CAACX,GAAG,CAAC;IACxB,OAAOI,KAAK,KAAK,KAAK,CAAC,IAAIA,KAAK,KAAK,IAAI,GAAG,KAAKJ,GAAG,IAAI,GAAGe,MAAM,CAACX,KAAK,CAAC;EAC1E,CAAC,CAAC;AACJ;AACA,SAASE,WAAWA,CAACU,IAAI,EAAE;EACzB,IAAI,CAACA,IAAI,EAAE,OAAOA,IAAI;EACtB,OAAO,SAASA,IAAI,QAAQ;AAC9B","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/table",
-  "version": "7.23.1",
+  "version": "7.24.0",
   "description": "Advanced table components with filtering, pagination, sorting, and URL state management",
   "keywords": [
     "cross-platform",
@@ -74,13 +74,13 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/components": "7.23.1",
-    "@multiplatform.one/forms": "7.23.1",
-    "@multiplatform.one/platform": "7.23.1",
-    "@multiplatform.one/rich-text": "7.23.1",
-    "@multiplatform.one/router": "7.23.1",
-    "@multiplatform.one/table-primitives": "7.23.1",
-    "@multiplatform.one/theme": "7.23.1",
+    "@multiplatform.one/components": "7.24.0",
+    "@multiplatform.one/forms": "7.24.0",
+    "@multiplatform.one/platform": "7.24.0",
+    "@multiplatform.one/rich-text": "7.24.0",
+    "@multiplatform.one/router": "7.24.0",
+    "@multiplatform.one/table-primitives": "7.24.0",
+    "@multiplatform.one/theme": "7.24.0",
     "@phosphor-icons/react": "^2.1.10",
     "@shopify/flash-list": "^2.3.1",
     "@tamagui/roving-focus": "2.7.6",
@@ -90,10 +90,10 @@
     "tamagui": "2.7.6"
   },
   "devDependencies": {
-    "@multiplatform.one/config": "7.23.1",
-    "@multiplatform.one/router": "7.23.1",
-    "@multiplatform.one/storybook": "7.23.1",
-    "@multiplatform.one/test-utils": "7.23.1",
+    "@multiplatform.one/config": "7.24.0",
+    "@multiplatform.one/router": "7.24.0",
+    "@multiplatform.one/storybook": "7.24.0",
+    "@multiplatform.one/test-utils": "7.24.0",
     "@tamagui/build": "2.7.6",
     "@testing-library/react": "^16.3.2",
     "@types/react-dom": "^19.2.3",

package/src/components/ChildTable/ChildTable.stories.tsx

@@ -145,3 +145,109 @@ const InsideFormStory = () => {
 export const InsideForm: Story = {
   render: () => <InsideFormStory />,
 };
+
+interface OrderLine extends DataTableData {
+  id: string;
+  idx: number;
+  item: string;
+  qty: number;
+  status: string;
+  deliverBy: string;
+  rate: number;
+  urgent: boolean;
+  notes: string;
+}
+
+const orderLines: OrderLine[] = [
+  {
+    id: "line-1",
+    idx: 1,
+    item: "Steel bracket",
+    qty: 12,
+    status: "ordered",
+    deliverBy: "2026-10-20",
+    rate: 4.5,
+    urgent: false,
+    notes: "",
+  },
+  {
+    id: "line-2",
+    idx: 2,
+    item: "M6 bolts (100pk)",
+    qty: 3,
+    status: "draft",
+    deliverBy: "2026-10-12",
+    rate: 11.25,
+    urgent: true,
+    notes: "Split across two pallets",
+  },
+  {
+    id: "line-3",
+    idx: 3,
+    item: "Powder coat, black",
+    qty: 1,
+    status: "received",
+    deliverBy: "2026-11-01",
+    rate: 89,
+    urgent: false,
+    notes: "",
+  },
+];
+
+const statusOptions = [
+  { label: "Draft", value: "draft" },
+  { label: "Ordered", value: "ordered" },
+  { label: "Received", value: "received" },
+  { label: "Cancelled", value: "cancelled" },
+  { label: "Shipped", value: "shipped" },
+  { label: "Returned", value: "returned" },
+];
+
+const gridColumns: DataTableColumn<OrderLine>[] = [
+  { accessorKey: "item", header: "Item", field: "input" },
+  { accessorKey: "qty", header: "Qty", field: "stepper", fieldProps: { min: 0 } },
+  {
+    accessorKey: "status",
+    header: "Status",
+    field: "select",
+    fieldProps: { options: statusOptions },
+  },
+  { accessorKey: "deliverBy", header: "Deliver by", field: "datepicker" },
+];
+
+const detailColumns: DataTableColumn<OrderLine>[] = [
+  ...gridColumns,
+  {
+    accessorKey: "rate",
+    header: "Rate",
+    field: "stepper",
+    fieldProps: { min: 0, step: 0.25, precision: 2, currency: "USD" },
+  },
+  { accessorKey: "urgent", header: "Urgent", field: "checkbox" },
+  { accessorKey: "notes", header: "Notes", field: "textarea" },
+];
+
+const RowDetailStory = (args: Record<string, unknown>) => {
+  const [rows, setRows] = React.useState<OrderLine[]>(orderLines);
+  return (
+    <YStack gap="$3">
+      <ChildTable<OrderLine>
+        {...args}
+        label="Order lines"
+        helperText="The grid shows the list columns; the pencil opens the whole row."
+        value={rows}
+        columns={gridColumns}
+        detailColumns={detailColumns}
+        rowDetail
+        onChange={setRows}
+      />
+      <Text testID="childtable-idx" fontSize="$2" color="$color10" fontFamily="$mono">
+        idx: {rows.map((row) => `${row.idx}:${row.item}`).join(" | ")}
+      </Text>
+    </YStack>
+  );
+};
+
+export const RowDetail: Story = {
+  render: (args) => <RowDetailStory {...args} />,
+};

package/src/components/ColumnHeaderFilter/index.tsx

@@ -16,7 +16,7 @@ import {
 } from "@multiplatform.one/theme";
 import { useState } from "react";
 import { Tooltip } from "@multiplatform.one/components";
-import { Text, View, XStack, YStack } from "tamagui";
+import { Text, View, XStack, YStack, styled } from "tamagui";
 import { t } from "../../shared/t";
 import type { DataTableColumnType, FilterOperator } from "../../types";
 import { iconSizeForToken } from "../../utils/chromeIcons";
@@ -54,6 +54,8 @@ const FILTER_TRIGGER_OUTSET = Math.max(
   Math.ceil((MIN_PRESS_TARGET - FILTER_TRIGGER_VISUAL) / 2),
 );
 
+const FilterTriggerTarget = styled(View, { name: "FilterTriggerTarget" });
+
 export function ColumnHeaderFilter({
   columnId: _columnId,
   columnLabel,
@@ -116,7 +118,7 @@ export function ColumnHeaderFilter({
         negative outsets. Painted hover and keyboard focus feedback
         ride the glyph-scale ring inside
         (Chip dismiss anatomy). */}
-      <View
+      <FilterTriggerTarget
         cursor="pointer"
         {...pressTargetStyle()}
         alignItems="center"
@@ -156,7 +158,7 @@ export function ColumnHeaderFilter({
         >
           <FunnelIcon size={iconPx} color={glyphColor} weight={isFiltered ? "fill" : "regular"} />
         </View>
-      </View>
+      </FilterTriggerTarget>
     </Tooltip>
   );
 

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

@@ -2979,7 +2979,7 @@ export const CompoundComposition: Story = {
  * selection checkboxes and the per-row Edit button here — stay isolated:
  * pressing them never fires the row press.
  */
-const RowPressStory = () => {
+const RowPressStory = ({ body }: { body?: "virtual" | "list" }) => {
   const data = useMemo(() => generateUsers(8), []);
   const rowPressColumns = useMemo<DataTableColumn<User>[]>(
     () => [
@@ -3018,6 +3018,8 @@ const RowPressStory = () => {
       onRowPress={fn()}
       rowLabel={(row) => (row as User).firstName}
       aria-label="Row press table"
+      {...(body === "list" ? { layout: "list" as const } : {})}
+      {...(body === "virtual" ? { enableVirtualization: true, virtualizationHeight: 400 } : {})}
     />
   );
 };
@@ -3034,6 +3036,30 @@ export const RowPress: Story = {
   },
 };
 
+export const RowPressVirtualized: Story = {
+  render: () => <RowPressStory body="virtual" />,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The RowPress contract on virtual rows. A selected row hovers and presses off the fill it rests on, as in the grid (MPO-408).",
+      },
+    },
+  },
+};
+
+export const RowPressList: Story = {
+  render: () => <RowPressStory body="list" />,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The RowPress contract on the document list. A selected row hovers and presses off the fill it rests on, as in the grid (MPO-408).",
+      },
+    },
+  },
+};
+
 // ============================================================================
 // CUSTOM-CELL ALIGNMENT (DG-TBL-01 for custom renderers)
 // ============================================================================

package/src/components/DataTable/DataTableDocumentList.tsx

@@ -87,6 +87,7 @@ export function DataTableDocumentList<TData extends Record<string, any>>({
         selected,
         zebraOn: tableZebraOn,
         index,
+        pressable: Boolean(getRowPressProps),
       });
 
       return (

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

@@ -12,6 +12,7 @@
 
 import type { Meta } from "@storybook/react-native-web-vite";
 import { useState } from "react";
+import { fn } from "storybook/test";
 import { YStack } from "tamagui";
 import type { DataTableColumn } from "../../types";
 import { DataTable } from "./index";
@@ -79,6 +80,17 @@ export const Selection = {
   render: () => <CardTable enableRowSelection />,
 };
 
+/**
+ * `onRowPress` makes each card one pressable unit. A pressed card paints one
+ * ramp step above the fill it rests on, never below `$color4`, so the press
+ * shows at every elevation and on a zebra stripe.
+ */
+export const Pressable = {
+  render: () => (
+    <CardTable onRowPress={fn()} rowLabel={(row: Person) => `${row.firstName} ${row.lastName}`} />
+  ),
+};
+
 function DeletableCards() {
   const [rows, setRows] = useState(people);
   return (

package/src/components/DataTable/DataTableMobileCards.tsx

@@ -27,7 +27,11 @@ import type React from "react";
 import { useCallback } from "react";
 import { Text, View, VisuallyHidden, XStack } from "tamagui";
 import { useTranslation } from "react-i18next";
-import { TableCellContext, tableZebraFill } from "@multiplatform.one/table-primitives";
+import {
+  TableCellContext,
+  tablePressFill,
+  tableZebraFill,
+} from "@multiplatform.one/table-primitives";
 import type { DataTableColumn, DataTableField } from "../../types";
 import { withInterp } from "../../utils/withInterp";
 import { rowIntentProps } from "./dataTableChrome";
@@ -132,7 +136,8 @@ export interface DataTableMobileCardsProps<TData> {
    * 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.
+   * roving focus, and inner-control isolation as grid rows. The card paints
+   * its own press fill, off the fill it rests on (MPO-404).
    */
   getRowPressProps?: (row: any, rowIndex: number, variant?: "row" | "card") => Record<string, any>;
   /** In-flight refetch: do not paint empty-state over a blank body. */
@@ -189,19 +194,23 @@ export function DataTableMobileCards<TData extends Record<string, any>>({
         else if (kind === "control") controls.push(cell);
       }
       const hasBody = bare.length > 0 || figures.length > 0 || controls.length > 0;
+      const cardFill = knobProps.cardSurface.backgroundColor;
+      const restFill = tableZebraOn && index % 2 === 1 ? tableZebraFill(cardFill) : cardFill;
+      const pressProps = getRowPressProps?.(row, index, "card") ?? {};
 
       return (
         <View
           key={`${row.id}-${index}`}
           testID="data-table-card"
           {...knobProps.cardSurface}
-          {...(tableZebraOn && index % 2 === 1
-            ? { backgroundColor: tableZebraFill(knobProps.cardSurface.backgroundColor) }
-            : {})}
+          backgroundColor={restFill}
           {...({
             "data-table-zebra": tableZebraOn ? (index % 2 === 0 ? "even" : "odd") : "off",
           } as any)}
-          {...(getRowPressProps ? (getRowPressProps(row, index, "card") as any) : {})}
+          {...(pressProps as any)}
+          {...(pressProps.onPress
+            ? { pressStyle: { backgroundColor: tablePressFill(restFill) } }
+            : {})}
           {...(rowIntentProps(rowData) as any)}
         >
           {/* Card header: selection + primary-column title + row number + delete */}

package/src/components/DataTable/DataTableRoot.tsx

@@ -609,7 +609,6 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
         "aria-label": deriveRowLabel(row, rowIndex),
         onPress: handlePress,
         cursor: "pointer" as const,
-        pressStyle: { backgroundColor: "$color4" },
         ...(variant === "card" ? { role: "button" as const } : {}),
         ...(isWeb && !isSSR
           ? {
@@ -1963,6 +1962,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                                 keyboardFocused: false,
                                 zebraOn: tableZebraOn,
                                 index,
+                                pressable: rowPressActive,
                               }) as any)}
                               {...({ animation: "quick" } as any)}
                               flexShrink={0}
@@ -2098,10 +2098,11 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                         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
+                        (a zero-height row whose cell paints the fade upward
+                        over the last visible row). Rendered as a Table.Row
+                        and a <td>: a <div> is not a valid child of the real
+                        <tbody> or <tr> (SSR parsers foster-parent it out of
+                        the table). Only reachable in the flex displayMode
                         (bodyClipped needs a scrollable body), where the row
                         renders display:flex like the old View. */}
                     {isWeb && bodyClipped && (
@@ -2110,17 +2111,25 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                         role="presentation"
                         position={"sticky" as any}
                         bottom={0}
-                        height={28}
-                        marginTop={-28}
+                        height={0}
                         flexShrink={0}
                         zIndex={2}
                         pointerEvents="none"
                         {...({ "data-table-clip-affordance": "true" } as any)}
-                        style={{
-                          background:
-                            "linear-gradient(to bottom, rgba(0,0,0,0), var(--background))",
-                        }}
-                      />
+                      >
+                        <View
+                          {...({ render: "td" } as Record<string, unknown>)}
+                          position="absolute"
+                          left={0}
+                          right={0}
+                          bottom={0}
+                          height={28}
+                          style={{
+                            background:
+                              "linear-gradient(to bottom, rgba(0,0,0,0), var(--background))",
+                          }}
+                        />
+                      </Table.Row>
                     )}
                   </Table.Body>
 

package/src/components/DataTable/DataTableVirtualized.tsx

@@ -195,6 +195,7 @@ export function DataTableVirtualized({
                 keyboardFocused: false,
                 zebraOn: tableZebraOn,
                 index: virtualRow.index,
+                pressable: Boolean(getRowPressProps),
               }) as any)}
               {...({
                 "data-table-zebra": tableZebraOn

package/src/components/DataTable/dataTableMobileCards.spec.tsx

@@ -19,7 +19,9 @@ import { Preset } from "@multiplatform.one/theme";
 import { fireEvent, screen, waitFor, within } from "@testing-library/react";
 import { Theme } from "tamagui";
 import { describe, expect, it, vi } from "vitest";
+import type React from "react";
 import type { DataTableColumn, TableFilter } from "../../types";
+import { DataTableMobileCards } from "./DataTableMobileCards";
 import { DataTable } from "./index";
 
 type Person = {
@@ -221,4 +223,129 @@ describe("DataTableMobileCards", () => {
       expect(cardFills("light").slice(0, 2)).toEqual([["_bg-background"], ["_bg-color2"]]);
     });
   });
+
+  describe("a pressed card steps off the fill it rests on (MPO-404)", () => {
+    type Scheme = "light" | "dark";
+    type Elevation = "none" | "small" | "medium" | "large";
+    const schemes: Scheme[] = ["light", "dark"];
+    const elevations: Elevation[] = ["none", "small", "medium", "large"];
+    const zebras = ["off", "on"] as const;
+
+    /** `rest>press` for one card, read off its atomic classes. */
+    function paint(card: Element): string {
+      const classes = Array.from(card.classList);
+      const rest = classes.find((name) => /^_bg-(?!0)/.test(name))?.slice("_bg-".length);
+      const press = classes
+        .find((name) => name.startsWith("_bg-0active-"))
+        ?.slice("_bg-0active-".length);
+      return `${rest}>${press}`;
+    }
+
+    function wrap(scheme: Scheme, ui: React.ReactElement) {
+      return renderWithProviders(scheme === "dark" ? <Theme name="dark">{ui}</Theme> : ui);
+    }
+
+    function pressedCards(scheme: Scheme, elevation: Elevation, zebra: "on" | "off") {
+      const { container, unmount } = wrap(
+        scheme,
+        <Preset overrides={{ tableZebra: zebra, elevation }}>
+          <DataTable
+            data={people}
+            columns={columns}
+            layout="cards"
+            onRowPress={vi.fn()}
+            onStateChange={vi.fn()}
+          />
+        </Preset>,
+      );
+      const painted = cards(container).slice(0, 2).map(paint);
+      unmount();
+      return painted;
+    }
+
+    let rendered: Record<string, string[]> | undefined;
+    const matrix = () =>
+      (rendered ??= Object.fromEntries(
+        schemes.flatMap((scheme) =>
+          elevations.flatMap((elevation) =>
+            zebras.map((zebra) => [
+              `${scheme} ${elevation} zebra-${zebra}`,
+              pressedCards(scheme, elevation, zebra),
+            ]),
+          ),
+        ),
+      ));
+
+    it("an even and an odd card change fill on press at every elevation, zebra on and off, both schemes", () => {
+      const unchanged = Object.entries(matrix()).flatMap(([cell, pair]) =>
+        pair
+          .filter((rp) => {
+            const [rest, press] = rp.split(">");
+            return !press || press === "undefined" || press === rest;
+          })
+          .map((rp) => `${cell}: ${rp}`),
+      );
+      expect(unchanged).toEqual([]);
+    });
+
+    it("presses one ramp step above the rest fill, floored at $color4", () => {
+      expect(matrix()).toEqual({
+        "light none zebra-off": ["background>color4", "background>color4"],
+        "light none zebra-on": ["background>color4", "color2>color4"],
+        "light small zebra-off": ["background>color4", "background>color4"],
+        "light small zebra-on": ["background>color4", "color2>color4"],
+        "light medium zebra-off": ["background>color4", "background>color4"],
+        "light medium zebra-on": ["background>color4", "color2>color4"],
+        "light large zebra-off": ["background>color4", "background>color4"],
+        "light large zebra-on": ["background>color4", "color2>color4"],
+        "dark none zebra-off": ["background>color4", "background>color4"],
+        "dark none zebra-on": ["background>color4", "color2>color4"],
+        "dark small zebra-off": ["color2>color4", "color2>color4"],
+        "dark small zebra-on": ["color2>color4", "color3>color4"],
+        "dark medium zebra-off": ["color3>color4", "color3>color4"],
+        "dark medium zebra-on": ["color3>color4", "color4>color5"],
+        "dark large zebra-off": ["color4>color5", "color4>color5"],
+        "dark large zebra-on": ["color4>color5", "color5>color6"],
+      });
+    });
+
+    it("owns its press fill whatever press props a root hands it (the native root's shape)", () => {
+      const nativeRootPressProps = () => ({
+        onPress: vi.fn(),
+        role: "button",
+        "aria-label": "Row",
+        pressStyle: { backgroundColor: "$color4" },
+      });
+      const rows = people.map((person, index) => ({
+        id: String(index),
+        original: person,
+        getIsSelected: () => false,
+        getVisibleCells: () => [
+          {
+            id: `${index}_firstName`,
+            column: { id: "firstName", columnDef: { header: "First Name" } },
+            getValue: () => person.firstName,
+          },
+        ],
+      }));
+      const { container } = wrap(
+        "dark",
+        <Preset overrides={{ tableZebra: "on", elevation: "large" }}>
+          <DataTableMobileCards
+            tableRows={rows}
+            showRowNumbers={false}
+            showDeleteRow={false}
+            readOnly
+            dataLength={rows.length}
+            minRows={0}
+            hasActiveFilters={false}
+            renderCellContent={(cell) => cell.getValue()}
+            onDeleteRow={vi.fn()}
+            getRowPressProps={nativeRootPressProps}
+          />
+        </Preset>,
+      );
+      expect(cards(container).slice(0, 2).map(paint)).toEqual(["color4>color5", "color5>color6"]);
+    });
+  });
 });

package/src/components/DataTable/index.native.tsx

@@ -567,7 +567,6 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
         onPress: () => onRowPress?.(row.original as TData, index),
         role: "button" as const,
         "aria-label": deriveRowLabel(row, index),
-        pressStyle: { backgroundColor: "$color4" },
       };
     },
     [rowPressActive, onRowPress, deriveRowLabel],
@@ -580,6 +579,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
           selected: Boolean(row.getIsSelected?.()),
           zebraOn: tableZebraOn,
           index,
+          pressable: rowPressActive,
         }) as any)}
         rowLocation="middle"
         key={`${row.id}-${index}`}
@@ -594,7 +594,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
         {renderRowContent(row, index)}
       </Table.Row>
     ),
-    [renderRowContent, tableZebraOn, t, getRowPressProps],
+    [renderRowContent, tableZebraOn, t, getRowPressProps, rowPressActive],
   );
 
   const renderToolbarComponent = () => {
@@ -771,6 +771,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
                     flex={1}
                     flexDirection="column"
                     width="100%"
+                    paddingBottom={enablePagination ? "$10" : undefined}
                     aria-label={`${ariaLabel || "Data table"} content`}
                   >
                     <Table
@@ -779,7 +780,6 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
                       cellHeight={cellHeight}
                       {...knobProps.borderRadiusOuter}
                       width="100%"
-                      marginBottom={enablePagination ? "$10" : undefined}
                       aria-label={ariaLabel || "Data table"}
                       aria-rowcount={computed.totalPages * state.pagination.pageSize}
                       aria-colcount={

package/src/components/DataTable/rowStateChrome.ts

@@ -6,7 +6,7 @@
  * cell when Excel-mode keyboard nav is on the cell).
  */
 
-import { tableZebraFill } from "@multiplatform.one/table-primitives";
+import { tablePressFill, tableZebraFill } from "@multiplatform.one/table-primitives";
 import { ensureFocusVisibleRing, keyboardFocusRingProps } from "@multiplatform.one/theme";
 
 export const tableRowFocusVisibleStyle = ensureFocusVisibleRing({ outlineOffset: -2 });
@@ -16,14 +16,18 @@ export function tableRowStateProps(opts: {
   keyboardFocused?: boolean;
   zebraOn?: boolean;
   index?: number;
+  pressable?: boolean;
 }): Record<string, unknown> {
   const selected = Boolean(opts.selected);
   const keyboardFocused = Boolean(opts.keyboardFocused);
   const zebra = Boolean(opts.zebraOn) && (opts.index ?? 0) % 2 === 1;
-  const rest = zebra ? tableZebraFill("$color1") : "$color1";
+  const rest = selected ? "$color4" : zebra ? tableZebraFill("$color1") : "$color1";
+  const hover = selected ? tablePressFill(rest) : "$color3";
   return {
-    backgroundColor: selected ? "$color4" : rest,
-    hoverStyle: { backgroundColor: selected ? "$color4" : "$color3" },
+    backgroundColor: rest,
+    hoverStyle: { backgroundColor: hover },
+    // A pointer press is hovered too, so the press steps off the hover fill.
+    ...(opts.pressable ? { pressStyle: { backgroundColor: tablePressFill(hover) } } : {}),
     ...(keyboardFocused ? keyboardFocusRingProps : {}),
     "aria-selected": selected ? true : undefined,
     "data-row-selected": selected ? "true" : "false",