@marimo-team/islands 0.19.8-dev8 → 0.19.8-dev9

package/dist/main.js

@@ -52274,7 +52274,9 @@ Database schema: ${c}`), (_a3 = r2.aiFix) == null ? void 0 : _a3.setAiCompletion
     let { visible: c, hidden: d } = applyHidingRules(new Set(e.map(([e2]) => e2)), r.hidingRules);
     return {
       entries: sortByPrecedence(e.filter(([e2]) => c.has(e2)), r.precedence),
-      hidden: Array.from(d)
+      hidden: [
+        ...d
+      ]
     };
   }
   const LazyVegaEmbed = import_react.lazy(() => import("./react-vega-3WcLHYC7.js").then((e) => ({
@@ -63542,10 +63544,10 @@ ${O}`,
   }
   var import_client$1 = __toESM(require_client(), 1);
   function PluginSlotInternal({ hostElement: e, plugin: r, children: c, getInitialValue: d }, f) {
-    let [_, v] = (0, import_react.useState)(c), [y, S] = (0, import_react.useState)(d()), { theme: w } = useTheme(), [E, O] = (0, import_react.useState)(() => r.validator.safeParse(parseDataset(e)));
+    let [_, v] = (0, import_react.useState)(c), [y, S] = (0, import_react.useState)(d()), { theme: w } = useTheme(), [E, O] = (0, import_react.useState)(() => r.validator.safeParse(parseDataset(e))), [M, I] = (0, import_react.useState)(0);
     (0, import_react.useImperativeHandle)(f, () => ({
       reset: () => {
-        S(d()), O(r.validator.safeParse(parseDataset(e)));
+        S(d()), O(r.validator.safeParse(parseDataset(e))), I((e2) => e2 + 1);
       },
       setChildren: (e2) => {
         v(e2);
@@ -63568,12 +63570,12 @@ ${O}`,
       e,
       r.validator
     ]);
-    let M = useEvent_default((r2) => {
+    let z = useEvent_default((r2) => {
       S((c2) => {
         let d2 = Functions.asUpdater(r2)(c2);
         return shallowCompare(d2, c2) || e.dispatchEvent(createInputEvent(d2, e)), d2;
       });
-    }), I = (0, import_react.useMemo)(() => {
+    }), G = (0, import_react.useMemo)(() => {
       if (!r.functions) return {};
       let c2 = {};
       for (let [d2, f2] of Objects.entries(r.functions)) {
@@ -63606,7 +63608,8 @@ ${O}`,
       return c2;
     }, [
       r.functions,
-      e
+      e,
+      M
     ]);
     return E.success ? (0, import_jsx_runtime.jsx)(StyleNamespace, {
       children: (0, import_jsx_runtime.jsx)("div", {
@@ -63614,12 +63617,12 @@ ${O}`,
         children: (0, import_jsx_runtime.jsx)(import_react.Suspense, {
           fallback: (0, import_jsx_runtime.jsx)("div", {}),
           children: r.render({
-            setValue: M,
+            setValue: z,
             value: y,
             data: E.data,
             children: _,
             host: e,
-            functions: I
+            functions: G
           })
         })
       })
@@ -73175,7 +73178,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.19.8-dev8"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.19.8-dev9"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var import_compiler_runtime$88 = require_compiler_runtime();
   function useKeydownOnElement(e, r) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.19.8-dev8",
+  "version": "0.19.8-dev9",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/data-table/__tests__/data-table.test.tsx

@@ -1,6 +1,11 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import type { ColumnDef, RowSelectionState } from "@tanstack/react-table";
-import { render, screen } from "@testing-library/react";
+import type {
+  ColumnDef,
+  PaginationState,
+  RowSelectionState,
+  SortingState,
+} from "@tanstack/react-table";
+import { render, screen, within } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { DataTable } from "../data-table";
@@ -95,4 +100,91 @@ describe("DataTable", () => {
     expect(rows[1]).toHaveAttribute("title", "Michael Scott");
     expect(rows[2]).toHaveAttribute("title", "Jim Halpert");
   });
+
+  it("should display updated data after rerender with manual sorting and pagination", () => {
+    // Simulates the bug from issue #8023:
+    // When a user sorts a table, rows that moved from page 2 to page 1
+    // don't visually refresh after the underlying data is updated.
+
+    interface RowData {
+      id: number;
+      status: string;
+      value: number;
+    }
+
+    // Initial data: 4 rows, page_size=3
+    const initialData: RowData[] = [
+      { id: 4, status: "pending", value: 40 },
+      { id: 3, status: "pending", value: 30 },
+      { id: 2, status: "pending", value: 20 },
+    ];
+
+    const columns: ColumnDef<RowData>[] = [
+      { id: "id", accessorFn: (row) => row.id, header: "id" },
+      { id: "status", accessorFn: (row) => row.status, header: "status" },
+      { id: "value", accessorFn: (row) => row.value, header: "value" },
+    ];
+
+    // Simulate sorted state (value descending) - manual sorting means
+    // data comes pre-sorted from backend
+    const sorting: SortingState = [{ id: "value", desc: true }];
+    const setSorting = vi.fn();
+
+    const paginationState: PaginationState = { pageIndex: 0, pageSize: 3 };
+    const setPaginationState = vi.fn();
+
+    const commonProps = {
+      columns,
+      selection: null as "single" | "multi" | null,
+      totalRows: 4,
+      totalColumns: 3,
+      pagination: true,
+      manualPagination: true,
+      paginationState,
+      setPaginationState,
+      manualSorting: true,
+      sorting,
+      setSorting,
+    };
+
+    const { rerender } = render(
+      <TooltipProvider>
+        <DataTable {...commonProps} data={initialData} />
+      </TooltipProvider>,
+    );
+
+    // Verify initial data is displayed - look for "pending" in cells
+    const rows = screen.getAllByRole("row");
+    // Row 0 is header, rows 1-3 are data rows
+    expect(rows).toHaveLength(4); // 1 header + 3 data rows
+    // All rows should show "pending"
+    expect(within(rows[1]).getByText("pending")).toBeTruthy();
+    expect(within(rows[2]).getByText("pending")).toBeTruthy();
+    expect(within(rows[3]).getByText("pending")).toBeTruthy();
+
+    // Now simulate data update: row with id=4 is now "approved"
+    // Backend returns sorted data with the update applied
+    const updatedData: RowData[] = [
+      { id: 4, status: "approved", value: 40 },
+      { id: 3, status: "pending", value: 30 },
+      { id: 2, status: "pending", value: 20 },
+    ];
+
+    // Rerender with updated data (same sorting, same pagination)
+    rerender(
+      <TooltipProvider>
+        <DataTable {...commonProps} data={updatedData} />
+      </TooltipProvider>,
+    );
+
+    // BUG: The row should show "approved" but might show stale "pending"
+    const updatedRows = screen.getAllByRole("row");
+    expect(updatedRows).toHaveLength(4);
+
+    // The first data row (id=4) should now show "approved"
+    expect(within(updatedRows[1]).getByText("approved")).toBeTruthy();
+    // Other rows should still show "pending"
+    expect(within(updatedRows[2]).getByText("pending")).toBeTruthy();
+    expect(within(updatedRows[3]).getByText("pending")).toBeTruthy();
+  });
 });

package/src/core/MarimoApp.tsx

@@ -39,14 +39,18 @@ const LazyGalleryPage = reactLazyWithPreload(
 );
 
 export function preloadPage(mode: string) {
-  if (mode === "home") {
-    LazyHomePage.preload();
-  } else if (mode === "gallery") {
-    LazyGalleryPage.preload();
-  } else if (mode === "read") {
-    LazyRunPage.preload();
-  } else {
-    LazyEditPage.preload();
+  switch (mode) {
+    case "home":
+      LazyHomePage.preload();
+      break;
+    case "gallery":
+      LazyGalleryPage.preload();
+      break;
+    case "read":
+      LazyRunPage.preload();
+      break;
+    default:
+      LazyEditPage.preload();
   }
 }
 

package/src/plugins/core/registerReactComponent.tsx

@@ -101,10 +101,17 @@ function PluginSlotInternal<T>(
     return plugin.validator.safeParse(parseDataset(hostElement));
   });
 
+  // Incremented on each reset to invalidate memoized function references.
+  // This ensures that plugin functions (e.g., search) are re-created when
+  // the underlying UI element instance changes (new object-id), even if
+  // the element's data attributes haven't changed.
+  const [resetNonce, setResetNonce] = useState(0);
+
   useImperativeHandle(ref, () => ({
     reset: () => {
       setValue(getInitialValue());
       setParsedResult(plugin.validator.safeParse(parseDataset(hostElement)));
+      setResetNonce((n) => n + 1);
     },
     setChildren: (children) => {
       setChildNodes(children);
@@ -224,7 +231,8 @@ function PluginSlotInternal<T>(
     }
 
     return methods;
-  }, [plugin.functions, hostElement]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [plugin.functions, hostElement, resetNonce]);
 
   // If we failed to parse the initial value, render an error
   if (!parsedResult.success) {

package/src/plugins/impl/__tests__/DataTablePlugin.test.tsx

@@ -0,0 +1,164 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import { Provider } from "jotai";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import type { DownloadAsArgs } from "@/components/data-table/schemas";
+import type { FieldTypesWithExternalType } from "@/components/data-table/types";
+import { store } from "@/core/state/jotai";
+import {
+  type GetDataUrl,
+  type GetRowIds,
+  LoadingDataTableComponent,
+} from "../DataTablePlugin";
+
+beforeAll(() => {
+  global.ResizeObserver = class ResizeObserver {
+    observe() {
+      // do nothing
+    }
+    unobserve() {
+      // do nothing
+    }
+    disconnect() {
+      // do nothing
+    }
+  };
+});
+
+describe("LoadingDataTableComponent", () => {
+  /**
+   * Regression test for https://github.com/marimo-team/marimo/issues/8023
+   *
+   * When a table is replaced via mo.output.replace() with updated data,
+   * but the initial page data (unsorted first page) hasn't changed,
+   * the useAsyncData hook's deps may all remain the same.
+   * Previously, the `search` function reference was memoized on
+   * [plugin.functions, hostElement] and wouldn't change on reset(),
+   * so the useAsyncData effect wouldn't re-fire.
+   *
+   * The fix adds a resetNonce to the functionMethods memo deps,
+   * so when the plugin is reset (table instance changes), the search
+   * function reference changes, triggering useAsyncData to re-fetch.
+   *
+   * This test verifies that when the search function reference changes
+   * (simulating reset()), the component re-fetches data even if
+   * props.data hasn't changed.
+   */
+  it("should refetch data when search function reference changes", async () => {
+    const host = document.createElement("div");
+    const setValue = vi.fn();
+
+    // The initial page data string - identical for both renders.
+    // This simulates the case where only a row on page 2 changed,
+    // so the first page data is the same.
+    const initialPageData = JSON.stringify([
+      { id: 1, status: "pending", value: 10 },
+      { id: 2, status: "pending", value: 20 },
+      { id: 3, status: "pending", value: 30 },
+    ]);
+
+    const searchResult = {
+      data: [
+        { id: 1, status: "pending", value: 10 },
+        { id: 2, status: "pending", value: 20 },
+        { id: 3, status: "pending", value: 30 },
+      ],
+      total_rows: 4,
+      cell_styles: null,
+      cell_hover_texts: null,
+    };
+
+    const searchFn1 = vi.fn().mockResolvedValue(searchResult);
+    const searchFn2 = vi.fn().mockResolvedValue(searchResult);
+
+    const fieldTypes: FieldTypesWithExternalType = [
+      ["id", ["integer", "integer"]],
+      ["status", ["string", "string"]],
+      ["value", ["integer", "integer"]],
+    ];
+
+    const commonProps = {
+      label: null,
+      totalRows: 4,
+      pagination: true,
+      pageSize: 3,
+      selection: "single" as const,
+      showDownload: false,
+      showFilters: false,
+      showColumnSummaries: false as const,
+      showDataTypes: false,
+      showPageSizeSelector: false,
+      showColumnExplorer: false,
+      showRowExplorer: false,
+      showChartBuilder: false,
+      rowHeaders: [] as FieldTypesWithExternalType,
+      fieldTypes,
+      totalColumns: 3,
+      maxColumns: "all" as const,
+      hasStableRowId: false,
+      lazy: false,
+      host,
+      enableSearch: true,
+      value: [] as (number | string | { rowId: string; columnName?: string })[],
+      setValue,
+      download_as: vi.fn() as DownloadAsArgs,
+      get_column_summaries: vi.fn().mockResolvedValue({
+        data: null,
+        stats: {},
+        bin_values: {},
+        value_counts: {},
+        show_charts: false,
+      }),
+      get_data_url: vi.fn() as GetDataUrl,
+      get_row_ids: vi.fn() as GetRowIds,
+    };
+
+    const Wrapper = ({ children }: { children: React.ReactNode }) => (
+      <Provider store={store}>
+        <TooltipProvider>{children}</TooltipProvider>
+      </Provider>
+    );
+
+    // Render with first search function
+    const { rerender } = render(
+      <Wrapper>
+        <LoadingDataTableComponent
+          {...commonProps}
+          data={initialPageData}
+          search={searchFn1}
+        />
+      </Wrapper>,
+    );
+
+    // Wait for the table to render with data
+    await waitFor(() => {
+      expect(screen.getAllByRole("row").length).toBeGreaterThan(1);
+    });
+
+    // Search was called on initial load (fire-and-forget for canShowInitialPage)
+    expect(searchFn1).toHaveBeenCalled();
+
+    // Now rerender with the same data but a NEW search function reference.
+    // This simulates what happens after reset() when resetNonce increments
+    // and functionMethods is recreated.
+    await act(async () => {
+      rerender(
+        <Wrapper>
+          <LoadingDataTableComponent
+            {...commonProps}
+            data={initialPageData}
+            search={searchFn2}
+          />
+        </Wrapper>,
+      );
+    });
+
+    // The new search function should be called because the search
+    // dependency changed in useAsyncData.
+    await waitFor(() => {
+      expect(searchFn2).toHaveBeenCalled();
+    });
+  });
+});

package/src/utils/__tests__/mime-types.test.ts

@@ -132,7 +132,7 @@ describe("mime-types", () => {
 
   describe("sortByPrecedence", () => {
     it("should sort entries by precedence order", () => {
-      const entries: Array<[MimeType, string]> = [
+      const entries: [MimeType, string][] = [
         ["text/plain", "plain"],
         ["text/html", "html"],
         ["image/png", "png"],
@@ -151,7 +151,7 @@ describe("mime-types", () => {
     });
 
     it("should place unknown mime types at the end", () => {
-      const entries: Array<[MimeType, string]> = [
+      const entries: [MimeType, string][] = [
         ["text/plain", "plain"],
         ["text/html", "html"],
         ["application/json", "json"],
@@ -173,7 +173,7 @@ describe("mime-types", () => {
     });
 
     it("should handle empty precedence", () => {
-      const entries: Array<[MimeType, string]> = [
+      const entries: [MimeType, string][] = [
         ["text/plain", "plain"],
         ["text/html", "html"],
       ];
@@ -184,7 +184,7 @@ describe("mime-types", () => {
     });
 
     it("should not mutate original array", () => {
-      const entries: Array<[MimeType, string]> = [
+      const entries: [MimeType, string][] = [
         ["text/plain", "plain"],
         ["text/html", "html"],
       ];
@@ -198,7 +198,7 @@ describe("mime-types", () => {
 
   describe("processMimeBundle", () => {
     it("should filter and sort mime entries", () => {
-      const entries: Array<[MimeType, string]> = [
+      const entries: [MimeType, string][] = [
         ["text/plain", "plain"],
         ["text/html", "html"],
         ["image/png", "png"],
@@ -226,7 +226,7 @@ describe("mime-types", () => {
     });
 
     it("should use default config when not provided", () => {
-      const entries: Array<[MimeType, string]> = [
+      const entries: [MimeType, string][] = [
         ["text/html", "html"],
         ["image/png", "png"],
         ["text/markdown", "md"],
@@ -240,9 +240,7 @@ describe("mime-types", () => {
 
     it("should preserve data associated with mime types", () => {
       const htmlData = { content: "<h1>Hello</h1>" };
-      const entries: Array<[MimeType, typeof htmlData]> = [
-        ["text/html", htmlData],
-      ];
+      const entries: [MimeType, typeof htmlData][] = [["text/html", htmlData]];
 
       const result = processMimeBundle(entries);
 
@@ -250,7 +248,7 @@ describe("mime-types", () => {
     });
 
     it("should sort by precedence after filtering", () => {
-      const entries: Array<[MimeType, string]> = [
+      const entries: [MimeType, string][] = [
         ["text/plain", "plain"],
         ["text/markdown", "md"],
         ["text/html", "html"],

package/src/utils/mime-types.ts

@@ -26,7 +26,7 @@ export interface MimeTypeConfig {
  */
 export interface ProcessedMimeTypes<T> {
   /** The filtered and sorted mime entries */
-  entries: Array<[MimeType, T]>;
+  entries: [MimeType, T][];
   /** Mime types that were hidden by rules */
   hidden: MimeType[];
 }
@@ -146,9 +146,9 @@ export function applyHidingRules(
  * Mime types not in the map are placed at the end, preserving their original order.
  */
 export function sortByPrecedence<T>(
-  entries: Array<[MimeType, T]>,
+  entries: [MimeType, T][],
   precedence: ReadonlyMap<MimeType, number>,
-): Array<[MimeType, T]> {
+): [MimeType, T][] {
   const unknownPrecedence = precedence.size;
 
   return [...entries].sort((a, b) => {
@@ -162,7 +162,7 @@ export function sortByPrecedence<T>(
  * Main entry point: processes mime entries by applying hiding rules and sorting.
  */
 export function processMimeBundle<T>(
-  entries: Array<[MimeType, T]>,
+  entries: [MimeType, T][],
   config: MimeTypeConfig = getDefaultMimeConfig(),
 ): ProcessedMimeTypes<T> {
   if (entries.length === 0) {
@@ -176,6 +176,6 @@ export function processMimeBundle<T>(
 
   return {
     entries: sortedEntries,
-    hidden: Array.from(hidden),
+    hidden: [...hidden],
   };
 }