@multiplatform.one/table 7.28.1 → 7.29.1

package/src/components/DataTable/NativeInfiniteSentinel.tsx

@@ -0,0 +1,45 @@
+/**
+ * Native load-more trigger for DataTable's infinite mode.
+ *
+ * Web watches its sentinel with an IntersectionObserver. React Native has
+ * none, and the table never sees its host's scroll events: the backoffice
+ * list scrolls the whole screen in a ScrollView the table sits inside. So
+ * the sentinel asks where it is on screen, on a short interval while more
+ * pages exist, and fires once it comes within `leadPx` of the window's
+ * bottom edge, the same lead web gives its observer.
+ */
+
+import { type ComponentRef, useEffect, useRef } from "react";
+import { Dimensions, View } from "react-native";
+
+export const NATIVE_SENTINEL_POLL_MS = 250;
+
+export interface NativeInfiniteSentinelProps {
+  onVisible: () => void;
+  leadPx: number;
+}
+
+export function NativeInfiniteSentinel({ onVisible, leadPx }: NativeInfiniteSentinelProps) {
+  const ref = useRef<ComponentRef<typeof View>>(null);
+  const onVisibleRef = useRef(onVisible);
+  onVisibleRef.current = onVisible;
+
+  useEffect(() => {
+    let active = true;
+    const timer = setInterval(() => {
+      ref.current?.measureInWindow((_x, y, width) => {
+        // An unmeasured view reports all zeros; width 0 means not laid out.
+        if (!active || width <= 0) return;
+        if (y <= Dimensions.get("window").height + leadPx) onVisibleRef.current();
+      });
+    }, NATIVE_SENTINEL_POLL_MS);
+    return () => {
+      active = false;
+      clearInterval(timer);
+    };
+  }, [leadPx]);
+
+  return (
+    <View ref={ref} style={{ height: 1, width: "100%" }} aria-hidden testID="infinite-sentinel" />
+  );
+}

package/src/components/DataTable/cellWeight.native.spec.tsx

@@ -0,0 +1,82 @@
+/**
+ * MPO-446 table arm (native): the native root renders body cells through the
+ * same CellContent as web, so a primitive value rides house Text and takes
+ * the fontWeight and bodyFont knobs. index.native.tsx pulls in FlashList and
+ * the suite runs under happy-dom, so the root is read as source (the
+ * ./nativeCardParity.spec.tsx precedent) and CellContent renders under the
+ * native platform flags.
+ */
+
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import { cleanup, screen } from "@testing-library/react";
+import { Text as RawText } from "tamagui";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { CellContent } from "./CellContent";
+
+vi.mock("@multiplatform.one/platform", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@multiplatform.one/platform")>()),
+  isWeb: false,
+  isNative: true,
+}));
+
+afterEach(cleanup);
+
+function classes(el: Element, prefix: string): string[] {
+  return String(el.className || "")
+    .split(" ")
+    .filter((c) => c.startsWith(prefix))
+    .sort();
+}
+
+function explicit(prefix: string, props: Record<string, string>): string[] {
+  renderWithProviders(<RawText {...props}>probe</RawText>);
+  const got = classes(screen.getByText("probe"), prefix);
+  cleanup();
+  return got;
+}
+
+describe("DataTable custom cell values follow the text knobs (native, MPO-446)", () => {
+  it("really is running with the native platform flags", async () => {
+    const platform = await import("@multiplatform.one/platform");
+    expect(platform.isWeb).toBe(false);
+    expect(platform.isNative).toBe(true);
+  });
+
+  it("the native root renders body cells through CellContent with the value voice size", () => {
+    const native = readFileSync(resolve(__dirname, "index.native.tsx"), "utf-8");
+    const start = native.indexOf("<CellContent");
+    expect(start).toBeGreaterThan(-1);
+    const site = native.slice(start, native.indexOf("/>", start));
+    expect(site).toMatch(/cellDef=\{columnDef\.cell\}/);
+    expect(site).toMatch(/fontSize=\{knobProps\.label\.fontSize/);
+  });
+
+  it.each([
+    ["regular", "400"],
+    ["bold", "700"],
+  ] as const)("string and number values paint the knob weight at %s", (fontWeight, want) => {
+    const expected = explicit("_fow-", { fontWeight: want });
+    for (const value of ["Bulbasaur", 4461]) {
+      renderWithProviders(
+        <Preset overrides={{ fontWeight }}>
+          <CellContent cellDef={() => value} ctx={{}} fontSize="$3" />
+        </Preset>,
+      );
+      expect(classes(screen.getByText(String(value)), "_fow-"), String(value)).toEqual(expected);
+      cleanup();
+    }
+  });
+
+  it("string values take the bodyFont family", () => {
+    const expected = explicit("_ff-", { fontFamily: "$mono" });
+    renderWithProviders(
+      <Preset overrides={{ bodyFont: "mono" }}>
+        <CellContent cellDef={() => "Bulbasaur"} ctx={{}} fontSize="$3" />
+      </Preset>,
+    );
+    expect(classes(screen.getByText("Bulbasaur"), "_ff-")).toEqual(expected);
+  });
+});

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

@@ -0,0 +1,147 @@
+/**
+ * MPO-446 table arm (web): a DataTable custom cell's value takes the
+ * fontWeight and bodyFont knobs.
+ *
+ * `cell: (info) => info.getValue()` returns a primitive, and flexRender
+ * dropped it as a bare text node into the cell's alignment View: a div with
+ * no text voice, so the value painted the page's 400 under Weight bold. The
+ * value now rides house Text (./CellContent.tsx). ./cellWeight.native.spec.tsx
+ * is the native arm.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import { act, cleanup, screen } from "@testing-library/react";
+import { useState, type ReactNode } from "react";
+import { Text as RawText } from "tamagui";
+import { afterEach, describe, expect, it } from "vitest";
+import type { DataTableColumn } from "../../types";
+import { CellContent } from "./CellContent";
+import { DataTable } from "./index";
+
+type Row = { id: number; name: string; status: string; amount: string };
+
+const rows: Row[] = [{ id: 4461, name: "Bulbasaur", status: "sleeping", amount: "12.50" }];
+
+const columns: DataTableColumn<Row>[] = [
+  { id: "id", accessorKey: "id", header: "ID", cell: (info) => info.getValue() },
+  { id: "name", accessorKey: "name", header: "Name", cell: (info) => info.getValue() },
+  {
+    id: "status",
+    accessorKey: "status",
+    header: "Status",
+    cell: (info) => <RawText fontWeight="300">{String(info.getValue())}</RawText>,
+  },
+  {
+    id: "amount",
+    accessorKey: "amount",
+    header: "Amount",
+    field: "money",
+    fieldProps: { currency: "USD", locale: "en-US" },
+  },
+];
+
+const weights = [
+  ["regular", "400"],
+  ["bold", "700"],
+] as const;
+
+afterEach(cleanup);
+
+function classes(el: Element, prefix: string): string[] {
+  return String(el.className || "")
+    .split(" ")
+    .filter((c) => c.startsWith(prefix))
+    .sort();
+}
+
+/** The class a prop paints, read off a raw node so no house wiring is involved. */
+function explicit(prefix: string, props: Record<string, string>): string[] {
+  renderWithProviders(<RawText {...props}>probe</RawText>);
+  const got = classes(screen.getByText("probe"), prefix);
+  cleanup();
+  return got;
+}
+
+function renderTable(overrides: Record<string, string>) {
+  return renderWithProviders(
+    <Preset overrides={overrides as never}>
+      <DataTable
+        data={rows}
+        columns={columns as DataTableColumn<Record<string, any>>[]}
+        layout="table"
+        enablePagination={false}
+        readOnly
+      />
+    </Preset>,
+  );
+}
+
+describe("DataTable custom cell values follow the text knobs (web, MPO-446)", () => {
+  it.each(weights)("string and number values paint the knob weight at %s", (fontWeight, want) => {
+    const expected = explicit("_fow-", { fontWeight: want });
+    renderTable({ fontWeight });
+    for (const text of ["Bulbasaur", "4461"]) {
+      const node = screen.getByText(text);
+      expect(node.closest("[data-cell-align]")).not.toBe(node);
+      expect(classes(node, "_fow-"), text).toEqual(expected);
+    }
+  });
+
+  it("string values take the bodyFont family", () => {
+    const expected = explicit("_ff-", { fontFamily: "$mono" });
+    renderTable({ bodyFont: "mono" });
+    expect(classes(screen.getByText("Bulbasaur"), "_ff-")).toEqual(expected);
+  });
+
+  it.each(weights)("a money value paints the knob weight at %s", (fontWeight, want) => {
+    const expected = explicit("_fow-", { fontWeight: want });
+    renderTable({ fontWeight });
+    expect(classes(screen.getByText(/12\.50/), "_fow-")).toEqual(expected);
+  });
+
+  it("a renderer that returns an element keeps its own weight", () => {
+    const expected = explicit("_fow-", { fontWeight: "300" });
+    renderTable({ fontWeight: "bold" });
+    expect(classes(screen.getByText("sleeping"), "_fow-")).toEqual(expected);
+  });
+});
+
+describe("CellContent keeps flexRender's component identity per renderer", () => {
+  function Counter({ start }: { start: number }): ReactNode {
+    const [n, setN] = useState(start);
+    return (
+      <RawText onPress={() => setN((v) => v + 1)} data-testid="counter">
+        {n}
+      </RawText>
+    );
+  }
+
+  it("a renderer's hook state survives a re-render with the same renderer", () => {
+    const render = (ctx: unknown) => <Counter start={(ctx as { start: number }).start} />;
+    const { rerender } = renderWithProviders(
+      <CellContent cellDef={render} ctx={{ start: 1 }} fontSize="$3" />,
+    );
+    act(() => screen.getByTestId("counter").click());
+    expect(screen.getByTestId("counter").textContent).toBe("2");
+    rerender(<CellContent cellDef={render} ctx={{ start: 1 }} fontSize="$3" />);
+    expect(screen.getByTestId("counter").textContent).toBe("2");
+  });
+
+  it("a new renderer mounts its own hooks instead of reading the old renderer's slots", () => {
+    const first = () => {
+      const [label] = useState("first renderer");
+      return label;
+    };
+    const second = () => {
+      const [label] = useState("second renderer");
+      return label;
+    };
+    const { rerender } = renderWithProviders(
+      <CellContent cellDef={first} ctx={{}} fontSize="$3" />,
+    );
+    expect(screen.getByText("first renderer")).toBeInTheDocument();
+    rerender(<CellContent cellDef={second} ctx={{}} fontSize="$3" />);
+    expect(screen.getByText("second renderer")).toBeInTheDocument();
+  });
+});

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

@@ -14,19 +14,21 @@ import {
   TrashIcon,
 } from "@phosphor-icons/react";
 import { FlashList, type FlashListRef } from "@shopify/flash-list";
-import { AsyncBoundary, EmptyState, useDirection } from "@multiplatform.one/components";
+import { AsyncBoundary, EmptyState, useDirection, ScrollView } from "@multiplatform.one/components";
 import { Button, Field, useFormField } from "@multiplatform.one/forms";
 import { flexRender } from "@tanstack/react-table";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import React, { useRef, useMemo, useCallback } from "react";
-import { ScrollView, Text, View, useMedia, withStaticProperties } from "tamagui";
+import type { FontSizeTokens } from "tamagui";
+import { Text, View, useMedia, withStaticProperties } from "tamagui";
 import { useTranslation } from "react-i18next";
 import { useDataTable } from "../../hooks/useDataTable";
-import type { DataTableColumn, DataTableField, SelectAllScope } from "../../types";
-import { DEFAULT_PAGE_SIZE_OPTIONS } from "../../utils/paginationDefaults";
+import type { BulkAction, DataTableColumn, DataTableField, SelectAllScope } from "../../types";
+import { DEFAULT_PAGE_SIZE_OPTIONS, INFINITE_TRIGGER_ROWS } from "../../utils/paginationDefaults";
 import { withInterp } from "../../utils/withInterp";
 import { DataTableColumnPinning } from "../DataTableColumnPinning";
 import { DataTablePagination } from "../DataTablePagination";
+import { CellContent } from "./CellContent";
 import { DataTableToolbar } from "../DataTableToolbar";
 import { DataTableFilters } from "../DataTableFilters";
 import { DataTableBulkActions } from "../DataTableBulkActions";
@@ -38,8 +40,10 @@ import { DataTableCell } from "../DataTableCell";
 import { Table } from "@multiplatform.one/table-primitives";
 import { DataTableContext } from "./DataTableContext";
 import { DataTableDocumentList } from "./DataTableDocumentList";
+import { DataTableInfiniteTail } from "./DataTableInfiniteTail";
 import { DataTableMobileCards } from "./DataTableMobileCards";
 import { dataTableChrome, resolveDataTableIntent, rowIntentProps } from "./dataTableChrome";
+import { NativeInfiniteSentinel } from "./NativeInfiniteSentinel";
 import { tableRowStateProps } from "./rowStateChrome";
 import { DataTableStateContext } from "./DataTableStateContext";
 import type { DataTableStateContextValue } from "./DataTableStateContext";
@@ -110,6 +114,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
   data,
   columns,
   initialState,
+  controlledState,
   onStateChange,
   onRetry,
   isLoading: isLoadingProp,
@@ -121,24 +126,32 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
   manualPagination = false,
   manualSorting = false,
   enableFiltering = true,
+  filterableFields,
   enableSorting = true,
   enablePagination = true,
   pageSizeOptions,
+  paginationMode = "pages",
+  loadPage,
+  rowAccumulator,
   enableColumnVisibility = true,
   enableColumnOrdering = false,
   enableColumnResizing = false,
   enableGlobalSearch = true,
   enableViews = false,
+  columnLayout = "equal",
   layout = "auto",
   enableVirtualization = false,
   virtualizationHeight,
   virtualizationOverscan = 5,
   enableRowExpansion = false,
   renderSubComponent,
+  getSubRows,
   enableRowSelection = false,
   selectAllScope: selectAllScopeProp,
+  bulkActions,
   enableColumnPinning = false,
   maxPinnedColumns = 3,
+  enableGrouping = false,
   enableKeyboardNavigation: _enableKeyboardNavigation = false,
   onRowPress,
   rowLabel,
@@ -184,6 +197,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
     compact,
   });
   const chrome = dataTableChrome(String(knobProps.sizeToken));
+  const bulkBarPlacement = knobProps.bulkBarPlacement === "bottom" ? "bottom" : "top";
   // House selectAllScope knob (DG-TBL-03): prop overrides knob; default page.
   const selectAllScope: SelectAllScope =
     selectAllScopeProp ?? (knobProps.selectAllScope === "filtered" ? "filtered" : "page");
@@ -202,6 +216,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
     data,
     columns,
     initialState,
+    controlledState,
     onStateChange,
     syncWithUrl,
     urlDebounceMs,
@@ -210,21 +225,28 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
     manualPagination,
     manualSorting,
     enableFiltering,
+    filterableFields,
     enableSorting,
     enablePagination,
+    paginationMode,
+    loadPage,
+    rowAccumulator,
     enableColumnVisibility,
     enableColumnOrdering,
     enableColumnResizing,
+    columnLayout,
     enableGlobalSearch,
     enableViews,
     enableVirtualization,
     virtualizationHeight,
     virtualizationOverscan,
     enableRowExpansion,
+    getSubRows,
     renderSubComponent,
     enableRowSelection,
     enableColumnPinning,
     maxPinnedColumns,
+    enableGrouping,
     enableKeyboardNavigation: false,
     rowCount,
     pageCount,
@@ -232,6 +254,8 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
     isFetching: isFetchingProp,
   });
 
+  const resolvedBulkActions = (bulkActions ?? []) as BulkAction<TData>[];
+
   const selectAllChecked =
     enableRowSelection &&
     (selectAllScope === "filtered"
@@ -257,12 +281,22 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
   const cellHeight = resolvedSize === "sm" ? "$6" : resolvedSize === "lg" ? "$10" : "$8";
 
   const headerGroups = table.getHeaderGroups();
-  const tableRows = table.getRowModel().rows;
+  const rowModelRows = table.getRowModel().rows;
+  // Infinite mode reveals accumulated pages only; loader mode's row model is
+  // already just the accumulated rows, so the slice is a no-op there.
+  const infinite = computed.infinite;
+  const tableRows = infinite ? rowModelRows.slice(0, infinite.visibleRowCount) : rowModelRows;
   const heldRowsRef = useRef(tableRows);
   if (tableRows.length > 0) {
     heldRowsRef.current = tableRows;
   }
-  const queryInFlight = Boolean(state.isFetching || state.isPlaceholderData || state.isLoading);
+  const queryInFlight = Boolean(
+    state.isFetching ||
+    state.isPlaceholderData ||
+    infinite?.isAppending ||
+    state.isLoading ||
+    infinite?.isInitialLoading,
+  );
   const displayRows =
     tableRows.length > 0
       ? tableRows
@@ -307,6 +341,8 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
 
   const isVirtualized =
     enableVirtualization && virtualizationHeight != null && virtualizationHeight > 0;
+  // Only the grid virtualizes on native; list and cards render in flow.
+  const isVirtualGrid = isVirtualized && !showList && !showCards;
 
   // DataTableColumnPinning is a hook-style helper (it calls useState/useMemo/
   // useCallback internally), so it must run unconditionally at the top level —
@@ -369,16 +405,11 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
       const value = cell.getValue();
 
       if (columnDef.cell && !columnDef.field) {
-        // TanStack injects a default cell renderer that returns the raw value,
-        // and story/consumer columns commonly do `cell: (info) => info.getValue()`;
-        // raw strings/numbers outside <Text> are dropped on native. flexRender
-        // hides function-cell primitives inside an element, so NativeCellContent
-        // calls the renderer itself and wraps primitive output.
         return (
-          <NativeCellContent
+          <CellContent
             cellDef={columnDef.cell}
             ctx={cell.getContext()}
-            fontSize={knobProps.sizeToken}
+            fontSize={knobProps.label.fontSize as FontSizeTokens}
           />
         );
       }
@@ -398,7 +429,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
         />
       );
     },
-    [handleCellChange, readOnly, disabled, knobProps.sizeToken],
+    [handleCellChange, readOnly, disabled, knobProps.label.fontSize],
   );
 
   const renderRowContent = useCallback(
@@ -647,8 +678,8 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
   };
 
   const stateContextValue = useMemo<DataTableStateContextValue<TData>>(
-    () => ({ table, state, actions, computed }),
-    [table, state, actions, computed],
+    () => ({ table, state, actions, computed, selectAllScope }),
+    [table, state, actions, computed, selectAllScope],
   );
 
   const renderTableInner = useCallback(
@@ -676,7 +707,12 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
           />
         );
       }
-      if (state.isLoading && displayRows.length === 0 && !state.isFetching) {
+      if (
+        (state.isLoading || infinite?.isInitialLoading) &&
+        displayRows.length === 0 &&
+        !state.isFetching &&
+        !state.isPlaceholderData
+      ) {
         return <AsyncBoundary loading layout="table" aria-label={ariaLabel || "Data table"} />;
       }
 
@@ -711,6 +747,16 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
                   {renderToolbarComponent()}
                 </View>
               )}
+              {enableRowSelection && bulkBarPlacement === "top" ? (
+                <View width="100%" {...(disabled ? disabledState.chromeKnobProps : {})}>
+                  <DataTableBulkActions
+                    actions={resolvedBulkActions}
+                    maxVisibleActions={5}
+                    showSelectionCount
+                    placement="top"
+                  />
+                </View>
+              ) : null}
               {children}
               {renderFilters?.({
                 filters: state.filters || [],
@@ -759,7 +805,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
                     queryInFlight={queryInFlight}
                     {...(rowPressActive ? { getRowPressProps } : {})}
                   />
-                  {enablePagination && (
+                  {enablePagination && !infinite && (
                     <View width="100%" {...(disabled ? disabledState.chromeKnobProps : {})}>
                       {renderPaginationComponent()}
                     </View>
@@ -932,11 +978,19 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
                         ) : isVirtualized ? (
                           <View style={{ height: virtualizationHeight }}>
                             <FlashList
+                              keyboardShouldPersistTaps="handled"
                               ref={flashListRef}
                               data={displayRows}
                               drawDistance={rowHeightPx * virtualizationOverscan}
                               keyExtractor={(row) => row.id}
                               renderItem={({ item, index }) => renderRow(item, index)}
+                              {...(infinite && !infinite.exhausted
+                                ? {
+                                    onEndReached: infinite.loadMore,
+                                    onEndReachedThreshold:
+                                      (INFINITE_TRIGGER_ROWS * rowHeightPx) / virtualizationHeight!,
+                                  }
+                                : {})}
                             />
                           </View>
                         ) : (
@@ -993,6 +1047,36 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
                 </ScrollView>
               )}
 
+              {infinite ? (
+                <DataTableInfiniteTail
+                  infinite={infinite}
+                  visibleCount={tableRows.length}
+                  showAppendSkeleton={!isVirtualGrid}
+                  rowHeightPx={rowHeightPx}
+                  fontSize={knobProps.sizeToken}
+                  gapProps={knobProps.gap}
+                  sentinel={
+                    !isVirtualGrid && !infinite.exhausted ? (
+                      <NativeInfiniteSentinel
+                        onVisible={infinite.loadMore}
+                        leadPx={INFINITE_TRIGGER_ROWS * rowHeightPx}
+                      />
+                    ) : null
+                  }
+                />
+              ) : null}
+
+              {enableRowSelection && bulkBarPlacement === "bottom" ? (
+                <View width="100%" {...(disabled ? disabledState.chromeKnobProps : {})}>
+                  <DataTableBulkActions
+                    actions={resolvedBulkActions}
+                    maxVisibleActions={5}
+                    showSelectionCount
+                    placement="bottom"
+                  />
+                </View>
+              ) : null}
+
               {showAddRow && !readOnly && (
                 <View>
                   <Button
@@ -1006,7 +1090,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
                 </View>
               )}
 
-              {!showCards && enablePagination && (
+              {!showCards && enablePagination && !infinite && (
                 <View width="100%" {...(disabled ? disabledState.chromeKnobProps : {})}>
                   {renderPaginationComponent()}
                 </View>
@@ -1076,6 +1160,11 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
       deriveSelectRowLabel,
       displayRows,
       queryInFlight,
+      infinite,
+      isVirtualGrid,
+      rowHeightPx,
+      bulkBarPlacement,
+      resolvedBulkActions,
       t,
     ],
   );