@multiplatform.one/table 7.28.1 → 7.29.0

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,
     ],
   );

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

@@ -0,0 +1,180 @@
+/**
+ * The native root honours the props the web root does (MPO-454).
+ *
+ * index.native.tsx handed useDataTable a subset of the web root's options
+ * and never drew a bulk bar, so on iOS the backoffice list (infinite server
+ * mode, rows only through `loadPage`) showed "No data available", and
+ * checked rows offered no Export CSV. These specs render the native root
+ * itself: the suite runs on web, so `react-native` resolves to
+ * react-native-web and FlashList, which the list layout never mounts, is
+ * stubbed.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { BulkAction, DataTableColumn, PageLoadQuery, PageLoadResult } from "../../types";
+import { DataTable } from "./index.native";
+
+vi.mock("@shopify/flash-list", () => ({ FlashList: () => null }));
+
+type Row = { id: number; name: string };
+
+const rows: Row[] = Array.from({ length: 50 }, (_, i) => ({ id: i + 1, name: `Row ${i + 1}` }));
+
+const columns: DataTableColumn<Row>[] = [
+  { accessorKey: "name", header: "Name", meta: { role: "title" } },
+  { accessorKey: "id", header: "ID" },
+];
+
+function pageLoader() {
+  return vi.fn(async (q: PageLoadQuery): Promise<PageLoadResult<Row>> => {
+    const start = q.pageIndex * q.pageSize;
+    return { rows: rows.slice(start, start + q.pageSize), totalCount: rows.length };
+  });
+}
+
+function renderInfinite(loadPage: ReturnType<typeof pageLoader>) {
+  return renderWithProviders(
+    <DataTable
+      data={[]}
+      columns={columns}
+      layout="list"
+      readOnly
+      paginationMode="infinite"
+      loadPage={loadPage}
+      initialState={{ pagination: { pageIndex: 0, pageSize: 10 } }}
+    />,
+  );
+}
+
+/** Where the tail sentinel reports itself on screen, via measureInWindow. */
+function placeSentinel(top: number) {
+  const real = HTMLElement.prototype.getBoundingClientRect;
+  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+    function (this: HTMLElement) {
+      if (this.getAttribute("data-testid") !== "infinite-sentinel") return real.call(this);
+      return {
+        x: 0,
+        y: top,
+        top,
+        left: 0,
+        right: 320,
+        bottom: top + 1,
+        width: 320,
+        height: 1,
+      } as DOMRect;
+    },
+  );
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe("native DataTable infinite mode", () => {
+  it("renders page 0 from loadPage instead of the empty state", async () => {
+    const loadPage = pageLoader();
+    renderInfinite(loadPage);
+    expect(await screen.findByText("Row 1")).toBeDefined();
+    expect(screen.getByText("Row 10")).toBeDefined();
+    expect(screen.queryByText("Row 11")).toBeNull();
+    expect(screen.queryByText("No data available")).toBeNull();
+    expect(loadPage.mock.calls[0]![0].pageIndex).toBe(0);
+    expect(screen.getByTestId("infinite-status").textContent).toContain("50");
+    expect(screen.queryByLabelText("Go to next page")).toBeNull();
+  });
+
+  it("appends the next page once the tail sentinel comes on screen", async () => {
+    placeSentinel(200);
+    const loadPage = pageLoader();
+    renderInfinite(loadPage);
+    expect(await screen.findByText("Row 11", undefined, { timeout: 3000 })).toBeDefined();
+    expect(screen.getByText("Row 20")).toBeDefined();
+  });
+
+  it("holds the next page while the tail sentinel is below the fold", async () => {
+    placeSentinel(100_000);
+    const loadPage = pageLoader();
+    renderInfinite(loadPage);
+    expect(await screen.findByText("Row 10")).toBeDefined();
+    await waitFor(() => expect(loadPage.mock.calls.map(([q]) => q.pageIndex)).toEqual([0, 1]));
+    await new Promise((settle) => setTimeout(settle, 800));
+    expect(screen.queryByText("Row 11")).toBeNull();
+  });
+});
+
+describe("native DataTable bulk actions", () => {
+  it("checking rows shows the bulk bar, and an action receives the checked rows", async () => {
+    const exportCsv = vi.fn();
+    const bulkActions: BulkAction<Row>[] = [
+      { id: "assign", label: "Assign To", onExecute: vi.fn() },
+      { id: "export", label: "Export CSV", onExecute: exportCsv },
+    ];
+    renderWithProviders(
+      <DataTable
+        data={rows.slice(0, 3)}
+        columns={columns}
+        layout="list"
+        readOnly
+        enablePagination={false}
+        enableRowSelection
+        bulkActions={bulkActions}
+      />,
+    );
+    expect(screen.queryByText("Export CSV")).toBeNull();
+
+    fireEvent.click(screen.getByRole("checkbox", { name: "Select row Row 1" }));
+    fireEvent.click(screen.getByRole("checkbox", { name: "Select row Row 3" }));
+
+    expect(await screen.findByText("2 selected")).toBeDefined();
+    expect(screen.getByRole("button", { name: "Assign To" })).toBeDefined();
+    fireEvent.click(screen.getByRole("button", { name: "Export CSV" }));
+    await waitFor(() => expect(exportCsv).toHaveBeenCalledTimes(1));
+    expect(exportCsv.mock.calls[0]![0].map((row: Row) => row.name)).toEqual(["Row 1", "Row 3"]);
+  });
+});
+
+describe("native DataTable root parity with web", () => {
+  const read = (file: string) => readFileSync(resolve(__dirname, file), "utf-8");
+
+  /** Option names a root hands useDataTable. */
+  function useDataTableOptions(source: string): Set<string> {
+    const start = source.indexOf("useDataTable({");
+    const body = source.slice(start, source.indexOf("});", start));
+    return new Set([...body.matchAll(/^\s*([A-Za-z]+)\s*[,:]/gm)].map((match) => match[1]!));
+  }
+
+  /** Prop names every `<Component ... />` call site in a root passes. */
+  function propNames(source: string, component: string): Set<string> {
+    const names = new Set<string>();
+    for (const site of source.split(`<${component}`).slice(1)) {
+      // Stop at the element's end or at a nested element, whichever is first.
+      const end = site.search(/\/>|</);
+      const element = end === -1 ? site : site.slice(0, end);
+      for (const match of element.matchAll(/(?:^|\s)([A-Za-z][A-Za-z0-9]*)=[{"]/g)) {
+        names.add(match[1]!);
+      }
+    }
+    return names;
+  }
+
+  it("hands useDataTable every option the web root does", () => {
+    const web = useDataTableOptions(read("DataTableRoot.tsx"));
+    const native = useDataTableOptions(read("index.native.tsx"));
+    expect(web.size).toBeGreaterThan(0);
+    expect([...web].filter((option) => !native.has(option)).sort()).toEqual([]);
+  });
+
+  it.each(["DataTableBulkActions", "DataTableInfiniteTail"])(
+    "renders %s with every prop web passes",
+    (component) => {
+      const web = propNames(read("DataTableRoot.tsx"), component);
+      const native = propNames(read("index.native.tsx"), component);
+      expect(web.size).toBeGreaterThan(0);
+      expect([...web].filter((prop) => !native.has(prop)).sort()).toEqual([]);
+    },
+  );
+});