@marimo-team/islands 0.21.2-dev8 → 0.21.2-dev81

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

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

@@ -20,7 +20,8 @@ describe("getCellValues", () => {
   it("should return empty string for empty selection", () => {
     const mockTable = createMockTable([], []);
     const result = getCellValues(mockTable, new Set());
-    expect(result).toBe("");
+    expect(result.text).toBe("");
+    expect(result.html).toBeUndefined();
   });
 
   it("should ignore select checkbox in tables", () => {
@@ -29,7 +30,8 @@ describe("getCellValues", () => {
     const table = createMockTable([row], []);
 
     const result = getCellValues(table, new Set());
-    expect(result).toBe("");
+    expect(result.text).toBe("");
+    expect(result.html).toBeUndefined();
   });
 
   it("should return single cell value", () => {
@@ -38,7 +40,8 @@ describe("getCellValues", () => {
     const table = createMockTable([row], []);
 
     const result = getCellValues(table, new Set(["0_0"]));
-    expect(result).toBe("test");
+    expect(result.text).toBe("test");
+    expect(result.html).toBeUndefined();
   });
 
   it("should return multiple cells from same row separated by tabs", () => {
@@ -48,7 +51,8 @@ describe("getCellValues", () => {
     const table = createMockTable([row], []);
 
     const result = getCellValues(table, new Set(["0_0", "0_1"]));
-    expect(result).toBe("value1\tvalue2");
+    expect(result.text).toBe("value1\tvalue2");
+    expect(result.html).toBeUndefined();
   });
 
   it("should return multiple rows separated by newlines", () => {
@@ -59,7 +63,8 @@ describe("getCellValues", () => {
     const table = createMockTable([row1, row2], []);
 
     const result = getCellValues(table, new Set(["0_0", "1_0"]));
-    expect(result).toBe("row1\nrow2");
+    expect(result.text).toBe("row1\nrow2");
+    expect(result.html).toBeUndefined();
   });
 
   it("should handle missing rows gracefully", () => {
@@ -69,7 +74,7 @@ describe("getCellValues", () => {
 
     // Row "999" doesn't exist and is skipped
     const result = getCellValues(table, new Set(["0_0", "999_0"]));
-    expect(result).toBe("test");
+    expect(result.text).toBe("test");
   });
 
   it("should include undefined for missing columns on existing rows", () => {
@@ -80,7 +85,7 @@ describe("getCellValues", () => {
 
     // Column "999" doesn't exist but row.getValue() returns undefined
     const result = getCellValues(table, new Set(["0_0", "0_1", "0_999"]));
-    expect(result).toBe("test1\ttest2\tundefined");
+    expect(result.text).toBe("test1\ttest2\tundefined");
   });
 
   it("should handle complex data types", () => {
@@ -91,7 +96,76 @@ describe("getCellValues", () => {
     const table = createMockTable([row], []);
 
     const result = getCellValues(table, new Set(["0_0", "0_1", "0_2"]));
-    expect(result).toBe('{"name":"test"}\tnull\tundefined');
+    expect(result.text).toBe('{"name":"test"}\tnull\tundefined');
+    expect(result.html).toBeUndefined();
+  });
+
+  it("should use raw values when rawData is available", () => {
+    const mimeBundle = {
+      _serialized_mime_bundle: {
+        mimetype: "text/html",
+        data: "<b>formatted_42</b>",
+      },
+    };
+    const cell1 = createMockCell("0_a", mimeBundle);
+    const cell2 = createMockCell("0_b", "displayed_b");
+    const row = createMockRow("0", [cell1, cell2]);
+    const table = createMockTable([row], [], {
+      rawData: [{ a: 42, b: "raw_b" }],
+    });
+
+    const result = getCellValues(table, new Set(["0_a", "0_b"]));
+    expect(result.text).toBe("42\traw_b");
+    expect(result.html).toBe(
+      "<table><tr><td><b>formatted_42</b></td><td>raw_b</td></tr></table>",
+    );
+  });
+
+  it("should fall back to displayed value when rawData is not set", () => {
+    const cell = createMockCell("0_name", "displayed");
+    const row = createMockRow("0", [cell]);
+    const table = createMockTable([row], []);
+
+    const result = getCellValues(table, new Set(["0_name"]));
+    expect(result.text).toBe("displayed");
+    expect(result.html).toBeUndefined();
+  });
+
+  it("should return html table when cells contain mime bundles", () => {
+    const mimeBundle = {
+      _serialized_mime_bundle: {
+        mimetype: "text/html",
+        data: '<a href="https://example.com">link</a>',
+      },
+    };
+    const cell1 = createMockCell("0_url", mimeBundle);
+    const cell2 = createMockCell("0_name", "plain text");
+    const row = createMockRow("0", [cell1, cell2]);
+    const table = createMockTable([row], []);
+
+    const result = getCellValues(table, new Set(["0_url", "0_name"]));
+    expect(result.text).toBe("link\tplain text");
+    expect(result.html).toBe(
+      '<table><tr><td><a href="https://example.com">link</a></td><td>plain text</td></tr></table>',
+    );
+  });
+
+  it("should escape html entities in non-mime cells within html table", () => {
+    const mimeBundle = {
+      _serialized_mime_bundle: {
+        mimetype: "text/html",
+        data: "<b>bold</b>",
+      },
+    };
+    const cell1 = createMockCell("0_html", mimeBundle);
+    const cell2 = createMockCell("0_text", "a < b & c > d");
+    const row = createMockRow("0", [cell1, cell2]);
+    const table = createMockTable([row], []);
+
+    const result = getCellValues(table, new Set(["0_html", "0_text"]));
+    expect(result.html).toBe(
+      "<table><tr><td><b>bold</b></td><td>a &lt; b &amp; c &gt; d</td></tr></table>",
+    );
   });
 });
 

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

@@ -167,8 +167,8 @@ const {
       return state;
     }
 
-    const text = getCellValues(table, state.selectedCells);
-    copyToClipboard(text);
+    const { text, html } = getCellValues(table, state.selectedCells);
+    copyToClipboard(text, html);
     onCopyComplete();
 
     return {

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

@@ -91,6 +91,10 @@ export const useCellRangeSelection = <TData>({
         return;
       }
 
+      if (isInteractiveTarget(e)) {
+        return;
+      }
+
       actions.handleCellMouseDown({
         cell,
         isShiftKey: e.shiftKey,
@@ -122,3 +126,18 @@ export const useCellRangeSelection = <TData>({
     clearSelection: actions.clearSelection,
   };
 };
+
+const INTERACTIVE_SELECTOR =
+  'input, button, select, textarea, a, label, [role="checkbox"], [role="button"], [contenteditable="true"], marimo-ui-element';
+
+/**
+ * Skip cell selection when the click target is inside an interactive element
+ * (e.g. a checkbox or button rendered as rich cell content).
+ */
+export function isInteractiveTarget(e: React.MouseEvent): boolean {
+  const target = e.target;
+  if (target === e.currentTarget || !(target instanceof Element)) {
+    return false;
+  }
+  return target.closest(INTERACTIVE_SELECTOR) !== null;
+}

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

@@ -2,17 +2,25 @@
 
 import type { Table } from "@tanstack/react-table";
 import { SELECT_COLUMN_ID } from "../types";
-import { stringifyUnknownValue } from "../utils";
+import { getClipboardContent, getRawValue } from "../utils";
 import type { SelectedCell } from "./atoms";
 
+export interface CellValuesResult {
+  text: string;
+  html: string | undefined;
+}
+
 /**
- * Get the values of the selected cells.
+ * Get the values of the selected cells, preferring raw (unformatted) values
+ * for plain text. If any cell contains HTML (e.g. a hyperlink), also builds
+ * an HTML table so rich content can be preserved on paste.
  */
 export function getCellValues<TData>(
   table: Table<TData>,
   selectedCellIds: Set<string>,
-): string {
-  const rowValues = new Map<string, string[]>();
+): CellValuesResult {
+  const rows = new Map<string, { text: string; html?: string }[]>();
+  let hasHtml = false;
 
   for (const cellId of selectedCellIds) {
     if (cellId.includes(SELECT_COLUMN_ID)) {
@@ -26,17 +34,46 @@ export function getCellValues<TData>(
       continue;
     }
 
-    const cellValue = row.getValue(columnId);
-    const values = rowValues.get(rowId) ?? [];
-    values.push(stringifyUnknownValue({ value: cellValue }));
-    rowValues.set(rowId, values);
+    const rawValue = getRawValue(table, row.index, columnId);
+    const { text, html } = getClipboardContent(
+      rawValue,
+      row.getValue(columnId),
+    );
+
+    if (html) {
+      hasHtml = true;
+    }
+    const cells = rows.get(rowId) ?? [];
+    cells.push({ text, html });
+    rows.set(rowId, cells);
+  }
+
+  const rowValues = [...rows.values()];
+  const tabSeparatedText = rowValues
+    .map((cells) => cells.map((c) => c.text).join("\t"))
+    .join("\n");
+
+  let htmlTable: string | undefined;
+  if (hasHtml) {
+    const htmlTableRows = rowValues
+      .map(
+        (cells) =>
+          `<tr>${cells.map((c) => `<td>${c.html ?? escapeHtml(c.text)}</td>`).join("")}</tr>`,
+      )
+      .join("");
+    htmlTable = `<table>${htmlTableRows}</table>`;
   }
 
-  return getTabSeparatedValues([...rowValues.values()]);
+  return {
+    text: tabSeparatedText,
+    html: htmlTable,
+  };
 }
 
-export function getTabSeparatedValues(values: string[][]) {
-  return values.map((row) => row.join("\t")).join("\n");
+function escapeHtml(str: string): string {
+  const div = document.createElement("div");
+  div.textContent = str;
+  return div.innerHTML;
 }
 
 /**
@@ -74,7 +111,8 @@ export function getNumericValuesFromSelectedCells<TData>(
       continue;
     }
 
-    const value = row.getValue(columnId);
+    const value =
+      getRawValue(table, row.index, columnId) ?? row.getValue(columnId);
 
     // Only accept numbers and strings
     // Skip booleans, null, etc.

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

@@ -11,7 +11,8 @@ import {
   type Table,
   type Table as TanStackTable,
 } from "@tanstack/react-table";
-import { type JSX, useRef } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { type JSX, useLayoutEffect, useRef, useState } from "react";
 import useEvent from "react-use-event-hook";
 import {
   TableBody,
@@ -27,6 +28,7 @@ import { DataTableContextMenu } from "./context-menu";
 import { CellRangeSelectionIndicator } from "./range-focus/cell-selection-indicator";
 import { useCellRangeSelection } from "./range-focus/use-cell-range-selection";
 import { useScrollIntoViewOnFocus } from "./range-focus/use-scroll-into-view";
+import { TABLE_ROW_HEIGHT_PX } from "./types";
 import { stringifyUnknownValue } from "./utils";
 
 export function renderTableHeader<TData>(
@@ -79,6 +81,7 @@ interface DataTableBodyProps<TData> {
   rowViewerPanelOpen: boolean;
   getRowIndex?: (row: TData, idx: number) => number;
   viewedRowIdx?: number;
+  virtualize?: boolean;
 }
 
 export const DataTableBody = <TData,>({
@@ -87,9 +90,30 @@ export const DataTableBody = <TData,>({
   rowViewerPanelOpen,
   getRowIndex,
   viewedRowIdx,
+  virtualize = false,
 }: DataTableBodyProps<TData>) => {
-  // Automatically scroll focused cells into view
+  const rows = table.getRowModel().rows;
+
+  // Find the scroll container (tbody -> table -> overflow-auto wrapper div).
+  // Using useState so that when the element becomes available after mount,
+  // useVirtualizer re-observes the correct element.
+  const [scrollElement, setScrollElement] = useState<HTMLElement | null>(null);
   const tableRef = useRef<HTMLTableSectionElement>(null);
+  useLayoutEffect(() => {
+    // tbody.parentElement = table, table.parentElement = overflow wrapper
+    setScrollElement(tableRef.current?.parentElement?.parentElement ?? null);
+  }, []);
+
+  // Always call useVirtualizer (rules of hooks); count=0 when not virtualizing
+  const virtualizer = useVirtualizer({
+    count: virtualize ? rows.length : 0,
+    getScrollElement: () => scrollElement,
+    estimateSize: () => TABLE_ROW_HEIGHT_PX,
+    overscan: 10,
+  });
+
+  // Automatically scroll focused cells into view.
+  // In virtual mode, off-screen cells won't be in the DOM so this silently no-ops for them.
   useScrollIntoViewOnFocus(tableRef);
 
   const {
@@ -172,57 +196,90 @@ export const DataTableBody = <TData,>({
 
   const hoverTemplate = table.getState().cellHoverTemplate || null;
 
-  const tableBody = (
-    <TableBody onKeyDown={handleCellsKeyDown} ref={tableRef}>
-      {table.getRowModel().rows?.length ? (
-        table.getRowModel().rows.map((row) => {
-          // Only find the row index if the row viewer panel is open
-          const rowIndex = rowViewerPanelOpen
-            ? (getRowIndex?.(row.original, row.index) ?? row.index)
-            : undefined;
-          const isRowViewedInPanel =
-            rowViewerPanelOpen && viewedRowIdx === rowIndex;
+  const renderRow = (row: Row<TData>) => {
+    // Only find the row index if the row viewer panel is open
+    const rowIndex = rowViewerPanelOpen
+      ? (getRowIndex?.(row.original, row.index) ?? row.index)
+      : undefined;
+    const isRowViewedInPanel = rowViewerPanelOpen && viewedRowIdx === rowIndex;
+
+    // Compute hover title once per row using all visible cells
+    let rowTitle: string | undefined;
+    if (hoverTemplate) {
+      const visibleCells = row.getVisibleCells?.() ?? [
+        ...row.getLeftVisibleCells(),
+        ...row.getCenterVisibleCells(),
+        ...row.getRightVisibleCells(),
+      ];
+      rowTitle = applyHoverTemplate(hoverTemplate, visibleCells);
+    }
 
-          // Compute hover title once per row using all visible cells
-          let rowTitle: string | undefined;
-          if (hoverTemplate) {
-            const visibleCells = row.getVisibleCells?.() ?? [
-              ...row.getLeftVisibleCells(),
-              ...row.getCenterVisibleCells(),
-              ...row.getRightVisibleCells(),
-            ];
-            rowTitle = hoverTemplate
-              ? applyHoverTemplate(hoverTemplate, visibleCells)
-              : undefined;
-          }
+    return (
+      <TableRow
+        key={row.id}
+        data-state={row.getIsSelected() && "selected"}
+        title={rowTitle}
+        // These classes ensure that empty rows (nulls) still render
+        className={cn(
+          "border-t h-6",
+          rowViewerPanelOpen && "cursor-pointer",
+          isRowViewedInPanel &&
+            "bg-(--blue-3) hover:bg-(--blue-3) data-[state=selected]:bg-(--blue-4)",
+        )}
+        onClick={() => handleRowClick(row)}
+      >
+        {renderCells(row.getLeftVisibleCells())}
+        {renderCells(row.getCenterVisibleCells())}
+        {renderCells(row.getRightVisibleCells())}
+      </TableRow>
+    );
+  };
 
-          return (
-            <TableRow
-              key={row.id}
-              data-state={row.getIsSelected() && "selected"}
-              title={rowTitle}
-              // These classes ensure that empty rows (nulls) still render
-              className={cn(
-                "border-t h-6",
-                rowViewerPanelOpen && "cursor-pointer",
-                isRowViewedInPanel &&
-                  "bg-(--blue-3) hover:bg-(--blue-3) data-[state=selected]:bg-(--blue-4)",
-              )}
-              onClick={() => handleRowClick(row)}
-            >
-              {renderCells(row.getLeftVisibleCells())}
-              {renderCells(row.getCenterVisibleCells())}
-              {renderCells(row.getRightVisibleCells())}
-            </TableRow>
-          );
-        })
-      ) : (
+  const renderRows = () => {
+    if (rows.length === 0) {
+      return (
         <TableRow>
           <TableCell colSpan={columns.length} className="h-24 text-center">
             No results.
           </TableCell>
         </TableRow>
-      )}
+      );
+    }
+
+    if (virtualize) {
+      const virtualItems = virtualizer.getVirtualItems();
+      const totalSize = virtualizer.getTotalSize();
+      return (
+        <>
+          {virtualItems[0]?.start > 0 && (
+            <tr
+              data-virtual-spacer=""
+              style={{ height: virtualItems[0].start }}
+            >
+              <td colSpan={columns.length} />
+            </tr>
+          )}
+          {virtualItems.map((vItem) => renderRow(rows[vItem.index]))}
+          {virtualItems.length > 0 && (
+            <tr
+              data-virtual-spacer=""
+              style={{
+                height: totalSize - (virtualItems.at(-1)?.end ?? totalSize),
+              }}
+            >
+              <td colSpan={columns.length} />
+            </tr>
+          )}
+        </>
+      );
+    }
+
+    return rows.map((row) => renderRow(row));
+  };
+
+  const tableBody = (
+    <TableBody onKeyDown={handleCellsKeyDown} ref={tableRef}>
+      {renderRows()}
     </TableBody>
   );
 

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

@@ -1,8 +1,29 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import type { RowData } from "@tanstack/react-table";
 import type { DataType } from "@/core/kernel/messages";
 import { Objects } from "@/utils/objects";
 
+declare module "@tanstack/react-table" {
+  interface TableMeta<TData extends RowData> {
+    rawData?: TData[]; // raw data for filtering/copying (present only if format_mapping is provided)
+  }
+}
+
+// Pixel heights derived from Tailwind classes applied to table elements.
+// row: h-6 = 24px (TableRow in renderers.tsx)
+// header: min-h-10 = 40px (TableHead in renderers.tsx)
+export const TABLE_ROW_HEIGHT_PX = 24;
+export const TABLE_HEADER_HEIGHT_PX = 40;
+
+// Default number of visible rows when virtualizing without an explicit maxHeight.
+export const DEFAULT_VIRTUAL_ROWS = 15;
+
+// Minimum row count before virtualization kicks in. Below this threshold the
+// DOM overhead is negligible and the virtualizer's measurement cost isn't
+// worth it. Must be greater than DEFAULT_VIRTUAL_ROWS.
+export const MIN_ROWS_TO_VIRTUALIZE = 100;
+
 export type ColumnName = string;
 
 export const ColumnHeaderStatsKeys = [