@marimo-team/frontend 0.23.9-dev4 → 0.23.9-dev41

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 });
+  });
+});

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

@@ -1,6 +1,15 @@
 /* Copyright 2026 Marimo. All rights reserved. */
+"use no memo";
 
-import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
+// tanstack/table is not compatible with React compiler
+// https://github.com/TanStack/table/issues/5567
+
+import {
+  ChevronDownIcon,
+  ChevronRightIcon,
+  EyeIcon,
+  EyeOffIcon,
+} from "lucide-react";
 import { useState } from "react";
 import { useLocale } from "react-aria";
 import {
@@ -38,22 +47,28 @@ import {
   INDEX_COLUMN_NAME,
   SELECT_COLUMN_ID,
 } from "../types";
+import { smartMatch } from "@/utils/smartMatch";
+import type { Column, Table } from "@tanstack/react-table";
+import { cn } from "@/utils/cn";
+import { getColumnCountForDisplay } from "../hooks/use-column-visibility";
 
-interface ColumnExplorerPanelProps {
+interface ColumnExplorerPanelProps<TData> {
   previewColumn: PreviewColumn;
   fieldTypes: FieldTypesWithExternalType | undefined | null;
   totalRows: number | "too_many";
   totalColumns: number;
   tableId: string;
+  table: Table<TData>;
 }
 
-export const ColumnExplorerPanel = ({
+export function ColumnExplorerPanel<TData>({
   previewColumn,
   fieldTypes,
   totalRows,
   totalColumns,
   tableId,
-}: ColumnExplorerPanelProps) => {
+  table,
+}: ColumnExplorerPanelProps<TData>) {
   const [searchValue, setSearchValue] = useState("");
   const { locale } = useLocale();
   const columns = fieldTypes?.filter(([columnName]) => {
@@ -68,19 +83,43 @@ export const ColumnExplorerPanel = ({
   });
 
   const filteredColumns = columns?.filter(([columnName]) => {
-    return columnName.toLowerCase().includes(searchValue.toLowerCase());
+    return smartMatch(searchValue, columnName);
+  });
+
+  const {
+    totalColumns: effectiveTotalColumns,
+    hiddenColumns: hiddenColumnCount,
+  } = getColumnCountForDisplay(table, totalColumns);
+
+  const { rowsAndColumns, hiddenSuffix } = prettifyRowColumnCount({
+    numRows: totalRows,
+    totalColumns: effectiveTotalColumns,
+    locale,
+    hiddenColumns: hiddenColumnCount,
   });
 
   return (
     <div className="mb-3">
-      <span className="text-xs font-semibold ml-2 flex">
-        {prettifyRowColumnCount({ numRows: totalRows, totalColumns, locale })}
+      <div className="text-xs font-semibold ml-2 flex items-center gap-1">
+        {rowsAndColumns}
+        {hiddenColumnCount > 0 && <span>{hiddenSuffix}</span>}
         <CopyClipboardIcon
           tooltip="Copy column names"
           value={columns?.map(([columnName]) => columnName).join(",\n") || ""}
-          className="h-3 w-3 ml-1 mt-0.5"
+          className="h-3 w-3"
         />
-      </span>
+        {hiddenColumnCount > 0 && (
+          <Button
+            type="button"
+            variant="link"
+            size="xs"
+            className="h-auto p-0"
+            onClick={() => table.resetColumnVisibility(true)}
+          >
+            Unhide all
+          </Button>
+        )}
+      </div>
       <Command className="h-5/6 bg-background" shouldFilter={false}>
         <CommandInput
           placeholder="Search columns..."
@@ -91,11 +130,14 @@ export const ColumnExplorerPanel = ({
           <CommandEmpty>No results.</CommandEmpty>
           {filteredColumns?.map(
             ([columnName, [dataType, externalType]], index) => {
+              const column = table.getColumn(columnName);
+
               return (
                 <ColumnItem
                   // Tables may have the same column names, hence we use tableId to make it unique
                   key={`${tableId}-${columnName}`}
                   columnName={columnName}
+                  column={column}
                   dataType={dataType}
                   externalType={externalType}
                   previewColumn={previewColumn}
@@ -108,21 +150,23 @@ export const ColumnExplorerPanel = ({
       </Command>
     </div>
   );
-};
+}
 
-const ColumnItem = ({
+function ColumnItem<TData>({
   columnName,
+  column,
   dataType,
   externalType,
   previewColumn,
   defaultExpanded = false,
 }: {
   columnName: string;
+  column?: Column<TData, unknown>;
   dataType: DataType;
   externalType: string;
   previewColumn: PreviewColumn;
   defaultExpanded?: boolean;
-}) => {
+}) {
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
 
   const columnText = (
@@ -142,20 +186,48 @@ const ColumnItem = ({
           <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}>
-            <Button
-              variant="text"
-              size="icon"
-              className="group-hover:opacity-100 opacity-0 hover:bg-muted text-muted-foreground hover:text-foreground"
+        <div className="ml-auto flex items-center gap-0.5">
+          <CopyClipboardIcon
+            tooltip="Copy column name"
+            value={columnName}
+            className="h-3 w-3"
+            buttonClassName={cn(
+              "inline-flex items-center justify-center rounded-md h-6 w-6",
+              "group-hover:opacity-100 opacity-0 hover:bg-muted text-muted-foreground hover:text-primary",
+            )}
+          />
+          {column?.getCanHide() && (
+            <Tooltip
+              content={column.getIsVisible() ? "Hide column" : "Show column"}
+              delayDuration={400}
             >
-              <CopyClipboardIcon
-                tooltip={false}
-                value={columnName}
-                className="h-3 w-3"
-              />
-            </Button>
-          </Tooltip>
+              <Button
+                type="button"
+                variant="text"
+                size="icon"
+                aria-label={
+                  column.getIsVisible() ? "Hide column" : "Show column"
+                }
+                className={cn(
+                  "hover:bg-muted text-muted-foreground hover:text-primary",
+                  column.getIsVisible()
+                    ? "group-hover:opacity-100 opacity-0"
+                    : "opacity-100",
+                )}
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  column.toggleVisibility(!column.getIsVisible());
+                }}
+              >
+                {column.getIsVisible() ? (
+                  <EyeIcon className="h-3 w-3" strokeWidth={2.5} />
+                ) : (
+                  <EyeOffIcon className="h-3 w-3" strokeWidth={2.5} />
+                )}
+              </Button>
+            </Tooltip>
+          )}
           <span className="text-xs text-muted-foreground">{externalType}</span>
         </div>
       </CommandItem>
@@ -170,7 +242,7 @@ const ColumnItem = ({
       )}
     </>
   );
-};
+}
 
 const ColumnPreview = ({
   previewColumn,

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

@@ -17,13 +17,14 @@ import { useFilterEditor } from "./filter-editor-context";
 import { EDITABLE_FILTER_TYPES, isMembershipFilterType } from "./filters";
 import {
   ClearFilterMenuItem,
-  renderColumnPinning,
-  renderColumnWrapping,
-  renderCopyColumn,
-  renderDataType,
-  renderFormatOptions,
+  ColumnPinning,
+  ColumnWrapping,
+  CopyColumn,
+  DataType,
+  FormatOptions,
+  HideColumn,
   renderSortIcon,
-  renderSorts,
+  Sorts,
 } from "./header-items";
 
 interface DataTableColumnHeaderProps<
@@ -35,6 +36,11 @@ interface DataTableColumnHeaderProps<
   subheader?: React.ReactNode;
   justify?: "left" | "center" | "right";
   calculateTopKRows?: CalculateTopKRows;
+  /**
+   * Optional: only used to surface multi-column sort actions ("Clear all
+   * sorts"). Omitted by call sites that define their header inside column
+   * definitions, where the table instance isn't yet available.
+   */
   table?: Table<TData>;
 }
 
@@ -118,12 +124,13 @@ export const DataTableColumnHeader = <TData, TValue>({
             </button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="start">
-            {renderDataType(column)}
-            {renderSorts(column, table)}
-            {renderCopyColumn(column)}
-            {renderColumnPinning(column)}
-            {renderColumnWrapping(column)}
-            {renderFormatOptions(column, locale)}
+            <DataType column={column} />
+            <Sorts column={column} table={table} />
+            <CopyColumn column={column} />
+            <ColumnPinning column={column} />
+            <ColumnWrapping column={column} />
+            <FormatOptions column={column} locale={locale} />
+            <HideColumn column={column} />
             {canEditFilter && <DropdownMenuSeparator />}
             {canEditFilter && (
               <DropdownMenuItem

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

@@ -44,9 +44,10 @@ import { detectSentinel, splitLeadingTrailingWhitespace } from "./utils";
 import { uniformSample } from "./uniformSample";
 import { MarkdownUrlDetector, UrlDetector } from "./url-detector";
 
+export const NAMELESS_COLUMN_PREFIX = "__m_column__";
 // Artificial limit to display long strings
+export const SELECT_ID = "__select__";
 const MAX_STRING_LENGTH = 50;
-const SELECT_ID = "__select__";
 
 function inferDataType(value: unknown): [type: DataType, displayType: string] {
   if (typeof value === "string") {
@@ -106,8 +107,6 @@ export function inferFieldTypes<T>(items: T[]): FieldTypesWithExternalType {
   return Objects.entries(fieldTypes);
 }
 
-export const NAMELESS_COLUMN_PREFIX = "__m_column__";
-
 export function generateColumns<T>({
   rowHeaders,
   selection,
@@ -192,7 +191,7 @@ export function generateColumns<T>({
       accessorFn: (row) => {
         return row[key as keyof T];
       },
-
+      enableHiding: !rowHeadersSet.has(key) && key !== "",
       header: ({ column, table }) => {
         const stats = chartSpecModel?.getColumnStats(key);
         const dtype = column.columnDef.meta?.dtype;