@marimo-team/frontend 0.21.2-dev1 → 0.21.2-dev101

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

@@ -24,7 +24,10 @@ import { useLocale } from "react-aria";
 import { Table } from "@/components/ui/table";
 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";
+import {
+  PANEL_TYPES,
+  type PanelType,
+} from "../editor/chrome/panels/context-aware-panel/context-aware-panel";
 import { CellHoverTemplateFeature } from "./cell-hover-template/feature";
 import { CellHoverTextFeature } from "./cell-hover-text/feature";
 import { CellSelectionFeature } from "./cell-selection/feature";
@@ -38,12 +41,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> {
@@ -52,6 +60,7 @@ interface DataTableProps<TData> extends Partial<DownloadActionProps> {
   maxHeight?: number;
   columns: ColumnDef<TData>[];
   data: TData[];
+  rawData?: TData[]; // raw data for filtering/copying (present only if format_mapping is provided)
   // Sorting
   manualSorting?: boolean; // server-side sorting
   sorting?: SortingState; // controlled sorting
@@ -91,10 +100,10 @@ interface DataTableProps<TData> extends Partial<DownloadActionProps> {
   // Others
   showChartBuilder?: boolean;
   showPageSizeSelector?: boolean;
-  showColumnExplorer?: boolean;
-  showRowExplorer?: boolean;
+  showTableExplorer?: boolean;
   togglePanel?: (panelType: PanelType) => void;
   isPanelOpen?: (panelType: PanelType) => boolean;
+  isAnyPanelOpen?: boolean;
 }
 
 const DataTableInternal = <TData,>({
@@ -103,6 +112,7 @@ const DataTableInternal = <TData,>({
   maxHeight,
   columns,
   data,
+  rawData,
   selection,
   totalColumns,
   totalRows,
@@ -117,7 +127,6 @@ const DataTableInternal = <TData,>({
   paginationState,
   setPaginationState,
   downloadAs,
-  downloadFileName,
   manualPagination = false,
   pagination = false,
   onRowSelectionChange,
@@ -135,10 +144,10 @@ const DataTableInternal = <TData,>({
   toggleDisplayHeader,
   showChartBuilder,
   showPageSizeSelector,
-  showColumnExplorer,
-  showRowExplorer,
+  showTableExplorer,
   togglePanel,
   isPanelOpen,
+  isAnyPanelOpen,
   viewedRowIdx,
   onViewedRowChange,
 }: DataTableProps<TData>) => {
@@ -197,6 +206,7 @@ const DataTableInternal = <TData,>({
     ],
     data,
     columns,
+    meta: { rawData },
     getCoreRowModel: getCoreRowModel(),
     // pagination
     rowCount: totalRows === "too_many" ? undefined : totalRows,
@@ -264,37 +274,10 @@ const DataTableInternal = <TData,>({
     },
   });
 
-  const rowViewerPanelOpen = isPanelOpen?.("row-viewer") ?? false;
-
-  const tableRef = React.useRef<HTMLTableElement | null>(null);
+  const rowViewerPanelOpen = isPanelOpen?.(PANEL_TYPES.ROW_VIEWER) ?? false;
+  const virtualize = !pagination && data.length > MIN_ROWS_TO_VIRTUALIZE;
 
-  // 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")}>
@@ -314,13 +297,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>
@@ -337,15 +321,13 @@ const DataTableInternal = <TData,>({
         onRowSelectionChange={onRowSelectionChange}
         table={table}
         downloadAs={downloadAs}
-        downloadFileName={downloadFileName}
         getRowIds={getRowIds}
         toggleDisplayHeader={toggleDisplayHeader}
         showChartBuilder={showChartBuilder}
         showPageSizeSelector={showPageSizeSelector}
-        showColumnExplorer={showColumnExplorer}
-        showRowExplorer={showRowExplorer}
+        showTableExplorer={showTableExplorer}
         togglePanel={togglePanel}
-        isPanelOpen={isPanelOpen}
+        isAnyPanelOpen={isAnyPanelOpen}
         tableLoading={reloading}
       />
     </div>

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

@@ -14,7 +14,6 @@ import { logNever } from "@/utils/assertNever";
 import { copyToClipboard } from "@/utils/copy";
 import { downloadByURL } from "@/utils/download";
 import { prettyError } from "@/utils/errors";
-import { Filenames } from "@/utils/filenames";
 import {
   jsonParseWithSpecialChar,
   jsonToMarkdown,
@@ -36,8 +35,9 @@ import { toast } from "../ui/use-toast";
 type DownloadFormat = "csv" | "json" | "parquet";
 
 export interface DownloadActionProps {
-  downloadAs: (req: { format: DownloadFormat }) => Promise<string>;
-  downloadFileName?: string;
+  downloadAs: (req: {
+    format: DownloadFormat;
+  }) => Promise<{ url: string; filename: string }>;
 }
 
 const options = [
@@ -99,7 +99,9 @@ export const DownloadAs: React.FC<DownloadActionProps> = (props) => {
     </Button>
   );
 
-  const getDownloadUrl = (format: DownloadFormat) => {
+  const getDownloadResponse = (
+    format: DownloadFormat,
+  ): Promise<{ url: string; filename: string }> => {
     return props.downloadAs({ format }).catch((error) => {
       toast({
         title: "Failed to download",
@@ -116,26 +118,26 @@ export const DownloadAs: React.FC<DownloadActionProps> = (props) => {
 
     switch (format) {
       case "tsv": {
-        const downloadUrl = await getDownloadUrl("json");
-        const json = await fetchJson(downloadUrl);
+        const { url } = await getDownloadResponse("json");
+        const json = await fetchJson(url);
         text = jsonToTSV(json, locale);
         break;
       }
       case "json": {
-        const downloadUrl = await getDownloadUrl("json");
-        const json = await fetchJson(downloadUrl);
+        const { url } = await getDownloadResponse("json");
+        const json = await fetchJson(url);
         text = JSON.stringify(json, null, 2);
         break;
       }
       case "csv": {
-        const downloadUrl = await getDownloadUrl("csv");
-        const csv = await fetchText(downloadUrl);
+        const { url } = await getDownloadResponse("csv");
+        const csv = await fetchText(url);
         text = csv;
         break;
       }
       case "markdown": {
-        const downloadUrl = await getDownloadUrl("json");
-        const json = await fetchJson(downloadUrl);
+        const { url } = await getDownloadResponse("json");
+        const json = await fetchJson(url);
         text = jsonToMarkdown(json);
         break;
       }
@@ -158,12 +160,10 @@ export const DownloadAs: React.FC<DownloadActionProps> = (props) => {
           <DropdownMenuItem
             key={option.label}
             onSelect={async () => {
-              const downloadUrl = await getDownloadUrl(option.format);
-              const ext = option.format;
-              const rawName = (props.downloadFileName ?? "").trim();
-              const baseName =
-                Filenames.withoutExtension(rawName) || "download";
-              downloadByURL(downloadUrl, `${baseName}.${ext}`);
+              const { url, filename } = await getDownloadResponse(
+                option.format,
+              );
+              downloadByURL(url, filename);
             }}
           >
             <option.icon className="mo-dropdown-icon" />

package/src/components/data-table/filters.ts

@@ -16,6 +16,7 @@ declare module "@tanstack/react-table" {
     dtype?: string;
     dataType?: DataType;
     filterType?: FilterType;
+    minFractionDigits?: number;
   }
 }
 

package/src/components/data-table/hooks/use-column-pinning.ts

@@ -2,7 +2,7 @@
 "use no memo";
 
 import type { ColumnPinningState } from "@tanstack/react-table";
-import { isEqual } from "lodash-es";
+import { dequal as isEqual } from "dequal";
 import React from "react";
 import { useInternalStateWithSync } from "@/hooks/useInternalStateWithSync";
 import { SELECT_COLUMN_ID } from "../types";

package/src/components/data-table/hooks/use-panel-ownership.ts

@@ -13,7 +13,10 @@ import { Logger } from "@/utils/Logger";
 
 interface PanelOwnershipResult {
   isPanelOpen: (panelType: PanelType) => boolean;
-  togglePanel: (panelType: PanelType) => void;
+  isAnyPanelOpen: boolean;
+  togglePanel: (panelType?: PanelType) => void;
+  panelType: PanelType | null;
+  setPanelType: (panelType: PanelType) => void;
 }
 
 export function usePanelOwnership(
@@ -55,24 +58,31 @@ export function usePanelOwnership(
     setPanelOwner(panelId);
   }
 
-  function togglePanel(panelType: PanelType) {
-    if (isPanelOpen(panelType)) {
+  const isAnyPanelOpen = panelOwner === panelId && isContextAwarePanelOpen;
+
+  function togglePanel(requestedType?: PanelType) {
+    if (isAnyPanelOpen) {
       setPanelOwner(null);
       setContextAwarePanelOpen(false);
     } else {
       setPanelOwner(panelId);
-      // if cell-aware, we want to focus on this cell when toggled open
       if (isPanelCellAware && cellId) {
         focusCell({ cellId });
       }
       setContextAwarePanelOpen(true);
-      setPanelType(panelType);
+      // Only set type if explicitly requested and no previous type exists
+      if (requestedType && !panelType) {
+        setPanelType(requestedType);
+      }
     }
   }
 
   return {
     isPanelOpen,
+    isAnyPanelOpen,
     togglePanel,
+    panelType,
+    setPanelType,
   };
 }
 

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;
+}

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

@@ -2,7 +2,6 @@
 "use no memo";
 
 import type { Table } from "@tanstack/react-table";
-import { range } from "lodash-es";
 import {
   ChevronDown,
   ChevronLeft,
@@ -22,6 +21,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
+import { range } from "@/utils/arrays";
 import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
 import { prettyNumber } from "@/utils/numbers";

package/src/components/data-table/range-focus/__tests__/atoms.test.ts

@@ -403,7 +403,10 @@ describe("cell selection atoms", () => {
     beforeEach(() => {
       // Reset mocks before each test
       vi.mocked(getCellValues).mockClear();
-      vi.mocked(getCellValues).mockReturnValue("mocked cell values");
+      vi.mocked(getCellValues).mockReturnValue({
+        text: "mocked cell values",
+        html: undefined,
+      });
     });
 
     afterEach(() => {
@@ -424,7 +427,10 @@ describe("cell selection atoms", () => {
       });
 
       expect(getCellValues).toHaveBeenCalledWith(mockTable, selectedCells);
-      expect(copyToClipboard).toHaveBeenCalledWith("mocked cell values");
+      expect(copyToClipboard).toHaveBeenCalledWith(
+        "mocked cell values",
+        undefined,
+      );
       expect(onCopyComplete).toHaveBeenCalledWith();
       expect(state.copiedCells).toEqual(selectedCells);
     });

package/src/components/data-table/range-focus/__tests__/test-utils.ts

@@ -56,12 +56,14 @@ export function createMockRow(
 export function createMockTable(
   rows: Row<unknown>[],
   columns: Column<unknown>[],
+  opts?: { rawData?: unknown[] },
 ): Table<unknown> {
   return {
     getRow: (id: string) => rows.find((row) => row.id === id),
     getRowModel: () => ({ rows }),
     getColumn: (columnId: string) => columns.find((col) => col.id === columnId),
     getAllColumns: () => columns,
+    options: { meta: { rawData: opts?.rawData } },
   } as unknown as Table<unknown>;
 }
 

package/src/components/data-table/range-focus/__tests__/use-cell-range-selection.test.ts

@@ -0,0 +1,119 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { isInteractiveTarget } from "../use-cell-range-selection";
+
+function createMouseEvent(
+  target: HTMLElement,
+  currentTarget: HTMLElement,
+): React.MouseEvent {
+  return { target, currentTarget } as unknown as React.MouseEvent;
+}
+
+describe("isInteractiveTarget", () => {
+  it("returns false when target is the cell itself", () => {
+    const cell = document.createElement("td");
+    expect(isInteractiveTarget(createMouseEvent(cell, cell))).toBe(false);
+  });
+
+  it("returns false when clicking plain text inside a cell", () => {
+    const cell = document.createElement("td");
+    const span = document.createElement("span");
+    cell.append(span);
+    expect(isInteractiveTarget(createMouseEvent(span, cell))).toBe(false);
+  });
+
+  it.each([
+    "input",
+    "button",
+    "select",
+    "textarea",
+  ])("returns true when clicking a <%s>", (tag) => {
+    const cell = document.createElement("td");
+    const el = document.createElement(tag);
+    cell.append(el);
+    expect(isInteractiveTarget(createMouseEvent(el, cell))).toBe(true);
+  });
+
+  it("returns true when clicking an <a> link", () => {
+    const cell = document.createElement("td");
+    const a = document.createElement("a");
+    a.href = "#";
+    cell.append(a);
+    expect(isInteractiveTarget(createMouseEvent(a, cell))).toBe(true);
+  });
+
+  it("returns true when clicking a <label>", () => {
+    const cell = document.createElement("td");
+    const label = document.createElement("label");
+    cell.append(label);
+    expect(isInteractiveTarget(createMouseEvent(label, cell))).toBe(true);
+  });
+
+  it('returns true for element with role="checkbox"', () => {
+    const cell = document.createElement("td");
+    const div = document.createElement("div");
+    div.setAttribute("role", "checkbox");
+    cell.append(div);
+    expect(isInteractiveTarget(createMouseEvent(div, cell))).toBe(true);
+  });
+
+  it('returns true for element with role="button"', () => {
+    const cell = document.createElement("td");
+    const div = document.createElement("div");
+    div.setAttribute("role", "button");
+    cell.append(div);
+    expect(isInteractiveTarget(createMouseEvent(div, cell))).toBe(true);
+  });
+
+  it('returns true for contenteditable="true"', () => {
+    const cell = document.createElement("td");
+    const div = document.createElement("div");
+    div.setAttribute("contenteditable", "true");
+    cell.append(div);
+    expect(isInteractiveTarget(createMouseEvent(div, cell))).toBe(true);
+  });
+
+  it("returns true when clicking a child nested inside an interactive element", () => {
+    const cell = document.createElement("td");
+    const button = document.createElement("button");
+    const icon = document.createElement("span");
+    button.append(icon);
+    cell.append(button);
+    expect(isInteractiveTarget(createMouseEvent(icon, cell))).toBe(true);
+  });
+
+  it("returns true when clicking inside a marimo-ui-element", () => {
+    const cell = document.createElement("td");
+    const marimoEl = document.createElement("marimo-ui-element");
+    const inner = document.createElement("div");
+    marimoEl.append(inner);
+    cell.append(marimoEl);
+    expect(isInteractiveTarget(createMouseEvent(inner, cell))).toBe(true);
+  });
+
+  it("returns true when clicking the marimo-ui-element itself", () => {
+    const cell = document.createElement("td");
+    const marimoEl = document.createElement("marimo-ui-element");
+    cell.append(marimoEl);
+    expect(isInteractiveTarget(createMouseEvent(marimoEl, cell))).toBe(true);
+  });
+
+  it("returns false when clicking a non-interactive div", () => {
+    const cell = document.createElement("td");
+    const wrapper = document.createElement("div");
+    const text = document.createElement("span");
+    wrapper.append(text);
+    cell.append(wrapper);
+    expect(isInteractiveTarget(createMouseEvent(text, cell))).toBe(false);
+  });
+
+  it("returns false when target is a non-Element (e.g. Text node)", () => {
+    const cell = document.createElement("td");
+    const textNode = document.createTextNode("hello");
+    cell.append(textNode);
+    expect(isInteractiveTarget(createMouseEvent(textNode as never, cell))).toBe(
+      false,
+    );
+  });
+});