@marimo-team/islands 0.23.9-dev4 → 0.23.9-dev40

package/src/components/data-table/__tests__/column-explorer.test.tsx

@@ -0,0 +1,128 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { ColumnExplorerPanel } from "../column-explorer-panel/column-explorer";
+import type { FieldTypesWithExternalType } from "../types";
+
+beforeAll(() => {
+  global.HTMLElement.prototype.scrollIntoView = () => {};
+  if (!global.HTMLElement.prototype.hasPointerCapture) {
+    global.HTMLElement.prototype.hasPointerCapture = () => false;
+  }
+});
+
+const FIELD_TYPES: FieldTypesWithExternalType = [
+  ["customer_name", ["string", "str"]],
+  ["cust_age", ["integer", "int"]],
+  ["order_total", ["number", "float"]],
+];
+
+type Row = Record<string, unknown>;
+
+const TEST_COLUMNS: ColumnDef<Row>[] = [
+  { id: "customer_name", accessorKey: "customer_name" },
+  { id: "cust_age", accessorKey: "cust_age" },
+  { id: "order_total", accessorKey: "order_total" },
+];
+
+interface HarnessProps {
+  totalColumns?: number;
+  initiallyHidden?: string[];
+}
+
+function PanelHarness({
+  totalColumns = 3,
+  initiallyHidden = [],
+}: HarnessProps) {
+  const table = useReactTable<Row>({
+    data: [],
+    columns: TEST_COLUMNS,
+    getCoreRowModel: getCoreRowModel(),
+    locale: "en-US",
+    state: {
+      columnVisibility: Object.fromEntries(
+        initiallyHidden.map((id) => [id, false]),
+      ),
+    },
+  });
+  return (
+    <ColumnExplorerPanel
+      previewColumn={vi.fn().mockResolvedValue({})}
+      fieldTypes={FIELD_TYPES}
+      totalRows={3}
+      totalColumns={totalColumns}
+      tableId="t1"
+      table={table}
+    />
+  );
+}
+
+function renderPanel(props?: HarnessProps) {
+  return render(
+    <TooltipProvider>
+      <PanelHarness {...(props ?? {})} />
+    </TooltipProvider>,
+  );
+}
+
+function getSearchInput() {
+  return screen.getByPlaceholderText("Search columns...");
+}
+
+describe("ColumnExplorerPanel search", () => {
+  it("shows all columns when search is empty", () => {
+    renderPanel();
+    expect(screen.getByText("customer_name")).toBeInTheDocument();
+    expect(screen.getByText("cust_age")).toBeInTheDocument();
+    expect(screen.getByText("order_total")).toBeInTheDocument();
+  });
+
+  it("matches a word prefix against any column word", () => {
+    renderPanel();
+    fireEvent.change(getSearchInput(), { target: { value: "cust" } });
+    expect(screen.getByText("customer_name")).toBeInTheDocument();
+    expect(screen.getByText("cust_age")).toBeInTheDocument();
+    expect(screen.queryByText("order_total")).not.toBeInTheDocument();
+  });
+
+  it("matches multi-word queries across column words in any order", () => {
+    renderPanel();
+    fireEvent.change(getSearchInput(), { target: { value: "name cust" } });
+    expect(screen.getByText("customer_name")).toBeInTheDocument();
+    expect(screen.queryByText("cust_age")).not.toBeInTheDocument();
+    expect(screen.queryByText("order_total")).not.toBeInTheDocument();
+  });
+
+  it("filters out columns that don't match any needle word", () => {
+    renderPanel();
+    fireEvent.change(getSearchInput(), { target: { value: "xyz" } });
+    expect(screen.queryByText("customer_name")).not.toBeInTheDocument();
+    expect(screen.queryByText("cust_age")).not.toBeInTheDocument();
+    expect(screen.queryByText("order_total")).not.toBeInTheDocument();
+  });
+});
+
+describe("ColumnExplorerPanel header counts", () => {
+  it("uses rendered-subset total when a clipped column is hidden", () => {
+    // Dataset has 100 columns server-side; only 3 are rendered into the
+    // TanStack table (the clipped subset). Hiding one of the rendered columns
+    // must report "2 visible (1 hidden)", not "99 visible (1 hidden)".
+    renderPanel({ totalColumns: 100, initiallyHidden: ["cust_age"] });
+    expect(screen.getByText(/2 visible/)).toBeInTheDocument();
+    expect(screen.getByText(/\(1 hidden\)/)).toBeInTheDocument();
+    expect(screen.queryByText(/99 visible/)).not.toBeInTheDocument();
+  });
+
+  it("uses dataset-wide total when no column is hidden", () => {
+    renderPanel({ totalColumns: 100 });
+    expect(screen.getByText(/100 columns/)).toBeInTheDocument();
+    expect(screen.queryByText(/hidden/)).not.toBeInTheDocument();
+  });
+});

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

@@ -5,7 +5,7 @@ import type {
   RowSelectionState,
   SortingState,
 } from "@tanstack/react-table";
-import { render, screen, within } from "@testing-library/react";
+import { fireEvent, render, screen, within } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { DataTable } from "../data-table";
@@ -251,3 +251,54 @@ describe("DataTable", () => {
     expect(within(updatedRows[3]).getByText("pending")).toBeTruthy();
   });
 });
+
+describe("DataTable — all-hidden banner", () => {
+  interface Row {
+    a: number;
+    b: number;
+  }
+
+  const columns: ColumnDef<Row>[] = [
+    { accessorKey: "a", header: "A" },
+    { accessorKey: "b", header: "B" },
+  ];
+  const data: Row[] = [{ a: 1, b: 2 }];
+
+  const renderWithVisibility = (hiddenColumns: string[]) =>
+    render(
+      <TooltipProvider>
+        <DataTable
+          data={data}
+          columns={columns}
+          selection={null}
+          totalRows={1}
+          totalColumns={2}
+          pagination={false}
+          hiddenColumns={hiddenColumns}
+        />
+      </TooltipProvider>,
+    );
+
+  it("renders banner when every user column is hidden", () => {
+    renderWithVisibility(["a", "b"]);
+    expect(screen.getByText(/All columns are hidden/i)).toBeInTheDocument();
+    expect(screen.getByText(/Unhide all/i)).toBeInTheDocument();
+  });
+
+  it("does not render the banner when at least one column is visible", () => {
+    renderWithVisibility(["a"]);
+    expect(screen.queryByText(/All columns are hidden/i)).toBeNull();
+  });
+
+  it("does not render the banner when no columns are hidden", () => {
+    renderWithVisibility([]);
+    expect(screen.queryByText(/All columns are hidden/i)).toBeNull();
+  });
+
+  it("'Unhide all' restores columns hidden via the Python kwarg", () => {
+    renderWithVisibility(["a", "b"]);
+    expect(screen.getByText(/All columns are hidden/i)).toBeInTheDocument();
+    fireEvent.click(screen.getByText(/Unhide all/i));
+    expect(screen.queryByText(/All columns are hidden/i)).toBeNull();
+  });
+});

package/src/components/data-table/__tests__/header-items.test.tsx

@@ -1,7 +1,35 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import type { SortingState } from "@tanstack/react-table";
+import type {
+  Column,
+  SortDirection,
+  SortingState,
+  Table,
+} from "@tanstack/react-table";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  ColumnPinning,
+  ColumnWrapping,
+  CopyColumn,
+  DataType,
+  FormatOptions,
+  HideColumn,
+  Sorts,
+} from "../header-items";
+
+const renderInMenu = (node: React.ReactNode) =>
+  render(
+    <DropdownMenu open={true}>
+      <DropdownMenuTrigger />
+      <DropdownMenuContent>{node}</DropdownMenuContent>
+    </DropdownMenu>,
+  );
 
 describe("multi-column sorting logic", () => {
   // Extract the core sorting logic to test in isolation
@@ -146,3 +174,231 @@ describe("multi-column sorting logic", () => {
     // After removal, dept should move from priority 3 to priority 2
   });
 });
+
+describe("HideColumn", () => {
+  const makeColumn = ({
+    canHide = true,
+    toggleVisibility = vi.fn(),
+  }: {
+    canHide?: boolean;
+    toggleVisibility?: (value?: boolean) => void;
+  } = {}) =>
+    ({
+      getCanHide: () => canHide,
+      toggleVisibility,
+    }) as unknown as Column<unknown, unknown>;
+
+  it("renders 'Hide column' when canHide is true", () => {
+    renderInMenu(<HideColumn column={makeColumn()} />);
+    expect(screen.getByText("Hide column")).toBeInTheDocument();
+  });
+
+  it("returns null when getCanHide is false", () => {
+    renderInMenu(<HideColumn column={makeColumn({ canHide: false })} />);
+    expect(screen.queryByText("Hide column")).toBeNull();
+  });
+
+  it("calls toggleVisibility(false) on click", () => {
+    const toggleVisibility = vi.fn();
+    renderInMenu(<HideColumn column={makeColumn({ toggleVisibility })} />);
+    fireEvent.click(screen.getByText("Hide column"));
+    expect(toggleVisibility).toHaveBeenCalledWith(false);
+  });
+});
+
+describe("DataType", () => {
+  const makeColumn = (dtype?: string) =>
+    ({
+      columnDef: { meta: dtype === undefined ? {} : { dtype } },
+    }) as unknown as Column<unknown, unknown>;
+
+  it("renders the dtype label when present", () => {
+    renderInMenu(<DataType column={makeColumn("int64")} />);
+    expect(screen.getByText("int64")).toBeInTheDocument();
+  });
+
+  it("returns null when dtype is absent", () => {
+    renderInMenu(<DataType column={makeColumn()} />);
+    expect(screen.queryByText("int64")).toBeNull();
+  });
+});
+
+describe("Sorts", () => {
+  const makeColumn = ({
+    canSort = true,
+    sorted = false,
+    sortIndex = 0,
+  }: {
+    canSort?: boolean;
+    sorted?: false | SortDirection;
+    sortIndex?: number;
+  } = {}) =>
+    ({
+      getCanSort: () => canSort,
+      getIsSorted: () => sorted,
+      getSortIndex: () => sortIndex,
+      clearSorting: vi.fn(),
+      toggleSorting: vi.fn(),
+    }) as unknown as Column<unknown, unknown>;
+
+  const makeTable = (sorting: SortingState) =>
+    ({
+      getState: () => ({ sorting }),
+      resetSorting: vi.fn(),
+    }) as unknown as Table<unknown>;
+
+  it("returns null when the column cannot sort", () => {
+    renderInMenu(<Sorts column={makeColumn({ canSort: false })} />);
+    expect(screen.queryByText("Asc")).toBeNull();
+  });
+
+  it("renders Asc and Desc items", () => {
+    renderInMenu(<Sorts column={makeColumn()} />);
+    expect(screen.getByText("Asc")).toBeInTheDocument();
+    expect(screen.getByText("Desc")).toBeInTheDocument();
+  });
+
+  it("offers single-column 'Clear sort' when sorted without multi-sort", () => {
+    renderInMenu(<Sorts column={makeColumn({ sorted: "asc" })} />);
+    expect(screen.getByText("Clear sort")).toBeInTheDocument();
+  });
+
+  it("offers 'Clear all sorts' when the table has multiple sorts", () => {
+    renderInMenu(
+      <Sorts
+        column={makeColumn({ sorted: "asc" })}
+        table={makeTable([
+          { id: "a", desc: false },
+          { id: "b", desc: true },
+        ])}
+      />,
+    );
+    expect(screen.getByText("Clear all sorts")).toBeInTheDocument();
+  });
+});
+
+describe("CopyColumn", () => {
+  const makeColumn = ({
+    canCopy = true,
+    id = "name",
+  }: {
+    canCopy?: boolean;
+    id?: string;
+  } = {}) =>
+    ({
+      id,
+      getCanCopy: () => canCopy,
+    }) as unknown as Column<unknown, unknown>;
+
+  it("renders 'Copy column name' when copyable", () => {
+    renderInMenu(<CopyColumn column={makeColumn()} />);
+    expect(screen.getByText("Copy column name")).toBeInTheDocument();
+  });
+
+  it("returns null when the column cannot be copied", () => {
+    renderInMenu(<CopyColumn column={makeColumn({ canCopy: false })} />);
+    expect(screen.queryByText("Copy column name")).toBeNull();
+  });
+});
+
+describe("ColumnPinning", () => {
+  const makeColumn = ({
+    canPin = true,
+    pinned = false,
+  }: {
+    canPin?: boolean;
+    pinned?: false | "left" | "right";
+  } = {}) =>
+    ({
+      getCanPin: () => canPin,
+      getIsPinned: () => pinned,
+      pin: vi.fn(),
+    }) as unknown as Column<unknown, unknown>;
+
+  it("returns null when the column cannot be pinned", () => {
+    renderInMenu(<ColumnPinning column={makeColumn({ canPin: false })} />);
+    expect(screen.queryByText("Freeze left")).toBeNull();
+  });
+
+  it("offers freeze options when unpinned", () => {
+    renderInMenu(<ColumnPinning column={makeColumn()} />);
+    expect(screen.getByText("Freeze left")).toBeInTheDocument();
+    expect(screen.getByText("Freeze right")).toBeInTheDocument();
+  });
+
+  it("offers 'Unfreeze' when pinned", () => {
+    renderInMenu(<ColumnPinning column={makeColumn({ pinned: "left" })} />);
+    expect(screen.getByText("Unfreeze")).toBeInTheDocument();
+  });
+});
+
+describe("ColumnWrapping", () => {
+  const makeColumn = ({
+    canWrap = true,
+    wrapping = "nowrap",
+  }: {
+    canWrap?: boolean;
+    wrapping?: "wrap" | "nowrap";
+  } = {}) =>
+    ({
+      getCanWrap: () => canWrap,
+      getColumnWrapping: () => wrapping,
+      toggleColumnWrapping: vi.fn(),
+    }) as unknown as Column<unknown, unknown>;
+
+  it("returns null when the column cannot wrap", () => {
+    renderInMenu(<ColumnWrapping column={makeColumn({ canWrap: false })} />);
+    expect(screen.queryByText("Wrap text")).toBeNull();
+  });
+
+  it("offers 'Wrap text' when not wrapping", () => {
+    renderInMenu(<ColumnWrapping column={makeColumn()} />);
+    expect(screen.getByText("Wrap text")).toBeInTheDocument();
+  });
+
+  it("offers 'No wrap text' when wrapping", () => {
+    renderInMenu(<ColumnWrapping column={makeColumn({ wrapping: "wrap" })} />);
+    expect(screen.getByText("No wrap text")).toBeInTheDocument();
+  });
+});
+
+describe("FormatOptions", () => {
+  const makeColumn = ({
+    dataType = "number",
+    canFormat = true,
+  }: {
+    dataType?: string;
+    canFormat?: boolean;
+  } = {}) =>
+    ({
+      columnDef: { meta: { dataType } },
+      getCanFormat: () => canFormat,
+      getColumnFormatting: () => undefined,
+      setColumnFormatting: vi.fn(),
+    }) as unknown as Column<unknown, unknown>;
+
+  it("renders the 'Format' submenu trigger for formattable columns", () => {
+    renderInMenu(<FormatOptions column={makeColumn()} locale="en-US" />);
+    expect(screen.getByText("Format")).toBeInTheDocument();
+  });
+
+  it("returns null when the column cannot be formatted", () => {
+    renderInMenu(
+      <FormatOptions
+        column={makeColumn({ canFormat: false })}
+        locale="en-US"
+      />,
+    );
+    expect(screen.queryByText("Format")).toBeNull();
+  });
+
+  it("returns null when the data type has no format options", () => {
+    renderInMenu(
+      <FormatOptions
+        column={makeColumn({ dataType: "unknown" })}
+        locale="en-US"
+      />,
+    );
+    expect(screen.queryByText("Format")).toBeNull();
+  });
+});

package/src/components/data-table/__tests__/useColumnVisibility.test.ts

@@ -0,0 +1,42 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { useColumnVisibility } from "../hooks/use-column-visibility";
+
+describe("useColumnVisibility", () => {
+  it("should initialize with correct default values", () => {
+    const { result } = renderHook(() => useColumnVisibility());
+    expect(result.current.columnVisibility).toEqual({});
+  });
+
+  it("should seed hidden columns as { name: false }", () => {
+    const { result } = renderHook(() => useColumnVisibility(["a", "b"]));
+    expect(result.current.columnVisibility).toEqual({ a: false, b: false });
+  });
+
+  it("should treat empty hidden list as a no-op", () => {
+    const { result } = renderHook(() => useColumnVisibility([]));
+    expect(result.current.columnVisibility).toEqual({});
+  });
+
+  it("should update visibility state via setter", () => {
+    const { result } = renderHook(() => useColumnVisibility(["a"]));
+
+    act(() => {
+      result.current.setColumnVisibility({ a: true, b: false });
+    });
+
+    expect(result.current.columnVisibility).toEqual({ a: true, b: false });
+  });
+
+  it("should handle functional updates", () => {
+    const { result } = renderHook(() => useColumnVisibility(["a"]));
+
+    act(() => {
+      result.current.setColumnVisibility((prev) => ({ ...prev, c: false }));
+    });
+
+    expect(result.current.columnVisibility).toEqual({ a: false, c: false });
+  });
+});