@marimo-team/frontend 0.23.10-dev29 → 0.23.10-dev30

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/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>