@marimo-team/frontend 0.21.2-dev27 → 0.21.2-dev28

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/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/types.ts

@@ -1,8 +1,15 @@
 /* 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)
+  }
+}
+
 export type ColumnName = string;
 
 export const ColumnHeaderStatsKeys = [

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

@@ -1,8 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import type { Table } from "@tanstack/react-table";
 import type { TableData } from "@/plugins/impl/DataTablePlugin";
 import { vegaLoadData } from "@/plugins/impl/vega/loader";
 import { jsonParseWithSpecialChar } from "@/utils/json/json-parser";
+import { getMimeValues } from "./mime-cell";
 import { INDEX_COLUMN_NAME } from "./types";
 
 /**
@@ -32,6 +34,21 @@ export async function loadTableData<T = object>(
   return tableData;
 }
 
+/**
+ * Load both table and raw table data. Raw table data is typically when
+ * there is formatting applied to the table data.
+ */
+export async function loadTableAndRawData<T>(
+  tableData: TableData<T>,
+  rawTableData?: TableData<T> | null,
+): Promise<[T[], T[] | undefined]> {
+  if (rawTableData) {
+    return Promise.all([loadTableData(tableData), loadTableData(rawTableData)]);
+  }
+
+  return [await loadTableData(tableData), undefined];
+}
+
 /**
  * Get the stable row ID for a row.
  *
@@ -87,3 +104,73 @@ export function stringifyUnknownValue(opts: {
   }
   return String(value);
 }
+
+function stripHtml(html: string): string {
+  const div = document.createElement("div");
+  div.innerHTML = html;
+  const text = (div.textContent || div.innerText || "").trim();
+  return text || html;
+}
+
+const HTML_MIMETYPES = new Set(["text/html", "text/markdown"]);
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+
+/**
+ * Get clipboard-ready text and optional HTML for a cell.
+ *
+ * @param rawValue - The raw (unformatted) value, or undefined if not available.
+ * @param displayedValue - The displayed value (may be a mime bundle).
+ */
+export function getClipboardContent(
+  rawValue: unknown,
+  displayedValue: unknown,
+): { text: string; html?: string } {
+  const mimeValues =
+    typeof displayedValue === "object" && displayedValue !== null
+      ? getMimeValues(displayedValue)
+      : undefined;
+
+  let html: string | undefined;
+  if (mimeValues) {
+    // text/markdown from mo.md() contains rendered HTML
+    const htmlParts = mimeValues
+      .filter((v) => HTML_MIMETYPES.has(v.mimetype))
+      .map((v) => v.data);
+    html = htmlParts.length > 0 ? htmlParts.join("") : undefined;
+  }
+
+  let text: string;
+  if (rawValue !== undefined && rawValue !== displayedValue) {
+    text = stringifyUnknownValue({ value: rawValue });
+  } else if (mimeValues) {
+    text = mimeValues
+      .map((v) => (HTML_MIMETYPES.has(v.mimetype) ? stripHtml(v.data) : v.data))
+      .join(", ");
+  } else {
+    text = stringifyUnknownValue({ value: displayedValue });
+  }
+
+  return { text, html };
+}
+
+/**
+ * Get the raw (unformatted) value for a row/column from the table,
+ * or undefined if raw data is not available.
+ */
+export function getRawValue<TData>(
+  table: Table<TData>,
+  rowIndex: number,
+  columnId: string,
+): unknown {
+  const rawData = table.options.meta?.rawData;
+  if (rawData) {
+    const rawRow = rawData[rowIndex];
+    if (isRecord(rawRow)) {
+      return rawRow[columnId];
+    }
+  }
+  return undefined;
+}

package/src/plugins/impl/DataTablePlugin.tsx

@@ -53,6 +53,7 @@ import {
 } from "@/components/data-table/types";
 import {
   getPageIndexForRow,
+  loadTableAndRawData,
   loadTableData,
 } from "@/components/data-table/utils";
 import { ErrorBoundary } from "@/components/editor/boundary/ErrorBoundary";
@@ -174,6 +175,7 @@ const valueCounts: z.ZodType<ValueCounts> = z.array(
 interface Data<T> {
   label: string | null;
   data: TableData<T>;
+  rawData?: TableData<T> | null;
   totalRows: number | TooManyRows;
   pagination: boolean;
   pageSize: number;
@@ -221,6 +223,7 @@ type DataTableFunctions = {
     total_rows: number | TooManyRows;
     cell_styles?: CellStyleState | null;
     cell_hover_texts?: Record<string, Record<string, string | null>> | null;
+    raw_data?: TableData<T> | null;
   }>;
   get_data_url?: GetDataUrl;
   get_row_ids?: GetRowIds;
@@ -243,6 +246,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
       ]),
       label: z.string().nullable(),
       data: z.union([z.string(), z.array(z.object({}).passthrough())]),
+      rawData: z.union([z.string(), z.array(z.looseObject({}))]).nullish(),
       totalRows: z.union([z.number(), z.literal(TOO_MANY_ROWS)]),
       pagination: z.boolean().default(false),
       pageSize: z.number().default(10),
@@ -327,6 +331,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
             )
             .nullable(),
           cell_hover_texts: cellHoverTextSchema.nullable(),
+          raw_data: z.union([z.string(), z.array(z.looseObject({}))]).nullish(),
         }),
       ),
     get_row_ids: rpc.input(z.object({}).passthrough()).output(
@@ -529,17 +534,23 @@ export const LoadingDataTableComponent = memo(
     // Data loading
     const { data, error, isPending, isFetching } = useAsyncData<{
       rows: T[];
+      rawRows?: T[];
       totalRows: number | TooManyRows;
       cellStyles: CellStyleState | undefined | null;
       cellHoverTexts?: Record<string, Record<string, string | null>> | null;
     }>(async () => {
       // If there is no data, return an empty array
       if (props.totalRows === 0) {
-        return { rows: Arrays.EMPTY, totalRows: 0, cellStyles: {} };
+        return {
+          rows: Arrays.EMPTY,
+          totalRows: 0,
+          cellStyles: {},
+        };
       }
 
       // Table data is a url string or an array of objects
       let tableData = props.data;
+      let rawTableData: TableData<T> | undefined | null = props.rawData;
       let totalRows = props.totalRows;
       let cellStyles = props.cellStyles;
       let cellHoverTexts = props.cellHoverTexts;
@@ -587,13 +598,19 @@ export const LoadingDataTableComponent = memo(
       } else {
         const searchResults = await searchResultsPromise;
         tableData = searchResults.data;
+        rawTableData = searchResults.raw_data;
         totalRows = searchResults.total_rows;
         cellStyles = searchResults.cell_styles || {};
         cellHoverTexts = searchResults.cell_hover_texts || {};
       }
-      tableData = await loadTableData(tableData);
+      const [data, rawData] = await loadTableAndRawData(
+        tableData,
+        rawTableData,
+      );
+      tableData = data;
       return {
         rows: tableData,
+        rawRows: rawData,
         totalRows: totalRows,
         cellStyles,
         cellHoverTexts,
@@ -715,6 +732,7 @@ export const LoadingDataTableComponent = memo(
       <DataTableComponent
         {...props}
         data={data?.rows ?? Arrays.EMPTY}
+        rawData={data?.rawRows}
         columnSummaries={columnSummaries}
         sorting={sorting}
         setSorting={setSorting}
@@ -766,6 +784,7 @@ LoadingDataTableComponent.displayName = "LoadingDataTableComponent";
 const DataTableComponent = ({
   label,
   data,
+  rawData,
   totalRows,
   maxColumns,
   pagination,
@@ -814,6 +833,7 @@ const DataTableComponent = ({
 }: DataTableProps<unknown> &
   DataTableSearchProps & {
     data: unknown[];
+    rawData?: unknown[];
     columnSummaries?: ColumnSummaries;
     getRow: (rowIdx: number) => Promise<GetRowResult>;
   }): JSX.Element => {
@@ -1015,6 +1035,7 @@ const DataTableComponent = ({
         <Labeled label={label} align="top" fullWidth={true}>
           <DataTable
             data={data}
+            rawData={rawData}
             columns={columns}
             className={className}
             maxHeight={maxHeight}

package/src/utils/copy.ts

@@ -2,21 +2,34 @@
 import { Logger } from "./Logger";
 
 /**
- * Tries to copy text to the clipboard using the navigator.clipboard API.
- * If that fails, it falls back to prompting the user to copy.
+ * Copy text to the clipboard. When `html` is provided, writes both
+ * text/html and text/plain so rich content (e.g. hyperlinks) is
+ * preserved when pasting into apps like Excel or Google Sheets.
  *
  * As of 2024-10-29, Safari does not support navigator.clipboard.writeText
  * when running localhost http.
  */
-export async function copyToClipboard(text: string) {
+export async function copyToClipboard(text: string, html?: string) {
   if (navigator.clipboard === undefined) {
     Logger.warn("navigator.clipboard is not supported");
     window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
     return;
   }
 
-  await navigator.clipboard.writeText(text).catch(async () => {
-    // Fallback to prompt
+  if (html && navigator.clipboard.write) {
+    try {
+      const item = new ClipboardItem({
+        "text/html": new Blob([html], { type: "text/html" }),
+        "text/plain": new Blob([text], { type: "text/plain" }),
+      });
+      await navigator.clipboard.write([item]);
+      return;
+    } catch {
+      Logger.warn("Failed to write rich text, falling back to plain text");
+    }
+  }
+
+  await navigator.clipboard.writeText(text).catch(() => {
     Logger.warn("Failed to copy to clipboard using navigator.clipboard");
     window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
   });