@multiplatform.one/frappe-ui 7.7.6 → 7.8.0

package/src/FrappeProvider.fixturesOnly.spec.tsx

@@ -0,0 +1,129 @@
+/**
+ * A fixture corpus satisfies the connection requirement on its own (MPO-228).
+ *
+ * `createApp({ frappe: { fixtures } })` mounts a FrappeProvider with NO
+ * baseURL, so the collection-backed components must read the corpus instead
+ * of demanding a bench URL. These specs pin that: rows render, doctype meta
+ * comes from the corpus, and `fetch` is never called — a fixtures-only app
+ * runs with no server. The old error still fires when neither is configured.
+ */
+
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import type { DataTableColumn } from "@multiplatform.one/table";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import { Text } from "tamagui";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { FrappeList } from "./FrappeList";
+import { FrappeProvider } from "./FrappeProvider";
+import { FrappeTable } from "./FrappeTable";
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: { en: { translation: {} } },
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+interface Customer {
+  name: string;
+  doctype: string;
+  customer_name: string;
+  status: string;
+}
+
+const customers: Customer[] = [
+  { name: "CUST-001", doctype: "Customer", customer_name: "Acme Corp", status: "Active" },
+  { name: "CUST-002", doctype: "Customer", customer_name: "Globex", status: "Lead" },
+];
+
+const columns: DataTableColumn<Partial<Customer>>[] = [
+  { id: "name", accessorKey: "name", header: "ID" },
+  { id: "customer_name", accessorKey: "customer_name", header: "Customer Name" },
+];
+
+/**
+ * Corpus carrying both documents and the getdoctype-shaped meta doc, so the
+ * table's `useDocTypeMeta` call is answered locally too (no filterableFields
+ * prop, which would skip that path).
+ */
+function fixtureCorpus() {
+  return new InMemoryFixtureProvider({
+    DocType: [
+      {
+        name: "Customer",
+        doctype: "DocType",
+        module: "Selling",
+        fields: [
+          { fieldname: "customer_name", fieldtype: "Data", label: "Customer Name" },
+          { fieldname: "status", fieldtype: "Select", label: "Status", options: "Active\nLead" },
+        ],
+      },
+    ],
+    Customer: customers,
+  });
+}
+
+/** Fails the test if anything dials the network. */
+function forbidFetch() {
+  return vi.spyOn(globalThis, "fetch").mockImplementation((input) => {
+    throw new Error(`unexpected network request: ${String(input)}`);
+  });
+}
+
+describe("FrappeProvider with fixtures and no baseURL", () => {
+  it("renders a FrappeTable off the corpus without touching the network", async () => {
+    const fetchSpy = forbidFetch();
+    renderWithProviders(
+      <FrappeProvider fixtures={fixtureCorpus()}>
+        <FrappeTable<Customer>
+          doctype="Customer"
+          columns={columns}
+          layout="table"
+          enablePagination={false}
+        />
+      </FrappeProvider>,
+    );
+
+    expect(await screen.findByText("Acme Corp")).toBeTruthy();
+    expect(await screen.findByText("Globex")).toBeTruthy();
+    expect(fetchSpy).not.toHaveBeenCalled();
+  });
+
+  it("renders a FrappeList off the corpus without touching the network", async () => {
+    const fetchSpy = forbidFetch();
+    renderWithProviders(
+      <FrappeProvider fixtures={fixtureCorpus()}>
+        <FrappeList<Customer>
+          doctype="Customer"
+          fields={["name", "customer_name"]}
+          renderItem={(item) => <Text>{item.customer_name}</Text>}
+        />
+      </FrappeProvider>,
+    );
+
+    expect(await screen.findByText("Acme Corp")).toBeTruthy();
+    expect(fetchSpy).not.toHaveBeenCalled();
+  });
+});
+
+describe("FrappeProvider with neither baseURL nor fixtures", () => {
+  it("still names what is missing", () => {
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    expect(() =>
+      renderWithProviders(
+        <FrappeProvider>
+          <FrappeTable<Customer> doctype="Customer" columns={columns} layout="table" />
+        </FrappeProvider>,
+      ),
+    ).toThrow(/baseURL or fixtures/);
+  });
+});

package/src/FrappeProvider.tsx

@@ -7,8 +7,12 @@ import React, { createContext, use, useContext } from "react";
  * @category Types
  */
 export interface FrappeConfig {
-  /** The base URL of the Frappe server */
-  baseURL: string;
+  /**
+   * The base URL of the Frappe server. Required unless `fixtures` is set:
+   * a fixture corpus answers every read locally, so a fixtures-only app has
+   * no bench to name and nothing dials one.
+   */
+  baseURL?: string;
   /** False uses HTTP collections without a realtime transport. Defaults to true. */
   realtime?: boolean;
   /**
@@ -52,7 +56,10 @@ export interface FrappeConfig {
    * can't forward WebSocket upgrades.
    */
   socketOptions?: UseFrappeCollectionConfig["socketOptions"];
-  /** Fixture provider for testing */
+  /**
+   * Fixture corpus every read and write is served from. Set it without a
+   * `baseURL` to run the whole app off fixtures with no server.
+   */
   fixtures?: FixtureProvider;
 }
 
@@ -66,8 +73,8 @@ const FrappeContext = createContext<FrappeConfig | undefined>(undefined);
 export interface FrappeProviderProps {
   /** Child components */
   children: React.ReactNode;
-  /** The base URL of the Frappe server */
-  baseURL: string;
+  /** The base URL of the Frappe server. Required unless `fixtures` is set. */
+  baseURL?: string;
   /** False uses HTTP collections without a realtime transport. Defaults to true. */
   realtime?: boolean;
   /** Override port for Socket.IO realtime connection (e.g. 9000 in dev). */
@@ -89,7 +96,10 @@ export interface FrappeProviderProps {
   syncOptions?: any;
   /** Extra Socket.IO client options for the realtime connection. */
   socketOptions?: UseFrappeCollectionConfig["socketOptions"];
-  /** Fixture provider for testing */
+  /**
+   * Fixture corpus every read and write is served from. Set it without a
+   * `baseURL` to run the whole app off fixtures with no server.
+   */
   fixtures?: FixtureProvider;
 }
 

package/src/FrappeReportBuilder.tsx

@@ -125,8 +125,10 @@ export function FrappeReportBuilder({
   const finalAuth = auth ?? config?.auth;
   const finalSyncOptions = syncOptions ?? config?.syncOptions;
 
-  if (!finalBaseURL) {
-    throw new Error("FrappeReportBuilder requires baseURL prop or FrappeProvider with baseURL");
+  if (!finalBaseURL && !config?.fixtures) {
+    throw new Error(
+      "FrappeReportBuilder requires baseURL prop or FrappeProvider with baseURL or fixtures",
+    );
   }
 
   const connectionConfig = {

package/src/FrappeTable.autoHeight.spec.tsx

@@ -0,0 +1,142 @@
+/**
+ * MPO-229: FrappeTable must not collapse to a sliver in an auto-height parent.
+ *
+ * The wrapper YStack used `flex={1}`, which in React Native's flex model is
+ * `1 1 0` with a basis of ZERO. A basis-0 chain inside a parent that has no
+ * height of its own resolves to 0, so the whole table rendered as a one-row
+ * sliver. DataTableRoot's own root already avoids exactly this (grow 1 /
+ * shrink 1 / basis auto / minHeight 0, and it carries the note saying why).
+ * The FrappeTable wrapper sitting above it reintroduced the trap.
+ *
+ * Two halves here. The render cases pin the behaviour a caller sees: 12 rows
+ * in a plain auto-height parent, and the same table in a fixed-height parent.
+ * The source cases are the mechanical guard, because happy-dom runs no flex
+ * layout, so a basis-0 regression is invisible to a rendered assertion and
+ * only the geometry itself can be checked.
+ */
+
+import fs from "node:fs";
+import path from "node:path";
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import type { DataTableColumn } from "@multiplatform.one/table";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import { YStack } from "tamagui";
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
+import { FrappeProvider } from "./FrappeProvider";
+import { FrappeTable } from "./FrappeTable";
+
+beforeAll(async () => {
+  if (!i18next.isInitialized) {
+    await i18next.use(initReactI18next).init({
+      lng: "en",
+      interpolation: { escapeValue: false },
+      resources: { en: { translation: {} } },
+    });
+  }
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+interface Customer {
+  name: string;
+  doctype: string;
+  customer_name: string;
+}
+
+const customers: Customer[] = Array.from({ length: 12 }, (_, index) => ({
+  name: `CUST-${String(index + 1).padStart(3, "0")}`,
+  doctype: "Customer",
+  customer_name: `Customer ${index + 1}`,
+}));
+
+const columns: DataTableColumn<Partial<Customer>>[] = [
+  { id: "name", accessorKey: "name", header: "ID" },
+  { id: "customer_name", accessorKey: "customer_name", header: "Customer Name" },
+];
+
+// Supplied so the table does not go to useDocTypeMeta for the filter list.
+const filterFields = [{ id: "customer_name", label: "Customer Name", type: "text" as const }];
+
+function renderInParent(parent: React.ReactElement) {
+  return renderWithProviders(
+    <FrappeProvider
+      baseURL="https://frappetable-autoheight.spec.test"
+      fixtures={new InMemoryFixtureProvider({ Customer: customers })}
+    >
+      {parent}
+    </FrappeProvider>,
+  );
+}
+
+const table = (
+  <FrappeTable<Customer>
+    doctype="Customer"
+    columns={columns}
+    filterableFields={filterFields}
+    layout="table"
+    enablePagination={false}
+  />
+);
+
+const srcDir = path.resolve(__dirname, ".");
+
+function read(file: string): string {
+  return fs.readFileSync(path.resolve(srcDir, file), "utf-8");
+}
+
+function codeOnly(source: string): string {
+  return source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\/\/.*$/gm, "");
+}
+
+describe("FrappeTable in an auto-height parent (MPO-229)", () => {
+  it("renders every row inside a plain auto-height YStack", async () => {
+    renderInParent(<YStack>{table}</YStack>);
+    await screen.findByText("Customer 1");
+    for (const customer of customers) {
+      expect(screen.getByText(customer.customer_name)).toBeTruthy();
+    }
+    expect(screen.queryByText(/No Customer records found/i)).toBeNull();
+  });
+
+  it("still renders every row inside a fixed-height parent", async () => {
+    renderInParent(<YStack height={400}>{table}</YStack>);
+    await screen.findByText("Customer 1");
+    for (const customer of customers) {
+      expect(screen.getByText(customer.customer_name)).toBeTruthy();
+    }
+  });
+
+  it("roots grow and shrink on a basis of auto, the same geometry as DataTableRoot", () => {
+    const source = codeOnly(read("FrappeTable.tsx"));
+
+    // flex={1} is 1 1 0 in RN. Basis 0 in an auto-height parent resolves to 0
+    // and the table collapses to a one-row sliver.
+    expect(source).not.toContain("flex={1}");
+
+    const tags = source.match(/<YStack\b[^>]*>/g) ?? [];
+    const roots = tags.filter((tag) => tag.includes("flexBasis"));
+    expect(roots.length).toBe(2);
+    for (const root of roots) {
+      expect(root).toContain("flexGrow={1}");
+      expect(root).toContain("flexShrink={1}");
+      expect(root).toContain('flexBasis="auto"');
+      expect(root).toContain("minHeight={0}");
+    }
+  });
+
+  it("DataTableRoot still carries the geometry FrappeTable copies", () => {
+    const source = codeOnly(read("../../table/src/components/DataTable/DataTableRoot.tsx"));
+    const tags = source.match(/<View\b[^>]*>/g) ?? [];
+    const root = tags.find((tag) => tag.includes("flexBasis"));
+    expect(root).toBeTruthy();
+    expect(root).toContain("flexGrow={1}");
+    expect(root).toContain("flexShrink={1}");
+    expect(root).toContain('flexBasis="auto"');
+    expect(root).toContain("minHeight={0}");
+  });
+});

package/src/FrappeTable.rowAccumulator.spec.tsx

@@ -0,0 +1,110 @@
+/**
+ * A running balance on a FrappeTable (MPO-250).
+ *
+ * The gap this closes: `FrappeTableProps` omits `data`, so before the row
+ * accumulator existed there was NO prop that reached the rows. A consumer who
+ * wanted a folded column on a Frappe doctype had to fetch the doctype again
+ * itself and hand the folded rows to a bare DataTable — a second read path, a
+ * second error path, and no saved filters or refresh channel.
+ *
+ * What this locks: `rowAccumulator` passes through FrappeTable to the table,
+ * folds the rows FrappeTable already fetched, and the figures continue onto
+ * page two.
+ *
+ * Fixture-hermetic: postings ride InMemoryFixtureProvider.
+ */
+
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import type { DataTableColumn, RowAccumulator } from "@multiplatform.one/table";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
+import { FrappeProvider } from "./FrappeProvider";
+import { FrappeTable } from "./FrappeTable";
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: { en: { translation: {} } },
+  });
+});
+
+afterEach(() => cleanup());
+
+interface Posting {
+  name: string;
+  doctype: string;
+  date: string;
+  payee: string;
+  amount: number;
+  /** Derived by the accumulator — declared on the doc type so a column can
+   *  name it in accessorKey. */
+  running?: number;
+}
+
+const postings: Posting[] = Array.from({ length: 8 }, (_, i) => ({
+  name: `POST-${String(i + 1).padStart(2, "0")}`,
+  doctype: "Posting",
+  date: `2026-02-${String(i + 1).padStart(2, "0")}`,
+  payee: `Payee ${i + 1}`,
+  amount: 10,
+}));
+
+const runningBalance: RowAccumulator<Partial<Posting>, number> = {
+  initial: 0,
+  reduce: (carried, row) => carried + (row.amount ?? 0),
+  derive: (carried) => ({ running: carried }),
+  order: (a, b) => String(a.date).localeCompare(String(b.date)),
+};
+
+const columns: DataTableColumn<Partial<Posting>>[] = [
+  { id: "name", accessorKey: "name", header: "ID" },
+  { id: "amount", accessorKey: "amount", header: "Amount" },
+  {
+    id: "running",
+    accessorKey: "running",
+    header: "Balance",
+    sortable: false,
+    // Marked so an assertion can tell a balance of 10 from an amount of 10.
+    cell: ({ row }) => `bal ${row.original.running}`,
+  },
+];
+
+const filterFields = [{ id: "payee", label: "Payee", type: "text" as const }];
+
+describe("FrappeTable rowAccumulator", () => {
+  it("folds the rows FrappeTable fetched, and page two continues", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <FrappeProvider
+        baseURL="https://frappetable-fold.spec.test"
+        fixtures={new InMemoryFixtureProvider({ Posting: postings })}
+      >
+        <FrappeTable<Posting>
+          doctype="Posting"
+          columns={columns}
+          fields={["name", "date", "payee", "amount"]}
+          filterableFields={filterFields}
+          rowAccumulator={runningBalance}
+          layout="table"
+          initialState={{ pagination: { pageIndex: 0, pageSize: 4 } }}
+        />
+      </FrappeProvider>,
+    );
+
+    await waitFor(() => expect(screen.getByText("POST-01")).toBeTruthy());
+    expect(screen.getByText("bal 10")).toBeTruthy();
+    expect(screen.getByText("bal 40")).toBeTruthy();
+    expect(screen.queryByText("bal 50")).toBeNull();
+
+    await user.click(screen.getByLabelText("Go to next page"));
+    await waitFor(() => expect(screen.getByText("POST-05")).toBeTruthy());
+    expect(screen.getByText("bal 50"), "page two continues the fold").toBeTruthy();
+    expect(screen.getByText("bal 80")).toBeTruthy();
+    expect(screen.queryByText("bal 10"), "page one's opening balance is gone").toBeNull();
+  });
+});

package/src/FrappeTable.tsx

@@ -3,9 +3,7 @@ import {
   Order,
   matchesFilters,
   useDocTypeMeta,
-  useFrappeCollection,
   useFrappeDoctypeEvents,
-  useLiveQuery,
 } from "@multiplatform.one/frappe";
 import {
   DataTable,
@@ -25,12 +23,31 @@ import { FilterManager, SavedFilterDropdown, useSavedFilters } from "@multiplatf
 import { useFrappeConfig } from "./FrappeProvider";
 import { FrappeReconnectIndicator } from "./FrappeReconnectIndicator";
 import { docFieldsToFilterFields } from "./filterFields";
-import { toLiveLoadError } from "./liveErrors";
+import { useFrappeRows } from "./useFrappeRows";
 
 /**
  * Props for the FrappeTable component.
  *
- * @typeParam TDoc - The document type with at least name and doctype fields
+ * `data` is omitted because FrappeTable fetches its own rows. Everything else
+ * on `DataTableProps` passes straight through — including `rowAccumulator`
+ * (MPO-250), so a Frappe-bound table CAN carry a folded column (a running
+ * balance, a per-row cumulative count) without the caller re-fetching the
+ * doctype and hand-assembling a DataTable. Declare the derived field on
+ * `TDoc` so a column can name it in `accessorKey`:
+ *
+ * ```tsx
+ * const balance: RowAccumulator<Partial<Posting>, string> = {
+ *   initial: "0",
+ *   reduce: (carried, row) => addMoney(carried, row.amount ?? "0"),
+ *   derive: (carried) => ({ running: carried }),
+ *   order: (a, b) => compareByDateThenName(a, b),
+ * };
+ * <FrappeTable<Posting & { running?: string }> doctype="Posting" rowAccumulator={balance} … />
+ * ```
+ *
+ * The fold runs over the rows the table HOLDS, before pagination. In
+ * `serverSide` mode that is one page, so a running balance there needs the
+ * server to send the figure — the fold cannot invent rows it never got.
  */
 export interface FrappeTableProps<TDoc extends { name: string; doctype: string }> extends Omit<
   DataTableProps<Partial<TDoc>>,
@@ -310,8 +327,10 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
   const finalAuth = auth ?? config?.auth;
   const finalSyncOptions = syncOptions ?? config?.syncOptions;
 
-  if (!finalBaseURL) {
-    throw new Error("FrappeTable requires baseURL prop or FrappeProvider with baseURL");
+  // A fixture corpus is a complete data source, so it satisfies the same
+  // requirement a baseURL does: fixture mode never dials a server.
+  if (!finalBaseURL && !config?.fixtures) {
+    throw new Error("FrappeTable requires baseURL prop or FrappeProvider with baseURL or fixtures");
   }
 
   // One connection config for the live subscription (client mode), the
@@ -594,32 +613,31 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
   // Always call the hook — toggling `savedFilters` must not change hook order (SB-M-012).
   const savedFiltersHook = useSavedFilters({ userId });
 
-  // Honest error surface: the collection swallows initial-sync failures
-  // (renders as empty otherwise); onSyncError turns 403/PermissionError and
-  // network failures into a visible error state.
-  const handleSyncError = useCallback(
-    (err: unknown) => {
-      setErrorState(
-        toLiveLoadError(err, {
-          permissionMessage: t("You do not have permission to view {{doctype}}", { doctype }),
-          genericMessage: t("Error loading {{doctype}}", { doctype }),
-        }),
-      );
-    },
+  // The client/live-collection read is the SHARED one (MPO-251): collection
+  // + live query + the honest error surface a bare collection swallows
+  // (without onSyncError a 403 or a dead server renders as an empty table).
+  // `limit: null` keeps the bench's own page length rather than the hook's
+  // default — FrappeTable paginates on the rows it is handed, and moving its
+  // row ceiling here would move it for every existing consumer.
+  const rowsMessages = useMemo(
+    () => ({
+      permission: t("You do not have permission to view {{doctype}}", { doctype }),
+      generic: t("Error loading {{doctype}}", { doctype }),
+      queryFailed: t("Failed to load {{doctype}}", { doctype }),
+    }),
     [doctype, t],
   );
-
-  const collection = useFrappeCollection<TDoc>(
-    serverSide ? undefined : connectionConfig,
-    serverSide ? "" : doctype,
-    serverSide ? undefined : { fields, filters: activeFilters, onSyncError: handleSyncError },
-  );
   const {
-    data: rawData,
-    isLoading: isRowsLoading,
-    isError: isLiveError,
-  } = useLiveQuery((q) => (collection ? q.from({ _list: collection }) : null), [collection]);
-  const clientRows = useMemo(() => (rawData as TDoc[] | undefined) ?? [], [rawData]);
+    rows: clientRows,
+    isQueryLoading: isRowsLoading,
+    error: liveError,
+  } = useFrappeRows<TDoc>(serverSide ? undefined : connectionConfig, doctype, {
+    fields,
+    filters: activeFilters,
+    limit: null,
+    enabled: !serverSide,
+    messages: rowsMessages,
+  });
 
   // Keep-rows-and-reconcile for client/live-collection mode: a filter change
   // swaps the collection (new subscription), which reports loading from
@@ -661,19 +679,6 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
     ? !infiniteServerMode && serverLoading && hasLoadedOnce
     : isRowsLoading && lastGoodClientRows.current !== null;
 
-  // Reset stale errors when the underlying collection changes (new doctype
-  // or filters) so a recovered query doesn't keep showing the old failure.
-  useEffect(() => {
-    if (!serverSide) setErrorState(null);
-  }, [collection, serverSide]);
-
-  // Fallback surface for live-query failures the collection itself reports
-  // (onSyncError above carries the specific message when available).
-  useEffect(() => {
-    if (serverSide || !isLiveError) return;
-    setErrorState((prev) => prev ?? new Error(t("Failed to load {{doctype}}", { doctype })));
-  }, [serverSide, isLiveError, doctype, t]);
-
   const handleSelectFilter = (filter: any) => {
     if (filter) {
       setActiveFilters(filter.filters);
@@ -697,8 +702,12 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
     await savedFiltersHook.deleteFilter(name);
   };
 
-  if (errorState && error) {
-    return <>{error(errorState)}</>;
+  // serverSide failures come from the fetch above; client/live failures come
+  // from useFrappeRows. Only one path is ever live at a time.
+  const resolvedError = serverSide ? errorState : liveError;
+
+  if (resolvedError && error) {
+    return <>{error(resolvedError)}</>;
   }
 
   const rowData = rows ?? [];
@@ -706,8 +715,8 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
   // Infinite serverSide delegates loading/empty chrome to DataTable.
   // After the first load, NEVER replace DataTable with empty/loading chrome
   // while a refetch is in flight — that was the named blank-the-list defect.
-  const boundaryState = errorState
-    ? { error: errorState }
+  const boundaryState = resolvedError
+    ? { error: resolvedError }
     : isRowsLoadingResolved
       ? { loading: loading ?? true }
       : rowData.length === 0 && !infiniteServerMode && !isFetching
@@ -715,7 +724,16 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
         : null;
   if (boundaryState) {
     return (
-      <YStack {...knobProps.gap} flex={1}>
+      <YStack
+        {...knobProps.gap}
+        // flexBasis auto, not flex={1}: a basis-0 chain resolves to 0 in an
+        // auto-height parent and collapses the table to a sliver. Same
+        // geometry as DataTableRoot's own root.
+        flexGrow={1}
+        flexShrink={1}
+        flexBasis="auto"
+        minHeight={0}
+      >
         <FrappeReconnectIndicator config={connectionConfig} />
         <AsyncBoundary
           layout={layout === "list" || layout === "cards" ? "list" : "table"}
@@ -728,7 +746,16 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
   }
 
   return (
-    <YStack {...knobProps.gap} flex={1}>
+    <YStack
+      {...knobProps.gap}
+      // flexBasis auto, not flex={1}: a basis-0 chain resolves to 0 in an
+      // auto-height parent and collapses the table to a sliver. Same
+      // geometry as DataTableRoot's own root.
+      flexGrow={1}
+      flexShrink={1}
+      flexBasis="auto"
+      minHeight={0}
+    >
       <FrappeReconnectIndicator config={connectionConfig} />
       {savedFilters && savedFiltersHook && (
         <XStack {...knobProps.gap} padding="$2">