@marimo-team/frontend 0.23.10-dev5 → 0.23.10-dev50

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

@@ -0,0 +1,227 @@
+/* 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 } from "vitest";
+import { ColumnVisibilityDropdown } from "../column-visibility-dropdown";
+import { INDEX_COLUMN_NAME, SELECT_COLUMN_ID } from "../types";
+
+beforeAll(() => {
+  global.HTMLElement.prototype.scrollIntoView = () => {
+    // jsdom does not implement scrollIntoView; cmdk calls it on selection.
+  };
+  if (!global.HTMLElement.prototype.hasPointerCapture) {
+    global.HTMLElement.prototype.hasPointerCapture = () => false;
+  }
+});
+
+type Row = Record<string, unknown>;
+
+const TEST_COLUMNS: ColumnDef<Row>[] = [
+  { id: SELECT_COLUMN_ID, accessorKey: SELECT_COLUMN_ID },
+  { id: INDEX_COLUMN_NAME, accessorKey: INDEX_COLUMN_NAME },
+  { id: "__m_column__0", accessorKey: "__m_column__0" },
+  {
+    id: "customer_name",
+    accessorKey: "customer_name",
+    meta: { dataType: "string" },
+  },
+  { id: "cust_age", accessorKey: "cust_age", meta: { dataType: "integer" } },
+  {
+    id: "order_total",
+    accessorKey: "order_total",
+    meta: { dataType: "number" },
+  },
+];
+
+interface HarnessProps {
+  initiallyHidden?: string[];
+  nonHideable?: string[];
+}
+
+function Harness({ initiallyHidden = [], nonHideable = [] }: HarnessProps) {
+  const table = useReactTable<Row>({
+    data: [],
+    columns: TEST_COLUMNS.map((column) =>
+      nonHideable.includes(column.id as string)
+        ? { ...column, enableHiding: false }
+        : column,
+    ),
+    getCoreRowModel: getCoreRowModel(),
+    locale: "en-US",
+    initialState: {
+      columnVisibility: Object.fromEntries(
+        initiallyHidden.map((id) => [id, false]),
+      ),
+    },
+  });
+  return <ColumnVisibilityDropdown table={table} />;
+}
+
+function renderAndOpen(props?: HarnessProps) {
+  const result = render(<Harness {...(props ?? {})} />);
+  fireEvent.click(screen.getByTestId("column-visibility-trigger"));
+  return result;
+}
+
+function getOptionTexts(): string[] {
+  return screen.getAllByRole("option").map((el) => el.textContent ?? "");
+}
+
+function getColumnOption(name: string): HTMLElement {
+  const option = screen
+    .getAllByRole("option")
+    .find((el) => el.textContent === name);
+  if (!option) {
+    throw new Error(`No option for column ${name}`);
+  }
+  return option;
+}
+
+function getSearchInput() {
+  return screen.getByPlaceholderText("Search columns...");
+}
+
+describe("ColumnVisibilityDropdown", () => {
+  it("renders user columns and excludes select/index/nameless columns", () => {
+    renderAndOpen();
+    expect(screen.getByText("customer_name")).toBeInTheDocument();
+    expect(screen.getByText("cust_age")).toBeInTheDocument();
+    expect(screen.getByText("order_total")).toBeInTheDocument();
+    expect(screen.queryByText(SELECT_COLUMN_ID)).not.toBeInTheDocument();
+    expect(screen.queryByText(INDEX_COLUMN_NAME)).not.toBeInTheDocument();
+    expect(screen.queryByText("__m_column__0")).not.toBeInTheDocument();
+  });
+
+  it("lists hidden columns before shown columns", () => {
+    renderAndOpen({ initiallyHidden: ["cust_age"] });
+    expect(getOptionTexts()).toEqual([
+      "Show all",
+      "cust_age",
+      "customer_name",
+      "order_total",
+    ]);
+  });
+
+  it("toggling a hidden column flips the icon without moving the row", () => {
+    renderAndOpen({ initiallyHidden: ["cust_age"] });
+    expect(
+      getColumnOption("cust_age").querySelector(".lucide-eye-off"),
+    ).not.toBeNull();
+
+    fireEvent.click(getColumnOption("cust_age"));
+
+    expect(getOptionTexts()).toEqual([
+      "Show all",
+      "cust_age",
+      "customer_name",
+      "order_total",
+    ]);
+    expect(
+      getColumnOption("cust_age").querySelector(".lucide-eye-off"),
+    ).toBeNull();
+  });
+
+  it("re-sorts on reopen after a toggle", () => {
+    renderAndOpen({ initiallyHidden: ["cust_age"] });
+    // Hide customer_name: it stays in the shown section until reopen.
+    fireEvent.click(getColumnOption("customer_name"));
+    expect(getOptionTexts()).toEqual([
+      "Show all",
+      "cust_age",
+      "customer_name",
+      "order_total",
+    ]);
+
+    const trigger = screen.getByTestId("column-visibility-trigger");
+    fireEvent.click(trigger);
+    fireEvent.click(trigger);
+
+    // Reopen sorts both hidden columns first, preserving table order.
+    expect(getOptionTexts()).toEqual([
+      "Show all",
+      "customer_name",
+      "cust_age",
+      "order_total",
+    ]);
+  });
+
+  it("filters columns with smartMatch", () => {
+    renderAndOpen();
+    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("shows 'No results.' when nothing matches", () => {
+    renderAndOpen();
+    fireEvent.change(getSearchInput(), { target: { value: "xyz" } });
+    expect(screen.getByText("No results.")).toBeInTheDocument();
+    expect(screen.queryByText("customer_name")).not.toBeInTheDocument();
+  });
+
+  it("disables 'Show all' when no columns are hidden", () => {
+    renderAndOpen();
+    expect(getColumnOption("Show all")).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+  });
+
+  it("'Show all' restores hidden columns", () => {
+    renderAndOpen({ initiallyHidden: ["cust_age", "order_total"] });
+    fireEvent.click(getColumnOption("Show all"));
+
+    expect(
+      getColumnOption("cust_age").querySelector(".lucide-eye-off"),
+    ).toBeNull();
+    expect(
+      getColumnOption("order_total").querySelector(".lucide-eye-off"),
+    ).toBeNull();
+    expect(getColumnOption("Show all")).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+  });
+
+  it("hides and shows matching columns via bulk actions while searching", () => {
+    renderAndOpen();
+    fireEvent.change(getSearchInput(), { target: { value: "cust" } });
+    expect(screen.queryByText(/Show all/)).not.toBeInTheDocument();
+
+    fireEvent.click(getColumnOption("Hide 2 matching"));
+    expect(
+      getColumnOption("customer_name").querySelector(".lucide-eye-off"),
+    ).not.toBeNull();
+    expect(
+      getColumnOption("cust_age").querySelector(".lucide-eye-off"),
+    ).not.toBeNull();
+    expect(screen.queryByText(/Hide \d+ matching/)).not.toBeInTheDocument();
+
+    fireEvent.click(getColumnOption("Show 2 matching"));
+    expect(
+      getColumnOption("customer_name").querySelector(".lucide-eye-off"),
+    ).toBeNull();
+    expect(screen.queryByText(/Show \d+ matching/)).not.toBeInTheDocument();
+  });
+
+  it("offers both bulk actions when matches are mixed", () => {
+    renderAndOpen({ initiallyHidden: ["cust_age"] });
+    fireEvent.change(getSearchInput(), { target: { value: "cust" } });
+    expect(screen.getByText(/Hide 1 matching/)).toBeInTheDocument();
+    expect(screen.getByText(/Show 1 matching/)).toBeInTheDocument();
+  });
+
+  it("renders non-hideable columns disabled and without an eye toggle", () => {
+    renderAndOpen({ nonHideable: ["customer_name"] });
+    const option = getColumnOption("customer_name");
+    expect(option).toHaveAttribute("aria-disabled", "true");
+    expect(option.querySelector(".lucide-eye")).toBeNull();
+    expect(option.querySelector(".lucide-eye-off")).toBeNull();
+  });
+});

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

@@ -5,8 +5,8 @@ import type {
   RowSelectionState,
   SortingState,
 } from "@tanstack/react-table";
-import { fireEvent, render, screen, within } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+import { act, fireEvent, render, screen, within } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { DataTable } from "../data-table";
 
@@ -16,6 +16,12 @@ interface TestData {
 }
 
 describe("DataTable", () => {
+  // Restore real timers unconditionally so a failed assertion in a
+  // fake-timer test can't leak fake timers into later tests.
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   it("should maintain selection state when remounted", () => {
     const mockOnRowSelectionChange = vi.fn();
     const testData: TestData[] = [
@@ -63,17 +69,15 @@ describe("DataTable", () => {
     expect(commonProps.rowSelection).toEqual(initialRowSelection);
   });
 
-  it("applies hoverTemplate to the row title using row values", () => {
+  it("shows the hoverTemplate text as a styled tooltip on hover", async () => {
+    vi.useFakeTimers();
     interface RowData {
       id: number;
       first: string;
       last: string;
     }
 
-    const testData: RowData[] = [
-      { id: 1, first: "Michael", last: "Scott" },
-      { id: 2, first: "Jim", last: "Halpert" },
-    ];
+    const testData: RowData[] = [{ id: 1, first: "Michael", last: "Scott" }];
 
     const columns: ColumnDef<RowData>[] = [
       { accessorKey: "first", header: "First" },
@@ -86,7 +90,7 @@ describe("DataTable", () => {
           data={testData}
           columns={columns}
           selection={null}
-          totalRows={2}
+          totalRows={1}
           totalColumns={2}
           pagination={false}
           hoverTemplate={"{{first}} {{last}}"}
@@ -94,11 +98,149 @@ describe("DataTable", () => {
       </TooltipProvider>,
     );
 
-    // Grab all rows and assert title attribute computed from template
     const rows = screen.getAllByRole("row");
-    // The first row is header; subsequent rows correspond to data
-    expect(rows[1]).toHaveAttribute("title", "Michael Scott");
-    expect(rows[2]).toHaveAttribute("title", "Jim Halpert");
+    // Native title is gone; hover text now comes from the styled tooltip.
+    expect(rows[1]).not.toHaveAttribute("title");
+
+    const cell = within(rows[1]).getAllByRole("cell")[0];
+    fireEvent.mouseOver(cell, { buttons: 0 });
+    act(() => {
+      vi.advanceTimersByTime(400);
+    });
+
+    // Radix renders the content twice (visible + a11y-hidden), so match all.
+    expect(screen.getAllByText("Michael Scott").length).toBeGreaterThan(0);
+  });
+
+  it("shows per-cell hover text from cellHoverTexts on hover", () => {
+    vi.useFakeTimers();
+    const testData: TestData[] = [{ id: 1, name: "Test 1" }];
+    const columns: ColumnDef<TestData>[] = [
+      { id: "name", accessorKey: "name", header: "Name" },
+    ];
+
+    render(
+      <TooltipProvider>
+        <DataTable
+          data={testData}
+          columns={columns}
+          selection={null}
+          totalRows={1}
+          totalColumns={1}
+          pagination={false}
+          cellHoverTexts={{ "0": { name: "per-cell tip" } }}
+        />
+      </TooltipProvider>,
+    );
+
+    const cell = within(screen.getAllByRole("row")[1]).getByRole("cell");
+    fireEvent.mouseOver(cell, { buttons: 0 });
+    act(() => {
+      vi.advanceTimersByTime(400);
+    });
+
+    expect(screen.getAllByText("per-cell tip").length).toBeGreaterThan(0);
+  });
+
+  it("links the focused cell to the tooltip content for assistive tech", () => {
+    const testData: TestData[] = [{ id: 1, name: "Test 1" }];
+    const columns: ColumnDef<TestData>[] = [
+      { id: "name", accessorKey: "name", header: "Name" },
+    ];
+
+    render(
+      <TooltipProvider>
+        <DataTable
+          data={testData}
+          columns={columns}
+          selection={null}
+          totalRows={1}
+          totalColumns={1}
+          pagination={false}
+          cellHoverTexts={{ "0": { name: "focus tip" } }}
+        />
+      </TooltipProvider>,
+    );
+
+    const cell = within(screen.getAllByRole("row")[1]).getByRole("cell");
+    fireEvent.focus(cell);
+
+    const describedBy = cell.getAttribute("aria-describedby");
+    expect(describedBy).toBeTruthy();
+    expect(document.getElementById(describedBy as string)).toHaveTextContent(
+      "focus tip",
+    );
+
+    fireEvent.blur(cell);
+    expect(cell).not.toHaveAttribute("aria-describedby");
+  });
+
+  it("does not show a tooltip on pointer-induced focus", () => {
+    const testData: TestData[] = [{ id: 1, name: "Test 1" }];
+    const columns: ColumnDef<TestData>[] = [
+      { id: "name", accessorKey: "name", header: "Name" },
+    ];
+
+    render(
+      <TooltipProvider>
+        <DataTable
+          data={testData}
+          columns={columns}
+          selection={null}
+          totalRows={1}
+          totalColumns={1}
+          pagination={false}
+          cellHoverTexts={{ "0": { name: "click tip" } }}
+        />
+      </TooltipProvider>,
+    );
+
+    const cell = within(screen.getAllByRole("row")[1]).getByRole("cell");
+    // A click focuses the cell; the resulting focus must not show a tooltip.
+    fireEvent.mouseDown(cell);
+    fireEvent.focus(cell);
+
+    expect(cell).not.toHaveAttribute("aria-describedby");
+    expect(screen.queryByText("click tip")).toBeNull();
+  });
+
+  it("does not let a pending hover timer overwrite a focus tooltip", () => {
+    vi.useFakeTimers();
+    interface RowData {
+      id: number;
+      a: string;
+      b: string;
+    }
+    const testData: RowData[] = [{ id: 1, a: "a", b: "b" }];
+    const columns: ColumnDef<RowData>[] = [
+      { id: "a", accessorKey: "a", header: "A" },
+      { id: "b", accessorKey: "b", header: "B" },
+    ];
+
+    render(
+      <TooltipProvider>
+        <DataTable
+          data={testData}
+          columns={columns}
+          selection={null}
+          totalRows={1}
+          totalColumns={2}
+          pagination={false}
+          cellHoverTexts={{ "0": { a: "hover A", b: "focus B" } }}
+        />
+      </TooltipProvider>,
+    );
+
+    const cells = within(screen.getAllByRole("row")[1]).getAllByRole("cell");
+    // Start a pending hover-show on cell A, then focus cell B before it fires.
+    fireEvent.mouseOver(cells[0], { buttons: 0 });
+    fireEvent.focus(cells[1]);
+    act(() => {
+      vi.advanceTimersByTime(400);
+    });
+
+    expect(screen.getAllByText("focus B").length).toBeGreaterThan(0);
+    expect(screen.queryByText("hover A")).toBeNull();
   });
 
   it("does not virtualize small datasets without pagination", () => {

package/src/components/data-table/column-visibility-dropdown.tsx

@@ -0,0 +1,204 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+"use no memo";
+
+// tanstack/table is not compatible with React compiler
+// https://github.com/TanStack/table/issues/5567
+
+import type { Table } from "@tanstack/react-table";
+import { Columns3Icon, EyeIcon, EyeOffIcon } from "lucide-react";
+import React from "react";
+import { ColumnName } from "@/components/datasources/components";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { type BulkAction, useSelectList } from "@/components/ui/select-core";
+import type { DataType } from "@/core/kernel/messages";
+import { cn } from "@/utils/cn";
+import { Events } from "@/utils/events";
+import { smartMatchFilter } from "@/utils/smartMatch";
+import { NAMELESS_COLUMN_PREFIX } from "./columns";
+import { INDEX_COLUMN_NAME, SELECT_COLUMN_ID } from "./types";
+
+function getUserColumns<TData>(table: Table<TData>) {
+  return table
+    .getAllLeafColumns()
+    .filter(
+      (column) =>
+        column.id !== SELECT_COLUMN_ID &&
+        column.id !== INDEX_COLUMN_NAME &&
+        !column.id.startsWith(NAMELESS_COLUMN_PREFIX),
+    );
+}
+
+export const ColumnVisibilityDropdown = <TData,>({
+  table,
+}: {
+  table: Table<TData>;
+}) => {
+  const userColumns = getUserColumns(table);
+  const options = userColumns.map((column) => ({
+    value: column.id,
+    label: column.id,
+    disabled: !column.getCanHide(),
+    data: { dataType: column.columnDef.meta?.dataType },
+  }));
+  // Modeled as a select list over hidden columns: "selected" means hidden, so
+  // the hook's pinning floats hidden columns to the top and freezes that order
+  // while the menu is open.
+  const hiddenIds = userColumns
+    .filter((column) => !column.getIsVisible())
+    .map((column) => column.id);
+
+  const applyHidden = (next: string[] | string | null) => {
+    const hidden = new Set(Array.isArray(next) ? next : []);
+    table.setColumnVisibility((previous) => ({
+      ...previous,
+      ...Object.fromEntries(
+        userColumns.map((column) => [column.id, !hidden.has(column.id)]),
+      ),
+    }));
+  };
+
+  const list = useSelectList<string>({
+    options,
+    value: hiddenIds,
+    onChange: applyHidden,
+    multiple: true,
+    filterFn: smartMatchFilter,
+    pinSelected: true,
+  });
+  // With selection modeling hidden columns, select-matching hides the visible
+  // matches and deselect-matching shows the hidden ones.
+  const matchingActions = list.bulkActions.filter(
+    (
+      action,
+    ): action is Extract<
+      BulkAction<string>,
+      { kind: "select-matching" | "deselect-matching" }
+    > =>
+      action.kind === "select-matching" || action.kind === "deselect-matching",
+  );
+
+  return (
+    <Popover open={list.open} onOpenChange={list.setOpen}>
+      <PopoverTrigger asChild={true}>
+        <Button
+          variant="text"
+          size="xs"
+          data-testid="column-visibility-trigger"
+          onMouseDown={Events.preventFocus}
+          className={cn(
+            "print:hidden text-xs gap-1",
+            list.open ? "text-primary" : "text-muted-foreground",
+          )}
+        >
+          <Columns3Icon className="w-3.5 h-3.5" />
+          Columns
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-64 p-0" align="end">
+        <Command shouldFilter={false}>
+          <CommandInput
+            placeholder="Search columns..."
+            value={list.searchQuery}
+            onValueChange={list.setSearchQuery}
+          />
+          <CommandList>
+            <CommandEmpty>No results.</CommandEmpty>
+            {list.searchQuery === "" ? (
+              <>
+                <CommandItem
+                  value="__show_all__"
+                  disabled={hiddenIds.length === 0}
+                  onSelect={() => applyHidden([])}
+                  className="cursor-pointer"
+                >
+                  <EyeIcon className="w-3 h-3 mr-1.5" />
+                  Show all
+                </CommandItem>
+                <CommandSeparator />
+              </>
+            ) : (
+              matchingActions.length > 0 && (
+                <>
+                  {matchingActions.map((action) => (
+                    <CommandItem
+                      key={action.kind}
+                      value={`__bulk_${action.kind}`}
+                      onSelect={action.run}
+                      className="cursor-pointer"
+                    >
+                      {action.kind === "select-matching" ? (
+                        <EyeOffIcon className="w-3 h-3 mr-1.5" />
+                      ) : (
+                        <EyeIcon className="w-3 h-3 mr-1.5" />
+                      )}
+                      {action.kind === "select-matching" ? "Hide" : "Show"}{" "}
+                      {action.items.length} matching
+                    </CommandItem>
+                  ))}
+                  <CommandSeparator />
+                </>
+              )
+            )}
+            {list.visibleOptions.map((option, index) => {
+              const hidden = list.isChecked(option.value);
+              const { dataType } = option.data as {
+                dataType: DataType | undefined;
+              };
+              const isSectionBoundary =
+                index === list.pinnedCount &&
+                list.pinnedCount > 0 &&
+                list.pinnedCount < list.visibleOptions.length;
+              return (
+                <React.Fragment key={option.value}>
+                  {isSectionBoundary && <CommandSeparator />}
+                  <CommandItem
+                    value={option.value}
+                    disabled={option.disabled}
+                    onSelect={() => list.toggle(option.value)}
+                    className="flex items-center gap-1.5 cursor-pointer"
+                  >
+                    {dataType === undefined ? (
+                      <span>{option.label}</span>
+                    ) : (
+                      <ColumnName
+                        columnName={option.label}
+                        dataType={dataType}
+                      />
+                    )}
+                    {!option.disabled && (
+                      <span
+                        className={cn(
+                          "ml-auto",
+                          hidden ? "text-primary" : "text-muted-foreground",
+                        )}
+                      >
+                        {hidden ? (
+                          <EyeOffIcon className="w-3 h-3" />
+                        ) : (
+                          <EyeIcon className="w-3 h-3" />
+                        )}
+                      </span>
+                    )}
+                  </CommandItem>
+                </React.Fragment>
+              );
+            })}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};

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

@@ -356,6 +356,7 @@ const DataTableInternal = <TData,>({
             className={cn(className || "rounded-md border overflow-hidden")}
           >
             <TableTopBar
+              table={table}
               enableSearch={enableSearch}
               searchQuery={searchQuery}
               onSearchQueryChange={onSearchQueryChange}
@@ -413,7 +414,6 @@ const DataTableInternal = <TData,>({
               getRowIds={getRowIds}
               showPageSizeSelector={showPageSizeSelector}
               tableLoading={reloading}
-              togglePanel={togglePanel}
             />
           </div>
         </CellSelectionProvider>