@multiplatform.one/table 7.23.2 → 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.2",
+  "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.2",
-    "@multiplatform.one/forms": "7.23.2",
-    "@multiplatform.one/platform": "7.23.2",
-    "@multiplatform.one/rich-text": "7.23.2",
-    "@multiplatform.one/router": "7.23.2",
-    "@multiplatform.one/table-primitives": "7.23.2",
-    "@multiplatform.one/theme": "7.23.2",
+    "@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.2",
-    "@multiplatform.one/router": "7.23.2",
-    "@multiplatform.one/storybook": "7.23.2",
-    "@multiplatform.one/test-utils": "7.23.2",
+    "@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/DataTableRoot.tsx

@@ -609,9 +609,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
         "aria-label": deriveRowLabel(row, rowIndex),
         onPress: handlePress,
         cursor: "pointer" as const,
-        ...(variant === "card"
-          ? { role: "button" as const }
-          : { pressStyle: { backgroundColor: "$color4" } }),
+        ...(variant === "card" ? { role: "button" as const } : {}),
         ...(isWeb && !isSSR
           ? {
               tabIndex: rowIndex === effectiveRowPressAnchor ? 0 : -1,
@@ -1964,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}
@@ -2099,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 && (
@@ -2111,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/index.native.tsx

@@ -561,13 +561,12 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
   const getRowPressProps = useCallback(
     // The card list asks for the "card" variant. Native carries no DOM row
     // role for it to override, so both variants land on role="button".
-    (row: (typeof tableRows)[0], index: number, variant: "row" | "card" = "row") => {
+    (row: (typeof tableRows)[0], index: number, _variant: "row" | "card" = "row") => {
       if (!rowPressActive) return {};
       return {
         onPress: () => onRowPress?.(row.original as TData, index),
         role: "button" as const,
         "aria-label": deriveRowLabel(row, index),
-        ...(variant === "row" ? { 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",