@multiplatform.one/table 7.7.6 → 7.10.0

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

@@ -7,7 +7,7 @@
  * breakpoint switch are exercised without resizing a window.
  *
  * Covers: breakpoint/override switching, card anatomy (title slot +
- * label/value rows), column visibility, sorting order, global search,
+ * classified fields), column visibility, sorting order, global search,
  * column filters, the card sort/filter controls, the SimpleTable layout
  * override, and the Table primitives card layout.
  */
@@ -127,7 +127,7 @@ describe("DataTable card layout", () => {
   });
 
   describe("card anatomy", () => {
-    it("renders the first visible column as the card title and the rest as label/value rows", () => {
+    it("renders the first visible column as the card title and classifies the rest", () => {
       const { container } = renderWithProviders(
         <DataTable data={sampleData} columns={columns} onStateChange={vi.fn()} />,
       );
@@ -140,15 +140,21 @@ describe("DataTable card layout", () => {
       expect(title!.textContent).toContain("John");
       expect(within(firstCard).queryByText("First Name")).toBeNull();
 
-      // Remaining visible columns render as label/value rows.
-      expect(within(firstCard).getByText("Last Name")).toBeDefined();
+      // A self-naming string goes bare. Its column name still reaches
+      // assistive tech, through a hidden node that costs no layout.
+      expect(within(firstCard).queryByText("Last Name")).toBeNull();
+      expect(within(firstCard).queryByText("Email")).toBeNull();
+      expect(firstCard.textContent).toContain("Last Name:");
+      expect(firstCard.textContent).toContain("Email:");
+
+      // A figure cannot be read without its name, so that one prints.
       expect(within(firstCard).getByText("Age")).toBeDefined();
-      expect(within(firstCard).getByText("Email")).toBeDefined();
+
       expect(firstCard.textContent).toContain("Doe");
       expect(firstCard.textContent).toContain("28");
     });
 
-    it("labels field rows from meta.label when the header is a render function", () => {
+    it("names a control from meta.label when the header is a render function", () => {
       const glyphColumns: DataTableColumn<Person>[] = [
         { id: "firstName", accessorKey: "firstName", header: "First Name" },
         {
@@ -162,7 +168,9 @@ describe("DataTable card layout", () => {
         <DataTable data={sampleData} columns={glyphColumns} onStateChange={vi.fn()} />,
       );
       const [firstCard] = getCards(container);
-      expect(within(firstCard).getByText("Liked")).toBeDefined();
+      // A leading underscore marks a control: its own row, no printed label.
+      expect(within(firstCard).queryByText("Liked")).toBeNull();
+      expect(firstCard.textContent).toContain("Liked:");
       expect(firstCard.textContent).not.toContain("_liked_by");
     });
 
@@ -180,9 +188,11 @@ describe("DataTable card layout", () => {
         <DataTable data={sampleData} columns={mixedColumns} onStateChange={vi.fn()} />,
       );
       const [firstCard] = getCards(container);
+      // A figure prints its name, a bare string hides it. meta.label wins
+      // either way, and the id fallback stays honest.
       expect(within(firstCard).getByText("Age (years)")).toBeDefined();
       expect(within(firstCard).queryByText("♥")).toBeNull();
-      expect(within(firstCard).getByText("email_addr")).toBeDefined();
+      expect(firstCard.textContent).toContain("email_addr:");
     });
 
     it("respects column visibility (hidden columns stay hidden in cards)", () => {
@@ -196,6 +206,7 @@ describe("DataTable card layout", () => {
       );
       const [firstCard] = getCards(container);
       expect(within(firstCard).queryByText("Email")).toBeNull();
+      expect(firstCard.textContent).not.toContain("Email:");
       expect(firstCard.textContent).not.toContain("john@example.com");
     });
   });

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

@@ -0,0 +1,195 @@
+/**
+ * MPO-236 — per-column width under `columnLayout: "equal"`.
+ *
+ * `equal` is the default, and it flexes every cell to `flexGrow: 1,
+ * flexBasis: 0`. A column's `width` / `size` therefore never reaches the cell
+ * box: the render comes out identical to one that declared no widths at all,
+ * which reads as "the widths ARE applied and are not enough" and sends the
+ * reader looking in the wrong place.
+ *
+ * The default is not changed here — that would move every existing table's
+ * render. The combination warns instead, naming `columnLayout` as the reason.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { DataTableColumn } from "../../types";
+import { __resetTableDevWarnSeen, warnColumnWidthIgnored } from "../../shared/devWarn";
+import { DataTable } from "./index";
+
+type Pokemon = { id: number; name: string; xp: number };
+
+const sampleData: Pokemon[] = [
+  { id: 1, name: "Bulbasaur", xp: 64 },
+  { id: 2, name: "Charmander", xp: 62 },
+];
+
+const plainColumns: DataTableColumn<Pokemon>[] = [
+  { id: "name", accessorKey: "name", header: "Name" },
+  { id: "xp", accessorKey: "xp", header: "XP" },
+];
+
+const widthColumns: DataTableColumn<Pokemon>[] = [
+  { id: "name", accessorKey: "name", header: "Name", width: 320 },
+  { id: "xp", accessorKey: "xp", header: "XP", width: 80 },
+];
+
+let warnings: string[] = [];
+let warnSpy: ReturnType<typeof vi.spyOn>;
+
+function startCapture() {
+  warnings = [];
+  __resetTableDevWarnSeen();
+  warnSpy = vi.spyOn(console, "warn").mockImplementation((...args) => {
+    warnings.push(args.map((arg) => String(arg)).join(" "));
+  });
+}
+
+function stopCapture() {
+  warnSpy.mockRestore();
+  __resetTableDevWarnSeen();
+}
+
+/** Only this rule's warnings — other table chrome may warn for its own reasons. */
+function widthWarnings(): string[] {
+  return warnings.filter((line) => line.includes("column-width-ignored"));
+}
+
+/**
+ * React 19's client `useId` counter is module-global (`_r_<base32>_`), so two
+ * renders in one process never share generated ids. Normalize them out before
+ * comparing markup.
+ */
+function stripGeneratedIds(html: string): string {
+  return html.replace(/_r_[0-9a-z]+_/g, "_r_id_");
+}
+
+/** `columnLayout` omitted on purpose in most calls: "equal" is the default. */
+function renderTable(
+  columns: DataTableColumn<Pokemon>[],
+  columnLayout?: "equal" | "auto" | "scroll",
+) {
+  return renderWithProviders(
+    <DataTable
+      data={sampleData}
+      columns={columns as DataTableColumn<Record<string, any>>[]}
+      layout="table"
+      columnLayout={columnLayout}
+      enablePagination={false}
+      readOnly
+    />,
+  );
+}
+
+describe("warnColumnWidthIgnored", () => {
+  let prevEnv: string | undefined;
+
+  beforeEach(() => {
+    prevEnv = process.env.NODE_ENV;
+    process.env.NODE_ENV = "development";
+    startCapture();
+  });
+
+  afterEach(() => {
+    stopCapture();
+    process.env.NODE_ENV = prevEnv;
+  });
+
+  it("names columnLayout and the offending columns", () => {
+    warnColumnWidthIgnored({ columnLayout: "equal", columns: widthColumns });
+    expect(widthWarnings()).toHaveLength(1);
+    expect(widthWarnings()[0]).toContain("[table] column-width-ignored");
+    expect(widthWarnings()[0]).toContain("columnLayout=equal");
+    expect(widthWarnings()[0]).toContain("columns=name,xp");
+  });
+
+  it("catches the TanStack `size` spelling too", () => {
+    warnColumnWidthIgnored({ columnLayout: "equal", columns: [{ id: "avatar", size: 60 }] });
+    expect(widthWarnings()).toHaveLength(1);
+    expect(widthWarnings()[0]).toContain("columns=avatar");
+  });
+
+  it("falls back to accessorKey, then position, for the column name", () => {
+    warnColumnWidthIgnored({
+      columnLayout: "equal",
+      columns: [{ accessorKey: "xp", width: 80 }, { size: 60 }],
+    });
+    expect(widthWarnings()[0]).toContain("columns=xp,#1");
+  });
+
+  it("stays quiet when no column declares a width", () => {
+    warnColumnWidthIgnored({ columnLayout: "equal", columns: plainColumns });
+    expect(widthWarnings()).toHaveLength(0);
+  });
+
+  it.each(["auto", "scroll"] as const)("stays quiet under columnLayout=%s", (columnLayout) => {
+    warnColumnWidthIgnored({ columnLayout, columns: widthColumns });
+    expect(widthWarnings()).toHaveLength(0);
+  });
+
+  it("stays quiet with enableColumnResizing, where the width does survive", () => {
+    warnColumnWidthIgnored({
+      columnLayout: "equal",
+      enableColumnResizing: true,
+      columns: widthColumns,
+    });
+    expect(widthWarnings()).toHaveLength(0);
+  });
+
+  it("no-ops in production", () => {
+    process.env.NODE_ENV = "production";
+    warnColumnWidthIgnored({ columnLayout: "equal", columns: widthColumns });
+    expect(widthWarnings()).toHaveLength(0);
+  });
+
+  it("warns once per offending column set, not once per call", () => {
+    warnColumnWidthIgnored({ columnLayout: "equal", columns: widthColumns });
+    warnColumnWidthIgnored({ columnLayout: "equal", columns: widthColumns });
+    warnColumnWidthIgnored({ columnLayout: "equal", columns: widthColumns });
+    expect(widthWarnings()).toHaveLength(1);
+  });
+});
+
+describe("DataTable columnLayout=equal with per-column widths", () => {
+  beforeEach(startCapture);
+  afterEach(stopCapture);
+
+  it("discards the widths: the markup matches a table that declared none", () => {
+    const withWidths = renderTable(widthColumns);
+    const widthMarkup = stripGeneratedIds(withWidths.container.innerHTML);
+    withWidths.unmount();
+
+    const withoutWidths = renderTable(plainColumns);
+    expect(stripGeneratedIds(withoutWidths.container.innerHTML)).toBe(widthMarkup);
+  });
+
+  it("warns, so the discard is not silent", () => {
+    renderTable(widthColumns);
+    expect(widthWarnings()).toHaveLength(1);
+    expect(widthWarnings()[0]).toContain("component=DataTable");
+  });
+
+  it("warns once per table, not once per render", () => {
+    const { rerender } = renderTable(widthColumns);
+    rerender(
+      <DataTable
+        data={[...sampleData, { id: 3, name: "Squirtle", xp: 63 }]}
+        columns={widthColumns as DataTableColumn<Record<string, any>>[]}
+        layout="table"
+        enablePagination={false}
+        readOnly
+      />,
+    );
+    expect(widthWarnings()).toHaveLength(1);
+  });
+
+  it("does not warn under columnLayout=auto", () => {
+    renderTable(widthColumns, "auto");
+    expect(widthWarnings()).toHaveLength(0);
+  });
+
+  it("does not warn for a table with no per-column widths", () => {
+    renderTable(plainColumns);
+    expect(widthWarnings()).toHaveLength(0);
+  });
+});

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

@@ -8,10 +8,14 @@
  * delete cluster beside the title, the delete floor at `minRows`, and the two
  * distinct empty-state copies (no data vs no results) — plus the rule that an
  * in-flight refetch paints NO empty state over a momentarily blank body.
+ *
+ * It also pins `classifyCardField`, which decides whether a field prints its
+ * column name at all. In the grid a header is written once for a whole
+ * column; on a card it would be written once per value.
  */
 
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { fireEvent, screen, waitFor, within } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import type { DataTableColumn, TableFilter } from "../../types";
 import { DataTable } from "./index";
@@ -52,7 +56,7 @@ describe("DataTableMobileCards", () => {
     expect(cards(container).length).toBe(people.length);
   });
 
-  it("the first visible column is the card title, the rest are label/value rows", () => {
+  it("the first visible column is the card title, the rest are classified fields", () => {
     const { container } = renderCards();
     const first = cards(container)[0];
     expect(first.querySelector('[data-card-slot="title"]')?.textContent).toBe("John");
@@ -69,6 +73,50 @@ describe("DataTableMobileCards", () => {
     expect(first.textContent).not.toContain("Last Name");
   });
 
+  it("a self-naming string goes bare, into one wrapped flow with its name hidden", () => {
+    const { container } = renderCards();
+    const first = cards(container)[0];
+    const meta = first.querySelector('[data-card-slot="meta"]');
+    expect(meta).not.toBeNull();
+    expect(meta!.textContent).toContain("Doe");
+    expect(within(first).queryByText("Last Name")).toBeNull();
+    expect(first.textContent).toContain("Last Name:");
+  });
+
+  it("a figure keeps its column name, inline beside the value", () => {
+    const { container } = renderCards();
+    const first = cards(container)[0];
+    const figure = first.querySelector('[data-card-slot="figure"]');
+    expect(figure).not.toBeNull();
+    expect(figure!.textContent).toContain("28");
+    expect(within(first).getByText("Age")).toBeDefined();
+  });
+
+  it("a field with no value spends no row at all", () => {
+    const { container } = renderCards({
+      data: [{ id: 1, firstName: "John", lastName: "", age: 28 }],
+    });
+    const first = cards(container)[0];
+    expect(first.querySelector('[data-card-slot="meta"]')).toBeNull();
+    expect(first.textContent).not.toContain("Last Name");
+  });
+
+  it("a control keeps a row of its own and prints no label", () => {
+    // Explicit id on BOTH columns: DataTable seeds columnOrder from
+    // `col.id || ""`, so an id-less accessor column beside an id'd one would
+    // put `_actions` first and make the control the card title instead.
+    const { container } = renderCards({
+      columns: [
+        { id: "firstName", accessorKey: "firstName", header: "First Name" },
+        { id: "_actions", accessorKey: "lastName", header: "Actions", meta: { role: "actions" } },
+      ],
+    });
+    const first = cards(container)[0];
+    expect(first.querySelector('[data-card-slot="control"]')).not.toBeNull();
+    expect(within(first).queryByText("Actions")).toBeNull();
+    expect(first.textContent).toContain("Actions:");
+  });
+
   it("selection adds a select-all bar above the stack and a checkbox per card", () => {
     const { container } = renderCards({ enableRowSelection: true });
     expect(screen.getByLabelText("Select all rows")).toBeTruthy();

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

@@ -130,6 +130,31 @@ describe("DataTable header sorting (web grid)", () => {
     await waitFor(() => expect(header().getAttribute("aria-sort")).toBe("none"));
   });
 
+  it("gives Phosphor resolved CSS colors in every sort state", async () => {
+    const { header } = renderTable();
+    for (const direction of ["none", "ascending", "descending"]) {
+      await waitFor(() => expect(header().getAttribute("aria-sort")).toBe(direction));
+      const icon = header().querySelector("svg");
+      expect(icon).not.toBeNull();
+      const ink = icon?.getAttribute("fill") || icon?.getAttribute("color") || icon?.style.color;
+      expect(ink).toBeTruthy();
+      expect(ink).not.toMatch(/\$/);
+      fireEvent.click(header());
+    }
+  });
+
+  it("plain click replaces another column sort and Shift+click adds to it", async () => {
+    const { header, container, states } = renderTable();
+    const ageHeader = container.querySelector("#age-header") as HTMLElement;
+    fireEvent.click(header());
+    fireEvent.click(ageHeader);
+    await waitFor(() => expect(states.at(-1)?.sorting.map((sort) => sort.id)).toEqual(["age"]));
+    fireEvent.click(header(), { shiftKey: true });
+    await waitFor(() =>
+      expect(states.at(-1)?.sorting.map((sort) => sort.id)).toEqual(["age", "firstName"]),
+    );
+  });
+
   it("non-sortable headers get no press affordance, no tab stop, and no aria-sort", () => {
     const { container } = renderWithProviders(
       <DataTable

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

@@ -17,12 +17,12 @@ import { FlashList, type FlashListRef } from "@shopify/flash-list";
 import { AsyncBoundary, EmptyState, useDirection } from "@multiplatform.one/components";
 import { Button, Field, useFormField } from "@multiplatform.one/forms";
 import { flexRender } from "@tanstack/react-table";
-import { hairline, useResolvedKnobs } from "@multiplatform.one/theme";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
 import React, { useRef, useMemo, useCallback } from "react";
 import { ScrollView, Text, View, useMedia, withStaticProperties } from "tamagui";
 import { useTranslation } from "react-i18next";
 import { useDataTable } from "../../hooks/useDataTable";
-import type { DataTableColumn, DataTableField } from "../../types";
+import type { DataTableColumn, DataTableField, SelectAllScope } from "../../types";
 import { DEFAULT_PAGE_SIZE_OPTIONS } from "../../utils/paginationDefaults";
 import { withInterp } from "../../utils/withInterp";
 import { DataTableColumnPinning } from "../DataTableColumnPinning";
@@ -38,6 +38,7 @@ import { DataTableCell } from "../DataTableCell";
 import { Table } from "@multiplatform.one/table-primitives";
 import { DataTableContext } from "./DataTableContext";
 import { DataTableDocumentList } from "./DataTableDocumentList";
+import { DataTableMobileCards } from "./DataTableMobileCards";
 import { dataTableChrome, resolveDataTableIntent, rowIntentProps } from "./dataTableChrome";
 import { tableRowStateProps } from "./rowStateChrome";
 import { DataTableStateContext } from "./DataTableStateContext";
@@ -134,6 +135,8 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
   virtualizationOverscan = 5,
   enableRowExpansion = false,
   renderSubComponent,
+  enableRowSelection = false,
+  selectAllScope: selectAllScopeProp,
   enableColumnPinning = false,
   maxPinnedColumns = 3,
   enableKeyboardNavigation: _enableKeyboardNavigation = false,
@@ -181,6 +184,9 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
     compact,
   });
   const chrome = dataTableChrome(String(knobProps.sizeToken));
+  // House selectAllScope knob (DG-TBL-03): prop overrides knob; default page.
+  const selectAllScope: SelectAllScope =
+    selectAllScopeProp ?? (knobProps.selectAllScope === "filtered" ? "filtered" : "page");
   const rowHeightPx = chrome.rowPx;
   // Collapsed expand-caret points toward inline-end, so it mirrors in RTL via
   // glyph swap (useDirection, Axiom 15); rotation sign flips so expanded
@@ -216,6 +222,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
     virtualizationOverscan,
     enableRowExpansion,
     renderSubComponent,
+    enableRowSelection,
     enableColumnPinning,
     maxPinnedColumns,
     enableKeyboardNavigation: false,
@@ -225,6 +232,25 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
     isFetching: isFetchingProp,
   });
 
+  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: "sm" | "md" | "lg" =
     size ?? (knobProps.sizeToken === "$3" ? "sm" : knobProps.sizeToken === "$5" ? "lg" : "md");
 
@@ -493,8 +519,8 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
   // (see utils/rowPress.ts). Roving tabindex is a web-only concern.
   const rowPressActive = Boolean(onRowPress) && !disabled;
 
-  const deriveRowLabel = useCallback(
-    (row: (typeof tableRows)[0], index: number): string => {
+  const deriveRowIdentity = useCallback(
+    (row: (typeof tableRows)[0]): string | undefined => {
       const fromAccessor = rowLabel?.(row.original as TData);
       if (fromAccessor) return fromAccessor;
       let firstCellValue: unknown;
@@ -509,13 +535,33 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
       ) {
         return String(firstCellValue);
       }
-      return withInterp(t("Row {{row}}", { row: index + 1 }), { row: index + 1 });
+      return undefined;
     },
-    [rowLabel, t],
+    [rowLabel],
+  );
+
+  const deriveRowLabel = useCallback(
+    (row: (typeof tableRows)[0], index: number): string =>
+      deriveRowIdentity(row) ??
+      withInterp(t("Row {{row}}", { row: index + 1 }), { row: index + 1 }),
+    [deriveRowIdentity, t],
+  );
+
+  // Selection-toggle name: row identity beats a bare index ("Select row
+  // Bulbasaur", falling back to "Select row 3"), the same source the grid
+  // and the card list both read.
+  const deriveSelectRowLabel = useCallback(
+    (row: (typeof tableRows)[0], index: number): string => {
+      const identity = deriveRowIdentity(row) ?? String(index + 1);
+      return withInterp(t("Select row {{row}}", { row: identity }), { row: identity });
+    },
+    [deriveRowIdentity, t],
   );
 
   const getRowPressProps = useCallback(
-    (row: (typeof tableRows)[0], index: number) => {
+    // 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") => {
       if (!rowPressActive) return {};
       return {
         onPress: () => onRowPress?.(row.original as TData, index),
@@ -551,101 +597,6 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
     [renderRowContent, tableZebraOn, t, getRowPressProps],
   );
 
-  const renderMobileCard = useCallback(
-    (row: (typeof tableRows)[0], index: number, onDelete?: (idx: number) => void) => {
-      const rowData = row.original as TData;
-      const visibleCells = row.getVisibleCells();
-      return (
-        <View
-          key={`${row.id}-${index}`}
-          backgroundColor="$color1"
-          borderRadius="$4"
-          borderWidth={1}
-          borderColor="$borderColor"
-          padding="$3"
-          marginBottom="$2"
-          {...(getRowPressProps(row, index) as any)}
-          {...(rowIntentProps(rowData) as any)}
-        >
-          {showRowNumbers && (
-            <View
-              flexDirection="row"
-              justifyContent="space-between"
-              paddingBottom="$2"
-              {...hairline.bottom}
-              borderBottomColor="$borderColor"
-              marginBottom="$2"
-            >
-              <Text fontSize="$3" color="$color10" fontWeight="600">
-                #{index + 1}
-              </Text>
-              {showDeleteRow && !readOnly && (
-                <Button
-                  chromeless
-                  circular
-                  size="$2"
-                  icon={TrashIcon}
-                  disabled={disabled || tableRows.length <= minRows}
-                  onPress={() => onDelete?.(index)}
-                  aria-label={withInterp(t("Delete row {{row}}", { row: index + 1 }), {
-                    row: index + 1,
-                  })}
-                />
-              )}
-            </View>
-          )}
-          {visibleCells.map((cell: any) => {
-            const columnDef = cell.column.columnDef as DataTableColumn;
-            const headerLabel =
-              typeof columnDef.header === "string"
-                ? columnDef.header
-                : columnDef.id || cell.column.id;
-            return (
-              <View
-                key={cell.id}
-                flexDirection="row"
-                alignItems="center"
-                paddingVertical="$1.5"
-                gap="$2"
-              >
-                <Text fontSize="$3" color="$color10" fontWeight="500" width="40%" flexShrink={0}>
-                  {headerLabel}
-                </Text>
-                <View flex={1}>{renderCellContent(cell, index, rowData)}</View>
-              </View>
-            );
-          })}
-          {!showRowNumbers && showDeleteRow && !readOnly && (
-            <View paddingTop="$2" alignItems="flex-end">
-              <Button
-                chromeless
-                circular
-                size="$2"
-                icon={TrashIcon}
-                disabled={disabled || tableRows.length <= minRows}
-                onPress={() => onDelete?.(index)}
-                aria-label={withInterp(t("Delete row {{row}}", { row: index + 1 }), {
-                  row: index + 1,
-                })}
-              />
-            </View>
-          )}
-        </View>
-      );
-    },
-    [
-      showRowNumbers,
-      showDeleteRow,
-      readOnly,
-      disabled,
-      tableRows.length,
-      minRows,
-      renderCellContent,
-      t,
-      getRowPressProps,
-    ],
-  );
-
   const renderToolbarComponent = () => {
     if (renderToolbar) {
       return renderToolbar({
@@ -777,36 +728,37 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
               {showList ? (
                 <DataTableDocumentList
                   tableRows={displayRows}
+                  enableRowSelection={enableRowSelection}
                   disabled={disabled}
                   hasActiveFilters={computed.hasActiveFilters}
                   renderCellContent={renderCellContent}
                   compact={isCompact}
+                  selectRowLabel={deriveSelectRowLabel}
                   queryInFlight={queryInFlight}
                   {...(rowPressActive ? { getRowPressProps } : {})}
                 />
               ) : showCards ? (
                 <View flexDirection="column" gap="$2">
-                  {displayRows.length === 0 ? (
-                    queryInFlight ? null : (
-                      <EmptyState
-                        compact
-                        backgroundColor="$color1"
-                        borderRadius="$4"
-                        aria-live="polite"
-                        title={
-                          computed.hasActiveFilters ? t("No results found") : t("No data available")
-                        }
-                      />
-                    )
-                  ) : (
-                    displayRows.map((row, index) =>
-                      renderMobileCard(
-                        row,
-                        index,
-                        isFormMode ? effectiveHandleDeleteRow : handleDeleteRow,
-                      ),
-                    )
-                  )}
+                  <DataTableMobileCards
+                    tableRows={displayRows}
+                    enableRowSelection={enableRowSelection}
+                    showRowNumbers={showRowNumbers}
+                    showDeleteRow={showDeleteRow}
+                    readOnly={readOnly}
+                    disabled={disabled}
+                    dataLength={tableData.length}
+                    minRows={minRows}
+                    hasActiveFilters={computed.hasActiveFilters}
+                    renderCellContent={renderCellContent}
+                    onDeleteRow={isFormMode ? effectiveHandleDeleteRow : handleDeleteRow}
+                    selectAllChecked={selectAllChecked}
+                    selectAllIndeterminate={selectAllIndeterminate}
+                    onToggleSelectAll={toggleSelectAll}
+                    compact={isCompact}
+                    selectRowLabel={deriveSelectRowLabel}
+                    queryInFlight={queryInFlight}
+                    {...(rowPressActive ? { getRowPressProps } : {})}
+                  />
                   {enablePagination && (
                     <View width="100%" {...(disabled ? disabledState.chromeKnobProps : {})}>
                       {renderPaginationComponent()}
@@ -1099,7 +1051,6 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
       virtualizationHeight,
       virtualizationOverscan,
       renderRow,
-      renderMobileCard,
       renderSubComponent,
       footerGroups,
       sm,
@@ -1118,6 +1069,11 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
       renderCellContent,
       rowPressActive,
       getRowPressProps,
+      enableRowSelection,
+      selectAllChecked,
+      selectAllIndeterminate,
+      toggleSelectAll,
+      deriveSelectRowLabel,
       displayRows,
       queryInFlight,
       t,