@marimo-team/islands 0.21.2-dev77 → 0.21.2-dev79

package/dist/{process-output-Xg5O7mVz.js → process-output-Cv8vQ4At.js}

@@ -17,19 +17,19 @@ import { H as string, L as number, N as literal, O as array, R as object, W as u
 import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
 import { t as require_react_dom } from "./react-dom-BKwCWYPW.js";
 import { i as TooltipProvider, t as Tooltip } from "./tooltip-DnI4CwIS.js";
-import { a as linter, c as historyField, i as forEachDiagnostic, l as insertTab, o as setDiagnostics, s as history, u as CopyClipboardIcon } from "./esm-Bcbo0Yvz.js";
+import { a as linter, c as historyField, i as forEachDiagnostic, l as insertTab, o as setDiagnostics, s as history, u as CopyClipboardIcon } from "./esm-CxoKu9RN.js";
 import { t as toInteger_default } from "./toInteger-BUeg_O0F.js";
 import { i as debounce_default } from "./constants-LmeAawHa.js";
 import { a as getResolvedMarimoConfig, g as useAtomValue, h as useAtom, i as autoInstantiateAtom, l as createDeepEqualAtom, m as Provider, n as useTheme, p as isIslands, t as resolvedThemeAtom, u as store, w as isEqual_default, y as atom } from "./useTheme-5GTtjXjy.js";
-import { $ as ViewPlugin, At as Prec, B as tags, Dt as EditorState, E as getIndentUnit, Et as EditorSelection, Ft as StateField, I as syntaxTree, It as Text, J as parseMixed, L as unfoldAll, Lt as Transaction, Ot as Facet, Pt as StateEffect, Q as GutterMarker, S as foldInside, Tt as Compartment, Y as Decoration, Z as EditorView, b as foldAll, dt as keymap, f as StreamLanguage, jt as RangeSet, l as LanguageDescription, mt as placeholder, ot as gutter, u as LanguageSupport, ut as hoverTooltip, vt as showPanel, w as foldNodeProp, xt as Annotation, yt as showTooltip } from "./dist-N1lm7LVK.js";
+import { $ as ViewPlugin, At as Prec, B as tags, Dt as EditorState, E as getIndentUnit, Et as EditorSelection, Ft as StateField, I as syntaxTree, It as Text, J as parseMixed, L as unfoldAll, Lt as Transaction, Ot as Facet, Pt as StateEffect, Q as GutterMarker, S as foldInside, Tt as Compartment, Y as Decoration, Z as EditorView, b as foldAll, dt as keymap, f as StreamLanguage, jt as RangeSet, l as LanguageDescription, mt as placeholder, ot as gutter, u as LanguageSupport, ut as hoverTooltip, vt as showPanel, w as foldNodeProp, xt as Annotation, yt as showTooltip } from "./dist-C4EV3aDt.js";
 import { t as invariant } from "./invariant-Ctm_8TNZ.js";
 import { a as arrayInsert, i as arrayDelete, n as once, o as arrayInsertMany, s as arrayMove, u as clamp } from "./once-DjP4Kbhy.js";
 import { t as getIframeCapabilities } from "./capabilities-DAGZLwa6.js";
-import { d as snippet, n as acceptCompletion, r as autocompletion, u as insertCompletionText } from "./dist-DqweMfpO.js";
+import { d as snippet, n as acceptCompletion, r as autocompletion, u as insertCompletionText } from "./dist-BYr4a-wE.js";
 import { t as require_main } from "./main-sxFlUO_N.js";
-import { a as PLSQL, c as SQLite, d as schemaCompletionSource, f as sql, i as MySQL, l as StandardSQL, n as MSSQL, o as PostgreSQL, r as MariaSQL, s as SQLDialect, t as Cassandra, u as keywordCompletionSource } from "./dist-DlacJSaE.js";
-import { a as markdown, s as markdownLanguage } from "./dist-B771Ewvn.js";
-import { a as parser, i as pythonLanguage, n as localCompletionSource, r as python, t as globalCompletion } from "./dist-D2nC1On3.js";
+import { a as PLSQL, c as SQLite, d as schemaCompletionSource, f as sql, i as MySQL, l as StandardSQL, n as MSSQL, o as PostgreSQL, r as MariaSQL, s as SQLDialect, t as Cassandra, u as keywordCompletionSource } from "./dist-D75XqRaT.js";
+import { a as markdown, s as markdownLanguage } from "./dist-CSiTW5NO.js";
+import { a as parser, i as pythonLanguage, n as localCompletionSource, r as python, t as globalCompletion } from "./dist-C16JG-Ok.js";
 import { n as stexMath } from "./stex-7yEw16Ww.js";
 import { t as purify } from "./purify.es-Co_dANLh.js";
 import { t as useAsyncData } from "./useAsyncData-BtHYXgXF.js";
@@ -16172,7 +16172,7 @@ ${r.join("\n")}`;
     return new LanguageSupport(StreamLanguage.define(e));
   }
   function sql$1(e) {
-    return import("./dist-CsToCMcA.js").then((t) => t.sql({
+    return import("./dist-Dd9vDQtp.js").then((t) => t.sql({
       dialect: t[e]
     }));
   }
@@ -16185,7 +16185,7 @@ ${r.join("\n")}`;
         "ino"
       ],
       load() {
-        return import("./dist-C1uqqTuH.js").then((e) => e.cpp());
+        return import("./dist-D6YTv0Kj.js").then((e) => e.cpp());
       }
     }),
     LanguageDescription.of({
@@ -16204,7 +16204,7 @@ ${r.join("\n")}`;
         "hxx"
       ],
       load() {
-        return import("./dist-C1uqqTuH.js").then((e) => e.cpp());
+        return import("./dist-D6YTv0Kj.js").then((e) => e.cpp());
       }
     }),
     LanguageDescription.of({
@@ -16225,7 +16225,7 @@ ${r.join("\n")}`;
         "css"
       ],
       load() {
-        return import("./dist-CMWhb0s1.js").then((e) => e.css());
+        return import("./dist-Cbkga3s5.js").then((e) => e.css());
       }
     }),
     LanguageDescription.of({
@@ -16234,7 +16234,7 @@ ${r.join("\n")}`;
         "go"
       ],
       load() {
-        return import("./dist-CXsGjNbR.js").then((e) => e.go());
+        return import("./dist-CKVkWFcB.js").then((e) => e.go());
       }
     }),
     LanguageDescription.of({
@@ -16249,7 +16249,7 @@ ${r.join("\n")}`;
         "hbs"
       ],
       load() {
-        return import("./dist-DEmPLkH9.js").then((e) => e.html());
+        return import("./dist-XYBhoeSX.js").then((e) => e.html());
       }
     }),
     LanguageDescription.of({
@@ -16258,7 +16258,7 @@ ${r.join("\n")}`;
         "java"
       ],
       load() {
-        return import("./dist-e8VqCQ_P.js").then((e) => e.java());
+        return import("./dist-BHGf2Zey.js").then((e) => e.java());
       }
     }),
     LanguageDescription.of({
@@ -16274,7 +16274,7 @@ ${r.join("\n")}`;
         "cjs"
       ],
       load() {
-        return import("./dist-CwP9oyR8.js").then((e) => e.javascript());
+        return import("./dist-Y9GfSR6_.js").then((e) => e.javascript());
       }
     }),
     LanguageDescription.of({
@@ -16285,7 +16285,7 @@ ${r.join("\n")}`;
         "jinja2"
       ],
       load() {
-        return import("./dist-wQD8nhf9.js").then((e) => e.jinja());
+        return import("./dist-Ui51qXMz.js").then((e) => e.jinja());
       }
     }),
     LanguageDescription.of({
@@ -16298,7 +16298,7 @@ ${r.join("\n")}`;
         "map"
       ],
       load() {
-        return import("./dist-C1UyhB0b.js").then((e) => e.json());
+        return import("./dist-CN4RKgNR.js").then((e) => e.json());
       }
     }),
     LanguageDescription.of({
@@ -16307,7 +16307,7 @@ ${r.join("\n")}`;
         "jsx"
       ],
       load() {
-        return import("./dist-CwP9oyR8.js").then((e) => e.javascript({
+        return import("./dist-Y9GfSR6_.js").then((e) => e.javascript({
           jsx: true
         }));
       }
@@ -16318,7 +16318,7 @@ ${r.join("\n")}`;
         "less"
       ],
       load() {
-        return import("./dist-BPlAe3w3.js").then((e) => e.less());
+        return import("./dist-CVOkf_3P.js").then((e) => e.less());
       }
     }),
     LanguageDescription.of({
@@ -16327,7 +16327,7 @@ ${r.join("\n")}`;
         "liquid"
       ],
       load() {
-        return import("./dist-DYoFz28E.js").then((e) => e.liquid());
+        return import("./dist-C9TDg2aq.js").then((e) => e.liquid());
       }
     }),
     LanguageDescription.of({
@@ -16344,7 +16344,7 @@ ${r.join("\n")}`;
         "mkd"
       ],
       load() {
-        return import("./dist-DqT0O-4m.js").then((e) => e.markdown());
+        return import("./dist-DUg5n_x5.js").then((e) => e.markdown());
       }
     }),
     LanguageDescription.of({
@@ -16370,7 +16370,7 @@ ${r.join("\n")}`;
         "phtml"
       ],
       load() {
-        return import("./dist-BQnLGf1A.js").then((e) => e.php());
+        return import("./dist-D9vawryf.js").then((e) => e.php());
       }
     }),
     LanguageDescription.of({
@@ -16398,7 +16398,7 @@ ${r.join("\n")}`;
       ],
       filename: /^(BUCK|BUILD)$/,
       load() {
-        return import("./dist-BmTKj-5m.js").then((e) => e.python());
+        return import("./dist-C8N7114Z.js").then((e) => e.python());
       }
     }),
     LanguageDescription.of({
@@ -16407,7 +16407,7 @@ ${r.join("\n")}`;
         "rs"
       ],
       load() {
-        return import("./dist-CCeSY9xv.js").then((e) => e.rust());
+        return import("./dist-BImOGJZM.js").then((e) => e.rust());
       }
     }),
     LanguageDescription.of({
@@ -16416,7 +16416,7 @@ ${r.join("\n")}`;
         "sass"
       ],
       load() {
-        return import("./dist-DeSnQwvL.js").then((e) => e.sass({
+        return import("./dist-DasJgTvL.js").then((e) => e.sass({
           indented: true
         }));
       }
@@ -16427,7 +16427,7 @@ ${r.join("\n")}`;
         "scss"
       ],
       load() {
-        return import("./dist-DeSnQwvL.js").then((e) => e.sass());
+        return import("./dist-DasJgTvL.js").then((e) => e.sass());
       }
     }),
     LanguageDescription.of({
@@ -16451,7 +16451,7 @@ ${r.join("\n")}`;
         "tsx"
       ],
       load() {
-        return import("./dist-CwP9oyR8.js").then((e) => e.javascript({
+        return import("./dist-Y9GfSR6_.js").then((e) => e.javascript({
           jsx: true,
           typescript: true
         }));
@@ -16468,7 +16468,7 @@ ${r.join("\n")}`;
         "cts"
       ],
       load() {
-        return import("./dist-CwP9oyR8.js").then((e) => e.javascript({
+        return import("./dist-Y9GfSR6_.js").then((e) => e.javascript({
           typescript: true
         }));
       }
@@ -16480,7 +16480,7 @@ ${r.join("\n")}`;
         "wast"
       ],
       load() {
-        return import("./dist-BZRBnAnM.js").then((e) => e.wast());
+        return import("./dist-d2msfN-B.js").then((e) => e.wast());
       }
     }),
     LanguageDescription.of({
@@ -16497,7 +16497,7 @@ ${r.join("\n")}`;
         "svg"
       ],
       load() {
-        return import("./dist-DSSPn3fP.js").then((e) => e.xml());
+        return import("./dist-uR-o9IVx.js").then((e) => e.xml());
       }
     }),
     LanguageDescription.of({
@@ -16510,7 +16510,7 @@ ${r.join("\n")}`;
         "yml"
       ],
       load() {
-        return import("./dist-BK8Ch8me.js").then((e) => e.yaml());
+        return import("./dist-BbJfmCHJ.js").then((e) => e.yaml());
       }
     }),
     LanguageDescription.of({
@@ -17610,13 +17610,13 @@ ${r.join("\n")}`;
         "vue"
       ],
       load() {
-        return import("./dist-kGaha3sX.js").then((e) => e.vue());
+        return import("./dist-C0v-nFs_.js").then((e) => e.vue());
       }
     }),
     LanguageDescription.of({
       name: "Angular Template",
       load() {
-        return import("./dist-CJEfzjG5.js").then((e) => e.angular());
+        return import("./dist-zGOEySUQ.js").then((e) => e.angular());
       }
     })
   ], cache$1 = /* @__PURE__ */ new WeakMap(), newline = /(\n|\r\n?|\u2028|\u2029)/g, leadingWhitespace = /^\s*/, nonWhitespace = /\S/, slice = Array.prototype.slice, zero = 48, nine = 57, lowerA = 97, lowerF = 102, upperA = 65, upperF = 70;
@@ -27193,7 +27193,7 @@ ${n.sqlString}
       hasConsoleOutput: (o == null ? void 0 : o.consoleOutputs) != null
     };
   }
-  LazyAnyLanguageCodeMirror = (0, import_react.lazy)(() => import("./any-language-editor-CSvBdMtG.js"));
+  LazyAnyLanguageCodeMirror = (0, import_react.lazy)(() => import("./any-language-editor-BBegsg-m.js"));
   var import_compiler_runtime$1 = require_compiler_runtime(), extensions = [
     EditorView.lineWrapping
   ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.21.2-dev77",
+  "version": "0.21.2-dev79",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -96,6 +96,7 @@
     "@tailwindcss/postcss": "^4.1.18",
     "@tailwindcss/typography": "^0.5.19",
     "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.23",
     "@textea/json-viewer": "^4.0.1",
     "@types/humanize-duration": "^3.27.4",
     "@types/js-cookie": "^3.0.6",

package/src/__tests__/setup.ts

@@ -5,6 +5,21 @@ import { afterEach, beforeEach, vi } from "vitest";
 import "@testing-library/jest-dom/vitest";
 import "blob-polyfill";
 
+// mock implementation because jsdom doesn't support ResizeObserver
+// if we need to test ResizeObserver functionality
+// we can use a library like "resize-observer-polyfill"
+globalThis.ResizeObserver ??= class {
+  observe(_target: Element) {
+    /* noop */
+  }
+  unobserve(_target: Element) {
+    /* noop */
+  }
+  disconnect() {
+    /* noop */
+  }
+} as never;
+
 // Global setup for all tests
 beforeEach(() => {
   // Reset all mocks before each test

package/src/components/data-table/TableActions.tsx

@@ -9,6 +9,7 @@ import {
   SearchIcon,
 } from "lucide-react";
 import React from "react";
+import { useLocale } from "react-aria";
 import type { GetRowIds } from "@/plugins/impl/DataTablePlugin";
 import { cn } from "@/utils/cn";
 import type { PanelType } from "../editor/chrome/panels/context-aware-panel/context-aware-panel";
@@ -16,7 +17,7 @@ import { Button } from "../ui/button";
 import { Tooltip } from "../ui/tooltip";
 import { toast } from "../ui/use-toast";
 import { type DownloadActionProps, DownloadAs } from "./download-actions";
-import { DataTablePagination } from "./pagination";
+import { DataTablePagination, prettifyRowColumnCount } from "./pagination";
 import type { DataTableSelection } from "./types";
 
 interface TableActionsProps<TData> {
@@ -64,6 +65,7 @@ export const TableActions = <TData,>({
   isPanelOpen,
   tableLoading,
 }: TableActionsProps<TData>) => {
+  const { locale } = useLocale();
   const handleSelectAllRows = (value: boolean) => {
     if (!onRowSelectionChange) {
       return;
@@ -173,7 +175,7 @@ export const TableActions = <TData,>({
         </>
       )}
 
-      {pagination && (
+      {pagination ? (
         <DataTablePagination
           totalColumns={totalColumns}
           selection={selection}
@@ -182,6 +184,10 @@ export const TableActions = <TData,>({
           tableLoading={tableLoading}
           showPageSizeSelector={showPageSizeSelector}
         />
+      ) : (
+        <span className="text-xs text-muted-foreground px-2">
+          {prettifyRowColumnCount(table.getRowCount(), totalColumns, locale)}
+        </span>
       )}
       <div className="ml-auto">
         {downloadAs && (

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

@@ -101,6 +101,69 @@ describe("DataTable", () => {
     expect(rows[2]).toHaveAttribute("title", "Jim Halpert");
   });
 
+  it("does not virtualize small datasets without pagination", () => {
+    const testData = Array.from({ length: 50 }, (_, i) => ({
+      id: i,
+      name: `Item ${i}`,
+    }));
+
+    const columns: ColumnDef<TestData>[] = [
+      { accessorKey: "id", header: "ID" },
+      { accessorKey: "name", header: "Name" },
+    ];
+
+    render(
+      <TooltipProvider>
+        <DataTable
+          data={testData}
+          columns={columns}
+          selection={null}
+          totalRows={50}
+          totalColumns={2}
+          pagination={false}
+        />
+      </TooltipProvider>,
+    );
+
+    // All 50 data rows + 1 header row should be in the DOM (no virtualization)
+    const rows = screen.getAllByRole("row");
+    expect(rows).toHaveLength(51);
+  });
+
+  it("virtualizes large datasets — renders fewer rows than the full dataset", () => {
+    const testData = Array.from({ length: 200 }, (_, i) => ({
+      id: i,
+      name: `Item ${i}`,
+    }));
+
+    const columns: ColumnDef<TestData>[] = [
+      { accessorKey: "id", header: "ID" },
+      { accessorKey: "name", header: "Name" },
+    ];
+
+    render(
+      <TooltipProvider>
+        <DataTable
+          data={testData}
+          columns={columns}
+          selection={null}
+          totalRows={200}
+          totalColumns={2}
+          pagination={false}
+        />
+      </TooltipProvider>,
+    );
+
+    // In jsdom the virtualizer sees a 0-height container and renders 0 data
+    // rows (no layout engine). The key assertion is that significantly fewer
+    // than 200 rows are in the DOM, which catches regressions where
+    // virtualization is accidentally disabled and all rows are rendered.
+    const rows = screen.getAllByRole("row");
+    // Subtract 1 for the header row
+    const dataRows = rows.length - 1;
+    expect(dataRows).toBeLessThan(200);
+  });
+
   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

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

@@ -38,12 +38,17 @@ import type { DownloadActionProps } from "./download-actions";
 import { FilterPills } from "./filter-pills";
 import { FocusRowFeature } from "./focus-row/feature";
 import { useColumnPinning } from "./hooks/use-column-pinning";
+import { useScrollContainerHeight } from "./hooks/use-scroll-container-height";
 import { CellSelectionStats } from "./range-focus/cell-selection-stats";
 import { CellSelectionProvider } from "./range-focus/provider";
 import { DataTableBody, renderTableHeader } from "./renderers";
 import { SearchBar } from "./SearchBar";
 import { TableActions } from "./TableActions";
-import type { DataTableSelection, TooManyRows } from "./types";
+import {
+  type DataTableSelection,
+  MIN_ROWS_TO_VIRTUALIZE,
+  type TooManyRows,
+} from "./types";
 import { getStableRowId } from "./utils";
 
 interface DataTableProps<TData> extends Partial<DownloadActionProps> {
@@ -268,36 +273,9 @@ const DataTableInternal = <TData,>({
   });
 
   const rowViewerPanelOpen = isPanelOpen?.("row-viewer") ?? false;
+  const virtualize = !pagination && data.length > MIN_ROWS_TO_VIRTUALIZE;
 
-  const tableRef = React.useRef<HTMLTableElement | null>(null);
-
-  // Why use a ref to set max-height on the wrapper?
-  // - position: sticky only works when the sticky element's nearest scrollable
-  //   ancestor is its immediate container. If max-height/overflow are applied
-  //   on a grandparent, sticky table headers (th) will not stick.
-  // - We keep the scroll wrapper colocated with the base Table component, but
-  //   derive the scroll boundary from maxHeight here to avoid coupling UI base
-  //   components to data-table specifics or expanding their API surface.
-  // - Setting styles on the table's direct wrapper ensures the header sticks
-  //   reliably across browsers without changing upstream components.
-  React.useEffect(() => {
-    if (!tableRef.current) {
-      return;
-    }
-    const wrapper = tableRef.current.parentElement as HTMLDivElement | null;
-    if (!wrapper) {
-      return;
-    }
-    if (maxHeight) {
-      wrapper.style.maxHeight = `${maxHeight}px`;
-      // Ensure wrapper scrolls
-      if (!wrapper.style.overflow) {
-        wrapper.style.overflow = "auto";
-      }
-    } else {
-      wrapper.style.removeProperty("max-height");
-    }
-  }, [maxHeight]);
+  const tableRef = useScrollContainerHeight({ maxHeight, virtualize });
 
   return (
     <div className={cn(wrapperClassName, "flex flex-col space-y-1")}>
@@ -317,13 +295,14 @@ const DataTableInternal = <TData,>({
             {showLoadingBar && (
               <thead className="absolute top-0 left-0 h-[3px] w-1/2 bg-primary animate-slide" />
             )}
-            {renderTableHeader(table, Boolean(maxHeight))}
+            {renderTableHeader(table, virtualize || Boolean(maxHeight))}
             <DataTableBody
               table={table}
               columns={columns}
               rowViewerPanelOpen={rowViewerPanelOpen}
               getRowIndex={getPaginatedRowIndex}
               viewedRowIdx={viewedRowIdx}
+              virtualize={virtualize}
             />
           </Table>
         </div>

package/src/components/data-table/hooks/use-scroll-container-height.ts

@@ -0,0 +1,97 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useEffect, useLayoutEffect, useRef } from "react";
+import {
+  DEFAULT_VIRTUAL_ROWS,
+  TABLE_HEADER_HEIGHT_PX,
+  TABLE_ROW_HEIGHT_PX,
+} from "../types";
+
+/**
+ * Manages the scroll container's max-height for the data table.
+ *
+ * Why set max-height on the table's direct wrapper via a ref?
+ * - `position: sticky` only works when the sticky element's nearest scrollable
+ *   ancestor is its immediate container. If max-height/overflow are applied on
+ *   a grandparent, sticky `<th>` elements will not stick.
+ * - The <Table> UI component wraps <table> in a div with overflow-auto. We
+ *   derive the scroll boundary from this wrapper (tableRef.parentElement) to
+ *   keep sticky headers working without coupling base UI components to
+ *   data-table specifics or expanding their API surface.
+ *
+ * 3 scenarios:
+ * - maxHeight applied directly. This always takes preference
+ * - Virtualize without maxHeight: observed via ResizeObserver on <thead>
+ *   so the container reacts to header size changes (charts loading, toggles).
+ * - No maxHeight and no virtualization: render everything
+ *   in practice virtualization kicks in after 100 rows with pagination disabled
+ */
+export function useScrollContainerHeight({
+  maxHeight,
+  virtualize,
+}: {
+  maxHeight?: number;
+  virtualize: boolean;
+}) {
+  const tableRef = useRef<HTMLTableElement | null>(null);
+
+  // Handle explicit maxHeight and non-virtualize cases synchronously
+  // before paint to avoid flickering.
+  useLayoutEffect(() => {
+    if (!tableRef.current) {
+      return;
+    }
+    const wrapper = tableRef.current.parentElement as HTMLDivElement | null;
+    if (!wrapper) {
+      return;
+    }
+    if (maxHeight) {
+      wrapper.style.maxHeight = `${maxHeight}px`;
+      if (!wrapper.style.overflow) {
+        wrapper.style.overflow = "auto";
+      }
+    } else if (!virtualize) {
+      wrapper.style.removeProperty("max-height");
+    }
+    // When virtualizing without an explicit maxHeight, the ResizeObserver
+    // below handles setting maxHeight reactively based on actual header size.
+  }, [maxHeight, virtualize]);
+
+  // When virtualizing without an explicit maxHeight, observe the <thead> for
+  // size changes (column summaries, charts loading async, header toggle) and
+  // recompute the scroll container height accordingly.
+  useEffect(() => {
+    if (!virtualize || maxHeight) {
+      return;
+    }
+    const table = tableRef.current;
+    if (!table) {
+      return;
+    }
+    const wrapper = table.parentElement as HTMLDivElement | null;
+    const thead = table.querySelector("thead");
+    if (!wrapper || !thead) {
+      return;
+    }
+    const updateMaxHeight = () => {
+      const headerHeight =
+        thead.getBoundingClientRect().height || TABLE_HEADER_HEIGHT_PX;
+      // Skip virtual spacer rows — they have arbitrary heights for scroll offset.
+      const firstDataRow = table.querySelector(
+        "tbody tr:not([data-virtual-spacer])",
+      );
+      const rowHeight =
+        firstDataRow?.getBoundingClientRect().height || TABLE_ROW_HEIGHT_PX;
+      wrapper.style.maxHeight = `${DEFAULT_VIRTUAL_ROWS * rowHeight + headerHeight}px`;
+    };
+
+    // Set initial height
+    updateMaxHeight();
+
+    const observer = new ResizeObserver(updateMaxHeight);
+    observer.observe(thead);
+    return () => observer.disconnect();
+  }, [virtualize, maxHeight]);
+
+  return tableRef;
+}