@marimo-team/islands 0.21.2-dev0 → 0.21.2-dev100

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

@@ -2,21 +2,20 @@
 "use no memo";
 
 import type { RowSelectionState, Table } from "@tanstack/react-table";
-import {
-  ChartColumnStacked,
-  ChartSplineIcon,
-  PanelRightIcon,
-  SearchIcon,
-} from "lucide-react";
+import { ChartSplineIcon, PanelRightIcon, 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";
+import {
+  PANEL_TYPES,
+  type PanelType,
+} from "../editor/chrome/panels/context-aware-panel/context-aware-panel";
 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> {
@@ -30,15 +29,13 @@ interface TableActionsProps<TData> {
   onRowSelectionChange?: (value: RowSelectionState) => void;
   table: Table<TData>;
   downloadAs?: DownloadActionProps["downloadAs"];
-  downloadFileName?: string;
   getRowIds?: GetRowIds;
   toggleDisplayHeader?: () => void;
   showChartBuilder?: boolean;
-  showColumnExplorer?: boolean;
-  showRowExplorer?: boolean;
+  showTableExplorer?: boolean;
   showPageSizeSelector?: boolean;
   togglePanel?: (panelType: PanelType) => void;
-  isPanelOpen?: (panelType: PanelType) => boolean;
+  isAnyPanelOpen?: boolean;
   tableLoading?: boolean;
 }
 
@@ -53,17 +50,16 @@ export const TableActions = <TData,>({
   onRowSelectionChange,
   table,
   downloadAs,
-  downloadFileName,
   getRowIds,
   toggleDisplayHeader,
   showChartBuilder,
-  showColumnExplorer,
-  showRowExplorer,
+  showTableExplorer,
   showPageSizeSelector,
   togglePanel,
-  isPanelOpen,
+  isAnyPanelOpen,
   tableLoading,
 }: TableActionsProps<TData>) => {
+  const { locale } = useLocale();
   const handleSelectAllRows = (value: boolean) => {
     if (!onRowSelectionChange) {
       return;
@@ -134,46 +130,25 @@ export const TableActions = <TData,>({
           </Button>
         </Tooltip>
       )}
-      {togglePanel && isPanelOpen !== undefined && (
-        <>
-          {showRowExplorer && (
-            <Tooltip content="Toggle row viewer">
-              <Button
-                variant="text"
-                size="xs"
-                onClick={() => togglePanel("row-viewer")}
-                className="print:hidden"
-              >
-                <PanelRightIcon
-                  className={cn(
-                    "w-4 h-4 text-muted-foreground",
-                    isPanelOpen("row-viewer") && "text-primary",
-                  )}
-                />
-              </Button>
-            </Tooltip>
-          )}
-          {showColumnExplorer && (
-            <Tooltip content="Toggle column explorer">
-              <Button
-                variant="text"
-                size="xs"
-                onClick={() => togglePanel("column-explorer")}
-                className="print:hidden"
-              >
-                <ChartColumnStacked
-                  className={cn(
-                    "w-4 h-4 text-muted-foreground",
-                    isPanelOpen("column-explorer") && "text-primary",
-                  )}
-                />
-              </Button>
-            </Tooltip>
-          )}
-        </>
+      {showTableExplorer && togglePanel && (
+        <Tooltip content="Toggle table explorer">
+          <Button
+            variant="text"
+            size="xs"
+            onClick={() => togglePanel(PANEL_TYPES.ROW_VIEWER)}
+            className="print:hidden"
+          >
+            <PanelRightIcon
+              className={cn(
+                "w-4 h-4 text-muted-foreground",
+                isAnyPanelOpen && "text-primary",
+              )}
+            />
+          </Button>
+        </Tooltip>
       )}
 
-      {pagination && (
+      {pagination ? (
         <DataTablePagination
           totalColumns={totalColumns}
           selection={selection}
@@ -182,14 +157,13 @@ 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 && (
-          <DownloadAs
-            downloadAs={downloadAs}
-            downloadFileName={downloadFileName}
-          />
-        )}
+        {downloadAs && <DownloadAs downloadAs={downloadAs} />}
       </div>
     </div>
   );

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

@@ -222,6 +222,75 @@ describe("generateColumns", () => {
     expect(columns[1].meta?.dataType).toBe("number");
   });
 
+  it("should auto right-align numeric columns", () => {
+    const columns = generateColumns({
+      rowHeaders: [],
+      selection: null,
+      fieldTypes,
+    });
+
+    // "age" is a number column — should auto right-align
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const cell = (columns[1].cell as any)({
+      column: {
+        columnDef: columns[1],
+      },
+      renderValue: () => 25,
+      getValue: () => 25,
+    });
+    expect(cell?.props.className).toContain("text-right");
+
+    // "name" is a string column — should remain left-aligned
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const nameCell = (columns[0].cell as any)({
+      column: {
+        columnDef: columns[0],
+      },
+      renderValue: () => "John",
+      getValue: () => "John",
+    });
+    expect(nameCell?.props.className).not.toContain("text-right");
+  });
+
+  it("should respect explicit textJustifyColumns over auto alignment", () => {
+    const columns = generateColumns({
+      rowHeaders: [],
+      selection: null,
+      fieldTypes,
+      textJustifyColumns: { age: "left" },
+    });
+
+    // "age" is numeric but explicitly set to left
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const cell = (columns[1].cell as any)({
+      column: {
+        columnDef: columns[1],
+      },
+      renderValue: () => 25,
+      getValue: () => 25,
+    });
+    expect(cell?.props.className).not.toContain("text-right");
+  });
+
+  it("should set minFractionDigits from fractionDigitsByColumn", () => {
+    const numericFieldTypes: FieldTypesWithExternalType = [
+      ["price", ["number", "float64"]],
+      ["count", ["integer", "int64"]],
+    ];
+
+    const columns = generateColumns({
+      rowHeaders: [],
+      selection: null,
+      fieldTypes: numericFieldTypes,
+      fractionDigitsByColumn: { price: 2 },
+    });
+
+    // price has 2 fraction digits
+    expect(columns[0].meta?.minFractionDigits).toBe(2);
+    // count not in fractionDigitsByColumn
+    expect(columns[1].meta?.minFractionDigits).toBeUndefined();
+  });
+
   it("should handle text justification and wrapping", () => {
     const columns = generateColumns({
       rowHeaders: [],
@@ -572,6 +641,75 @@ describe("LocaleNumber", () => {
     );
     expect(container.textContent).toMatchInlineSnapshot(`"10,000,000,000"`);
   });
+
+  it("should pad decimals with minFractionDigits", () => {
+    const { container } = render(
+      <I18nProvider locale="en-US">
+        <LocaleNumber value={42} minFractionDigits={2} />
+      </I18nProvider>,
+    );
+    expect(container.textContent).toMatchInlineSnapshot(`"42.00"`);
+  });
+
+  it("should pad to minFractionDigits for numbers with fewer decimals", () => {
+    const { container } = render(
+      <I18nProvider locale="en-US">
+        <LocaleNumber value={1234.5} minFractionDigits={3} />
+      </I18nProvider>,
+    );
+    expect(container.textContent).toMatchInlineSnapshot(`"1,234.500"`);
+  });
+
+  it("should not truncate decimals beyond minFractionDigits", () => {
+    const { container } = render(
+      <I18nProvider locale="en-US">
+        <LocaleNumber value={1.234_56} minFractionDigits={2} />
+      </I18nProvider>,
+    );
+    expect(container.textContent).toMatchInlineSnapshot(`"1.23456"`);
+  });
+});
+
+describe("renderCellValue with boolean values", () => {
+  const createMockColumn = () =>
+    ({
+      id: "active",
+      columnDef: {
+        meta: {
+          dataType: "boolean" as const,
+          dtype: "bool",
+        },
+      },
+      getColumnFormatting: () => undefined,
+      getColumnWrapping: () => undefined,
+      applyColumnFormatting: (value: unknown) => value,
+    }) as unknown as Column<unknown>;
+
+  it("should render true as True", () => {
+    const mockColumn = createMockColumn();
+    const result = renderCellValue({
+      column: mockColumn,
+      renderValue: () => true,
+      getValue: () => true,
+      selectCell: undefined,
+      cellStyles: "",
+    });
+    const { container } = render(result);
+    expect(container.textContent).toBe("True");
+  });
+
+  it("should render false as False", () => {
+    const mockColumn = createMockColumn();
+    const result = renderCellValue({
+      column: mockColumn,
+      renderValue: () => false,
+      getValue: () => false,
+      selectCell: undefined,
+      cellStyles: "",
+    });
+    const { container } = render(result);
+    expect(container.textContent).toBe("False");
+  });
 });
 
 describe("renderCellValue with datetime values", () => {

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";