@marimo-team/frontend 0.23.10-dev3 → 0.23.10-dev31

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>

package/src/components/data-table/filter-by-values-picker.tsx

@@ -7,6 +7,8 @@ import { useMemo, useState } from "react";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { ErrorBanner } from "@/plugins/impl/common/error-banner";
 import type { CalculateTopKRows } from "@/plugins/impl/DataTablePlugin";
+import type { Option } from "@/components/ui/select-core";
+import { useSelectList } from "@/components/ui/select-core";
 import { Logger } from "@/utils/Logger";
 import { Sets } from "@/utils/sets";
 import { smartMatch } from "@/utils/smartMatch";
@@ -23,7 +25,7 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import { SentinelCell } from "./sentinel-cell";
 import { detectSentinel, stringifyUnknownValue } from "./utils";
-import { CompactChipRow } from "./value-chips";
+import { CompactChipRow } from "@/components/ui/value-chips";
 
 const TOP_K_ROWS = 30;
 
@@ -101,8 +103,6 @@ export const FilterByValuesList = <TData, TValue>({
   onChange,
   creatable = false,
 }: FilterByValuesListProps<TData, TValue>) => {
-  const [query, setQuery] = useState<string>("");
-
   const { data, isPending, error } = useAsyncData(async () => {
     if (!calculateTopKRows) {
       return null;
@@ -111,27 +111,49 @@ export const FilterByValuesList = <TData, TValue>({
     return res.data;
   }, [calculateTopKRows, column.id]);
 
-  const filteredData = useMemo(() => {
+  const options = useMemo<Array<Option<unknown>>>(() => {
     if (!data) {
       return [];
     }
     try {
-      // try to do includes and also smart match for prefixes
-      return data.filter(([value, _count]) => {
-        if (value === undefined) {
-          return false;
-        }
-        const str = String(value);
-        return (
-          smartMatch(query, str) ||
-          str.toLowerCase().includes(query.toLowerCase())
-        );
-      });
+      return data
+        .filter(([value]) => value !== undefined)
+        .map(([value, count]) => ({
+          value,
+          label: String(value),
+          data: { count },
+        }));
     } catch (error_) {
-      Logger.error("Error filtering data", error_);
+      Logger.error("Error building filter options", error_);
       return [];
     }
-  }, [data, query]);
+  }, [data]);
+
+  const list = useSelectList<unknown>({
+    options,
+    value: [...chosenValues],
+    onChange: (next) => onChange(next as unknown[]),
+    multiple: true,
+    filterFn: (label, q) =>
+      smartMatch(q, label) || label.toLowerCase().includes(q.toLowerCase())
+        ? 1
+        : 0,
+  });
+
+  const query = list.searchQuery;
+  const setQuery = list.setSearchQuery;
+
+  const filteredData = useMemo<Array<[unknown, number | undefined]>>(
+    () =>
+      list.visibleOptions.map(
+        (o) =>
+          [o.value, (o.data as { count: number }).count] as [
+            unknown,
+            number | undefined,
+          ],
+      ),
+    [list.visibleOptions],
+  );
 
   // Surface chosen values that aren't in the top-K so they stay visible/uncheckable.
   // Count is undefined for these rows; the cell renders an em-dash.

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

@@ -21,7 +21,7 @@ import { AddFilterButton } from "./add-filter-button";
 import { FilterPillEditor } from "./filter-pill-editor";
 import { type ColumnFilterValue, formatValue, type Snapshot } from "./filters";
 import { extractTimezone } from "./types";
-import { ChipWithComma, CompactChipRow } from "./value-chips";
+import { ChipWithComma, CompactChipRow } from "@/components/ui/value-chips";
 
 interface Props<TData> {
   filters: ColumnFiltersState | undefined;

package/src/components/data-table/hover-tooltip/__tests__/content.test.ts

@@ -0,0 +1,60 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { Cell } from "@tanstack/react-table";
+import { describe, expect, it } from "vitest";
+import { applyHoverTemplate, computeCellTooltipContent } from "../content";
+
+function fakeCell(columnId: string, value: unknown, hoverTitle?: string) {
+  return {
+    column: { id: columnId },
+    getValue: () => value,
+    getHoverTitle: () => hoverTitle,
+  } as unknown as Cell<unknown, unknown>;
+}
+
+describe("applyHoverTemplate", () => {
+  it("substitutes column placeholders", () => {
+    const cells = [fakeCell("first", "Michael"), fakeCell("last", "Scott")];
+    expect(applyHoverTemplate("{{first}} {{last}}", cells)).toBe(
+      "Michael Scott",
+    );
+  });
+
+  it("renders nulls as empty strings", () => {
+    const cells = [fakeCell("a", null)];
+    expect(applyHoverTemplate("[{{a}}]", cells)).toBe("[]");
+  });
+
+  it("leaves unknown placeholders intact", () => {
+    expect(applyHoverTemplate("{{missing}}", [fakeCell("a", 1)])).toBe(
+      "{{missing}}",
+    );
+  });
+});
+
+describe("computeCellTooltipContent", () => {
+  it("prefers cell-level hover title", () => {
+    const cell = fakeCell("a", 1, "cell text");
+    expect(computeCellTooltipContent(cell, "{{a}}")).toBe("cell text");
+  });
+
+  it("falls back to row template when no cell title", () => {
+    const cell = {
+      column: { id: "first" },
+      getValue: () => "X",
+      getHoverTitle: () => undefined,
+      row: {
+        getVisibleCells: () => [
+          fakeCell("first", "Jim"),
+          fakeCell("last", "Halpert"),
+        ],
+      },
+    } as unknown as Cell<unknown, unknown>;
+    expect(computeCellTooltipContent(cell, "{{first}} {{last}}")).toBe(
+      "Jim Halpert",
+    );
+  });
+
+  it("returns undefined with no title and no template", () => {
+    expect(computeCellTooltipContent(fakeCell("a", 1), null)).toBeUndefined();
+  });
+});

package/src/components/data-table/hover-tooltip/content.ts

@@ -0,0 +1,44 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { Cell, RowData } from "@tanstack/react-table";
+import type { ReactNode } from "react";
+import { stringifyUnknownValue } from "../utils";
+
+export function applyHoverTemplate<TData extends RowData>(
+  template: string,
+  cells: Cell<TData, unknown>[],
+): string {
+  const variableRegex = /{{(\w+)}}/g;
+  const idToValue = new Map<string, string>();
+  for (const c of cells) {
+    const s = stringifyUnknownValue({
+      value: c.getValue(),
+      nullAsEmptyString: true,
+    });
+    idToValue.set(c.column.id, s);
+  }
+  return template.replaceAll(variableRegex, (_substr, varName: string) => {
+    const val = idToValue.get(varName);
+    return val === undefined ? `{{${varName}}}` : val;
+  });
+}
+
+/**
+ * Resolve the tooltip content for a hovered cell.
+ *
+ * Cell-level (callable `hover_template`) takes precedence; otherwise the
+ * row-level string template is rendered against the row's visible cells.
+ * Returns `undefined` when there is nothing to show.
+ */
+export function computeCellTooltipContent<TData extends RowData>(
+  cell: Cell<TData, unknown>,
+  hoverTemplate: string | null,
+): ReactNode {
+  const cellTitle = cell.getHoverTitle?.();
+  if (cellTitle != null && cellTitle !== "") {
+    return cellTitle;
+  }
+  if (hoverTemplate) {
+    return applyHoverTemplate(hoverTemplate, cell.row.getVisibleCells());
+  }
+  return undefined;
+}

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

@@ -0,0 +1,55 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import {
+  TooltipContent,
+  TooltipPortal,
+  TooltipRoot,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import type { HoverTooltipState } from "./use-table-hover-tooltip";
+
+interface HoverTooltipProps {
+  state: HoverTooltipState | null;
+  contentId: string;
+  onClose: () => void;
+}
+
+/**
+ * A single radix tooltip whose anchor is repositioned to the hovered cell.
+ * Rendering one instance per table (instead of one per cell) keeps the cost
+ * constant regardless of how many cells are on screen.
+ */
+export const HoverTooltip = ({
+  state,
+  contentId,
+  onClose,
+}: HoverTooltipProps) => {
+  return (
+    <TooltipRoot
+      open={state != null}
+      onOpenChange={(open) => {
+        if (!open) {
+          onClose();
+        }
+      }}
+      delayDuration={0}
+      disableHoverableContent={true}
+    >
+      <TooltipTrigger asChild={true}>
+        <div
+          aria-hidden={true}
+          style={{
+            position: "fixed",
+            top: state?.rect.top ?? 0,
+            left: state?.rect.left ?? 0,
+            width: state?.rect.width ?? 0,
+            height: state?.rect.height ?? 0,
+            pointerEvents: "none",
+          }}
+        />
+      </TooltipTrigger>
+      <TooltipPortal>
+        <TooltipContent id={contentId}>{state?.content}</TooltipContent>
+      </TooltipPortal>
+    </TooltipRoot>
+  );
+};