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

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/__tests__/utils.test.ts

@@ -1,7 +1,13 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import type { Table } from "@tanstack/react-table";
 import { describe, expect, it } from "vitest";
-import { getPageIndexForRow } from "../utils";
+import {
+  getClipboardContent,
+  getPageIndexForRow,
+  getRawValue,
+  stringifyUnknownValue,
+} from "../utils";
 
 describe("getPageIndexForRow", () => {
   it("should return null when row is on current page", () => {
@@ -77,3 +83,134 @@ describe("getPageIndexForRow", () => {
     expect(getPageIndexForRow(999, 100, 10)).toBe(99);
   });
 });
+
+describe("stringifyUnknownValue", () => {
+  it("should stringify primitives", () => {
+    expect(stringifyUnknownValue({ value: "hello" })).toBe("hello");
+    expect(stringifyUnknownValue({ value: 42 })).toBe("42");
+    expect(stringifyUnknownValue({ value: true })).toBe("true");
+    expect(stringifyUnknownValue({ value: null })).toBe("null");
+    expect(stringifyUnknownValue({ value: undefined })).toBe("undefined");
+  });
+
+  it("should stringify null as empty string when flag is set", () => {
+    expect(
+      stringifyUnknownValue({ value: null, nullAsEmptyString: true }),
+    ).toBe("");
+  });
+
+  it("should JSON-stringify plain objects", () => {
+    expect(stringifyUnknownValue({ value: { x: 1 } })).toBe('{"x":1}');
+  });
+});
+
+describe("getClipboardContent", () => {
+  it("should use rawValue for text when it differs from displayedValue", () => {
+    const displayed = {
+      _serialized_mime_bundle: {
+        mimetype: "text/html",
+        data: '<a href="https://example.com">42</a>',
+      },
+    };
+    const result = getClipboardContent(42, displayed);
+    expect(result.text).toBe("42");
+    expect(result.html).toBe('<a href="https://example.com">42</a>');
+  });
+
+  it("should strip html for text when rawValue equals displayedValue", () => {
+    const mimeBundle = {
+      _serialized_mime_bundle: {
+        mimetype: "text/html",
+        data: "<b>bold</b>",
+      },
+    };
+    const result = getClipboardContent(mimeBundle, mimeBundle);
+    expect(result.text).toBe("bold");
+    expect(result.html).toBe("<b>bold</b>");
+  });
+
+  it("should handle undefined rawValue", () => {
+    const displayed = {
+      _serialized_mime_bundle: {
+        mimetype: "text/html",
+        data: "<b>hello</b>",
+      },
+    };
+    const result = getClipboardContent(undefined, displayed);
+    expect(result.text).toBe("hello");
+    expect(result.html).toBe("<b>hello</b>");
+  });
+
+  it("should return no html for plain values", () => {
+    const result = getClipboardContent(undefined, "plain text");
+    expect(result.text).toBe("plain text");
+    expect(result.html).toBeUndefined();
+  });
+
+  it("should treat text/markdown as html since mo.md() data is rendered html", () => {
+    const displayed = {
+      _serialized_mime_bundle: {
+        mimetype: "text/markdown",
+        data: '<span class="markdown"><strong>Hello</strong></span>',
+      },
+    };
+    const result = getClipboardContent(undefined, displayed);
+    expect(result.text).toBe("Hello");
+    expect(result.html).toBe(
+      '<span class="markdown"><strong>Hello</strong></span>',
+    );
+  });
+
+  it("should return no html for non-html mime bundles", () => {
+    const displayed = {
+      _serialized_mime_bundle: {
+        mimetype: "text/plain",
+        data: "just text",
+      },
+    };
+    const result = getClipboardContent(undefined, displayed);
+    expect(result.text).toBe("just text");
+    expect(result.html).toBeUndefined();
+  });
+
+  it("should handle null rawValue as a real value", () => {
+    const displayed = {
+      _serialized_mime_bundle: {
+        mimetype: "text/html",
+        data: "<i>N/A</i>",
+      },
+    };
+    const result = getClipboardContent(null, displayed);
+    expect(result.text).toBe("null");
+    expect(result.html).toBe("<i>N/A</i>");
+  });
+});
+
+function createMockTableWithMeta<TData>(rawData?: TData[]): Table<TData> {
+  return {
+    options: {
+      meta: { rawData },
+    },
+  } as unknown as Table<TData>;
+}
+
+describe("getRawValue", () => {
+  it("should return raw value when rawData is available", () => {
+    const table = createMockTableWithMeta([
+      { a: 10, b: 20 },
+      { a: 30, b: 40 },
+    ]);
+    expect(getRawValue(table, 0, "a")).toBe(10);
+    expect(getRawValue(table, 1, "b")).toBe(40);
+  });
+
+  it("should return undefined when rawData is not set", () => {
+    const table = createMockTableWithMeta(undefined);
+    expect(getRawValue(table, 0, "a")).toBeUndefined();
+  });
+
+  it("should return undefined when row index is out of bounds", () => {
+    const table = createMockTableWithMeta([{ a: 1 }]);
+    expect(getRawValue(table, 5, "a")).toBeUndefined();
+  });
+});

package/src/components/data-table/charts/__tests__/storage.test.ts

@@ -12,7 +12,7 @@ vi.mock("@/utils/storage/storage", () => ({
   },
 }));
 
-import type { CellId } from "@/core/cells/ids";
+import { cellId } from "@/__tests__/branded";
 import { availableStorage } from "@/utils/storage/storage";
 import { ChartSchema } from "../schemas";
 import type { TabName } from "../storage";
@@ -37,7 +37,7 @@ describe("Chart Transforms Storage", () => {
 
     it("should store and retrieve tab data", () => {
       const store = getDefaultStore();
-      const cellId = "cell-1" as CellId;
+      const cid = cellId("cell-1");
       const tabData = {
         tabName: "Tab 1" as TabName,
         chartType: ChartType.LINE,
@@ -51,17 +51,17 @@ describe("Chart Transforms Storage", () => {
 
       // Set the atom value
       const newMap = new Map();
-      newMap.set(cellId, [tabData]);
+      newMap.set(cid, [tabData]);
       store.set(tabsStorageAtom, newMap);
 
       // Verify the value was set
       const retrievedValue = store.get(tabsStorageAtom);
-      expect(retrievedValue.get(cellId)).toEqual([tabData]);
+      expect(retrievedValue.get(cid)).toEqual([tabData]);
     });
 
     it("should handle multiple tabs for the same cell", () => {
       const store = getDefaultStore();
-      const cellId = "cell-1" as CellId;
+      const cid = cellId("cell-1");
       const tabData1 = {
         tabName: "Tab 1" as TabName,
         chartType: ChartType.LINE,
@@ -85,12 +85,12 @@ describe("Chart Transforms Storage", () => {
 
       // Set the atom value
       const newMap = new Map();
-      newMap.set(cellId, [tabData1, tabData2]);
+      newMap.set(cid, [tabData1, tabData2]);
       store.set(tabsStorageAtom, newMap);
 
       // Verify the value was set
       const retrievedValue = store.get(tabsStorageAtom);
-      expect(retrievedValue.get(cellId)).toEqual([tabData1, tabData2]);
+      expect(retrievedValue.get(cid)).toEqual([tabData1, tabData2]);
     });
   });
 

package/src/components/data-table/charts/components/chart-items.tsx

@@ -1,7 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { capitalize } from "lodash-es";
 import { ChevronDown } from "lucide-react";
 import React from "react";
 import { useFormContext, useWatch } from "react-hook-form";
@@ -14,6 +13,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import type { DataType } from "@/core/kernel/messages";
+import { capitalize } from "@/utils/strings";
 import { isFieldSet } from "../chart-spec/spec";
 import { convertDataTypeToSelectable } from "../chart-spec/types";
 import {

package/src/components/data-table/charts/components/form-fields.tsx

@@ -1,6 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { capitalize } from "lodash-es";
 import {
   ArrowDownWideNarrowIcon,
   ArrowUpWideNarrowIcon,
@@ -36,6 +35,7 @@ import { Slider } from "@/components/ui/slider";
 import type { DataType } from "@/core/kernel/messages";
 import { Multiselect } from "@/plugins/impl/MultiselectPlugin";
 import { cn } from "@/utils/cn";
+import { capitalize } from "@/utils/strings";
 import { convertDataTypeToSelectable } from "../chart-spec/types";
 import {
   AGGREGATION_TYPE_DESCRIPTIONS,

package/src/components/data-table/charts/forms/common-chart.tsx

@@ -1,10 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { capitalize } from "lodash-es";
 import { InfoIcon, TriangleAlert } from "lucide-react";
 import { useFormContext, useWatch } from "react-hook-form";
 import { Accordion } from "@/components/ui/accordion";
 import { Tooltip } from "@/components/ui/tooltip";
+import { capitalize } from "@/utils/strings";
 import { isFieldSet } from "../chart-spec/spec";
 import { ColorByAxis, Facet, XAxis, YAxis } from "../components/chart-items";
 import {

package/src/components/data-table/charts/storage.ts

@@ -1,11 +1,11 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { atomWithStorage } from "jotai/utils";
-import { capitalize } from "lodash-es";
 import { z } from "zod";
 import type { CellId } from "@/core/cells/ids";
 import { Logger } from "@/utils/Logger";
 import { NotebookScopedLocalStorage } from "@/utils/storage/typed";
+import { capitalize } from "@/utils/strings";
 import type { TypedString } from "@/utils/typed";
 import { ChartSchema, type ChartSchemaType } from "./schemas";
 import type { ChartType } from "./types";

package/src/components/data-table/column-explorer-panel/column-explorer.tsx

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
 import { useState } from "react";
 import { useLocale } from "react-aria";
 import {
@@ -88,18 +89,21 @@ export const ColumnExplorerPanel = ({
         />
         <CommandList className="max-h-full">
           <CommandEmpty>No results.</CommandEmpty>
-          {filteredColumns?.map(([columnName, [dataType, externalType]]) => {
-            return (
-              <ColumnItem
-                // Tables may have the same column names, hence we use tableId to make it unique
-                key={`${tableId}-${columnName}`}
-                columnName={columnName}
-                dataType={dataType}
-                externalType={externalType}
-                previewColumn={previewColumn}
-              />
-            );
-          })}
+          {filteredColumns?.map(
+            ([columnName, [dataType, externalType]], index) => {
+              return (
+                <ColumnItem
+                  // Tables may have the same column names, hence we use tableId to make it unique
+                  key={`${tableId}-${columnName}`}
+                  columnName={columnName}
+                  dataType={dataType}
+                  externalType={externalType}
+                  previewColumn={previewColumn}
+                  defaultExpanded={index === 0}
+                />
+              );
+            },
+          )}
         </CommandList>
       </Command>
     </div>
@@ -111,13 +115,15 @@ const ColumnItem = ({
   dataType,
   externalType,
   previewColumn,
+  defaultExpanded = false,
 }: {
   columnName: string;
   dataType: DataType;
   externalType: string;
   previewColumn: PreviewColumn;
+  defaultExpanded?: boolean;
 }) => {
-  const [isExpanded, setIsExpanded] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
 
   const columnText = (
     <span className={isExpanded ? "font-semibold" : ""}>{columnName}</span>
@@ -130,6 +136,11 @@ const ColumnItem = ({
         onSelect={() => setIsExpanded(!isExpanded)}
         className="flex flex-row items-center gap-1.5 group w-full cursor-pointer"
       >
+        {isExpanded ? (
+          <ChevronDownIcon className="w-3 h-3 shrink-0 text-muted-foreground" />
+        ) : (
+          <ChevronRightIcon className="w-3 h-3 shrink-0 text-muted-foreground" />
+        )}
         <ColumnName columnName={columnText} dataType={dataType} />
         <div className="ml-auto">
           <Tooltip content="Copy column name" delayDuration={400}>

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

@@ -2,7 +2,6 @@
 "use no memo";
 
 import type { Column, Table } from "@tanstack/react-table";
-import { capitalize } from "lodash-es";
 import { FilterIcon, MinusIcon, TextIcon, XIcon } from "lucide-react";
 import { useMemo, useRef, useState } from "react";
 import { useLocale } from "react-aria";
@@ -24,6 +23,7 @@ import type { OperatorType } from "@/plugins/impl/data-frames/utils/operators";
 import { logNever } from "@/utils/assertNever";
 import { cn } from "@/utils/cn";
 import { Logger } from "@/utils/Logger";
+import { capitalize } from "@/utils/strings";
 import { Spinner } from "../icons/spinner";
 import { Button } from "../ui/button";
 import { Checkbox } from "../ui/checkbox";

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

@@ -112,6 +112,7 @@ export function generateColumns<T>({
   headerTooltip,
   showDataTypes,
   calculateTopKRows,
+  fractionDigitsByColumn,
 }: {
   rowHeaders: FieldTypesWithExternalType;
   selection: DataTableSelection;
@@ -122,6 +123,7 @@ export function generateColumns<T>({
   headerTooltip?: Record<string, string>;
   showDataTypes?: boolean;
   calculateTopKRows?: CalculateTopKRows;
+  fractionDigitsByColumn?: Record<string, number>;
 }): ColumnDef<T>[] {
   // Row-headers are typically index columns
   const rowHeadersSet = new Set(rowHeaders.map(([columnName]) => columnName));
@@ -138,6 +140,7 @@ export function generateColumns<T>({
         rowHeader: isRowHeader,
         dtype: types?.[1],
         dataType: types?.[0],
+        minFractionDigits: fractionDigitsByColumn?.[key],
       };
     }
 
@@ -146,9 +149,23 @@ export function generateColumns<T>({
       filterType: getFilterTypeForFieldType(types[0]),
       dtype: types[1],
       dataType: types[0],
+      minFractionDigits: fractionDigitsByColumn?.[key],
     };
   };
 
+  const getJustify = (key: string): "left" | "center" | "right" | undefined => {
+    // Explicit user override takes precedence
+    if (textJustifyColumns?.[key]) {
+      return textJustifyColumns[key];
+    }
+    // Auto right-align numeric columns
+    const dataType = getMeta(key).dataType;
+    if (dataType === "number" || dataType === "integer") {
+      return "right";
+    }
+    return undefined;
+  };
+
   const columnKeys: string[] = [
     ...rowHeadersSet,
     ...fieldTypes.map(([columnName]) => columnName),
@@ -186,7 +203,7 @@ export function generateColumns<T>({
             </div>
           ) : null;
 
-        const justify = textJustifyColumns?.[key];
+        const justify = getJustify(key);
 
         const headerWithType = (
           <div
@@ -254,18 +271,21 @@ export function generateColumns<T>({
           cell.toggleSelected?.();
         }
 
-        const justify = textJustifyColumns?.[key];
+        const justify = getJustify(key);
         const wrapped = wrappedColumns?.includes(key);
         const isCellSelected = cell?.getIsSelected?.() || false;
         const canSelectCell =
           (selection === "single-cell" || selection === "multi-cell") &&
           !isCellSelected;
 
+        const dataType = column.columnDef.meta?.dataType;
+        const isNumeric = dataType === "number" || dataType === "integer";
         const cellStyles = getCellStyleClass(
           justify,
           wrapped,
           canSelectCell,
           isCellSelected,
+          isNumeric,
         );
 
         const renderedCell = renderCellValue({
@@ -430,6 +450,7 @@ function getCellStyleClass(
   wrapped: boolean | undefined,
   canSelectCell: boolean,
   isSelected: boolean,
+  isNumeric?: boolean,
 ): string {
   return cn(
     canSelectCell && "cursor-pointer",
@@ -438,6 +459,7 @@ function getCellStyleClass(
     "w-full",
     "text-left",
     "truncate",
+    isNumeric && "tabular-nums",
     justify === "center" && "text-center",
     justify === "right" && "text-right",
     wrapped && `${COLUMN_WRAPPING_STYLES} break-words`,
@@ -589,7 +611,18 @@ export function renderCellValue<TData, TValue>({
   if (typeof value === "number") {
     return (
       <div onClick={selectCell} className={cellStyles}>
-        <LocaleNumber value={value} />
+        <LocaleNumber
+          value={value}
+          minFractionDigits={column.columnDef.meta?.minFractionDigits}
+        />
+      </div>
+    );
+  }
+
+  if (typeof value === "boolean") {
+    return (
+      <div onClick={selectCell} className={cellStyles}>
+        {value ? "True" : "False"}
       </div>
     );
   }
@@ -635,9 +668,16 @@ export function renderCellValue<TData, TValue>({
   );
 }
 
-export const LocaleNumber = ({ value }: { value: number }) => {
+export const LocaleNumber = ({
+  value,
+  minFractionDigits,
+}: {
+  value: number;
+  minFractionDigits?: number;
+}) => {
   const { locale } = useLocale();
   const format = useNumberFormatter({
+    minimumFractionDigits: minFractionDigits,
     maximumFractionDigits: maxFractionalDigits(locale),
   });
   return format.format(value);

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

@@ -18,7 +18,7 @@ import {
 import { DATA_CELL_ID } from "./cell-utils";
 import { Filter } from "./filters";
 import { selectedCellsAtom } from "./range-focus/atoms";
-import { stringifyUnknownValue } from "./utils";
+import { getClipboardContent, getRawValue } from "./utils";
 
 export const DataTableContextMenu = <TData,>({
   contextMenuRef,
@@ -82,11 +82,15 @@ export const CellContextMenu = <TData,>({
     return;
   }
 
+  const table = cell.getContext().table;
+  const displayedValue = cell.getValue();
+  const rawValue =
+    getRawValue(table, cell.row.index, cell.column.id) ?? displayedValue;
+
   const handleCopyCell = () => {
     try {
-      const value = cell.getValue();
-      const stringValue = stringifyUnknownValue({ value });
-      copyToClipboard(stringValue);
+      const { text, html } = getClipboardContent(rawValue, displayedValue);
+      copyToClipboard(text, html);
     } catch (error) {
       Logger.error("Failed to copy context menu cell", error);
     }
@@ -98,7 +102,7 @@ export const CellContextMenu = <TData,>({
   const handleFilterCell = (operator: "in" | "not_in") => {
     column.setFilterValue(
       Filter.select({
-        options: [cell.getValue()],
+        options: [rawValue],
         operator,
       }),
     );