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

package/dist/{reveal-component-BdSVsJMP.js → reveal-component-BjnkUAZ9.js}

@@ -9,7 +9,7 @@ import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
 import { lt as kioskModeAtom } from "./html-to-image-UEH5lFDZ.js";
 import "./chunk-5FQGJX7Z-BNjes6Yx.js";
 import { u as createLucideIcon } from "./dist-Dk6PV_d3.js";
-import { $t as Expand, Qt as EyeOff, a as DEFAULT_SLIDE_TYPE, c as Slide, i as DEFAULT_DECK_TRANSITION, nn as Code, nt as PanelGroup, rt as PanelResizeHandle, s as SlideSidebar, t as useNotebookCodeAvailable, tt as Panel } from "./code-visibility-C_uXSW2l.js";
+import { a as DEFAULT_SLIDE_TYPE, c as Slide, ct as PanelResizeHandle, i as DEFAULT_DECK_TRANSITION, in as Expand, ot as Panel, rn as EyeOff, s as SlideSidebar, sn as Code, st as PanelGroup, t as useNotebookCodeAvailable } from "./code-visibility-wR7WSQ4c.js";
 import { J as useDebouncedCallback } from "./input-CMYy4hzj.js";
 import "./toDate-d8RCRrRd.js";
 import "./react-dom-BTJzcVJ9.js";
@@ -7245,38 +7245,38 @@ function _temp(e5) {
   };
 }
 var SubslideView = (e5) => {
-  let t = (0, import_compiler_runtime.c)(24), { subslide: n, resolveShowCode: r, isEditable: i, slideConfigs: a } = e5, o, s, c, l, u, f;
+  let t = (0, import_compiler_runtime.c)(24), { subslide: n, resolveShowCode: r, isEditable: i, slideConfigs: a } = e5, o, s, c, l, u, ro;
   if (t[0] !== i || t[1] !== r || t[2] !== a || t[3] !== n) {
-    let { slideLevel: e6, cumulativeByBlock: ro2 } = buildSubslideNotes(n, a);
+    let { slideLevel: e6, cumulativeByBlock: io2 } = buildSubslideNotes(n, a);
     s = e6;
     let p2 = n.blocks.some((e7) => e7.cells.some((e8) => r(e8.id)));
-    o = w, f = "h-full w-full overflow-auto flex", c = p2 ? "mo-slide-content flex flex-col gap-3" : "mo-slide-content", t[10] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (l = { margin: "auto 20px" }, t[10] = l) : l = t[10], u = n.blocks.map((e7, t2) => {
+    o = w, ro = "h-full w-full overflow-auto flex", c = p2 ? "mo-slide-content flex flex-col gap-3" : "mo-slide-content", t[10] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (l = { margin: "auto 20px" }, t[10] = l) : l = t[10], u = n.blocks.map((e7, t2) => {
       let n2 = e7.cells.map((e8) => r(e8.id) ? i ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SlideCellView, { cell: e8 }, e8.id) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SlideCellReadOnlyView, { cell: e8 }, e8.id) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slide, {
         cellId: e8.id,
         status: e8.status,
         output: e8.output
       }, e8.id));
       if (e7.isFragment) {
-        let e8 = ro2.get(t2);
+        let e8 = io2.get(t2);
         return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Bt, {
           as: "div",
           children: [n2, e8 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NotesAside, { text: e8 })]
         }, t2);
       }
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: n2 }, t2);
-    }), t[0] = i, t[1] = r, t[2] = a, t[3] = n, t[4] = o, t[5] = s, t[6] = c, t[7] = l, t[8] = u, t[9] = f;
-  } else o = t[4], s = t[5], c = t[6], l = t[7], u = t[8], f = t[9];
-  let ro;
-  t[11] !== c || t[12] !== l || t[13] !== u ? (ro = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+    }), t[0] = i, t[1] = r, t[2] = a, t[3] = n, t[4] = o, t[5] = s, t[6] = c, t[7] = l, t[8] = u, t[9] = ro;
+  } else o = t[4], s = t[5], c = t[6], l = t[7], u = t[8], ro = t[9];
+  let io;
+  t[11] !== c || t[12] !== l || t[13] !== u ? (io = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
     className: c,
     style: l,
     children: u
-  }), t[11] = c, t[12] = l, t[13] = u, t[14] = ro) : ro = t[14];
+  }), t[11] = c, t[12] = l, t[13] = u, t[14] = io) : io = t[14];
   let p;
-  t[15] !== f || t[16] !== ro ? (p = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-    className: f,
-    children: ro
-  }), t[15] = f, t[16] = ro, t[17] = p) : p = t[17];
+  t[15] !== ro || t[16] !== io ? (p = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+    className: ro,
+    children: io
+  }), t[15] = ro, t[16] = io, t[17] = p) : p = t[17];
   let ao;
   t[18] === s ? ao = t[19] : (ao = s && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NotesAside, { text: s }), t[18] = s, t[19] = ao);
   let oo;
@@ -7302,9 +7302,9 @@ var ParkedPreviewContent = (e5) => {
     status: n.status,
     output: n.output
   }), t[3] = n.id, t[4] = n.output, t[5] = n.status, t[6] = o) : o = t[6], o;
-}, reveal_component_default = ({ slideCells: e5, layout: o, setLayout: s, noOutputIds: l, activeIndex: ro, onSlideChange: io, mode: p, configWidth: fo, isEditable: po = false }) => {
+}, reveal_component_default = ({ slideCells: e5, layout: o, setLayout: s, noOutputIds: l, activeIndex: u, onSlideChange: f, mode: io, configWidth: fo, isEditable: po = false }) => {
   var _a2, _b2;
-  let yo = (0, import_react.useRef)(null), bo = (0, import_react.useRef)(null), { width: So, height: Co } = useSlideDimensions(yo), wo = useFullScreenElement() != null, To = useAtomValue(kioskModeAtom), Eo = (0, import_react.useMemo)(() => To ? [] : [ce], [To]), [Do, Oo] = (0, import_react.useState)(() => /* @__PURE__ */ new Set()), ko = useNotebookCodeAvailable(e5), Ao = !isIslands() && ko, jo = ro == null ? void 0 : e5[ro], Mo = jo ?? e5.at(0), { parkedPreviewCell: No, isHeldEdit: Po, isNoOutputPreview: Fo, heldEditCellId: Io, heldShowsCode: Lo, toggleHeldShowsCode: Ro } = useParkedPreview({
+  let yo = (0, import_react.useRef)(null), bo = (0, import_react.useRef)(null), { width: So, height: Co } = useSlideDimensions(yo), wo = useFullScreenElement() != null, To = useAtomValue(kioskModeAtom), Eo = (0, import_react.useMemo)(() => To ? [] : [ce], [To]), [Do, Oo] = (0, import_react.useState)(() => /* @__PURE__ */ new Set()), ko = useNotebookCodeAvailable(e5), Ao = !isIslands() && ko, jo = u == null ? void 0 : e5[u], Mo = jo ?? e5.at(0), { parkedPreviewCell: No, isHeldEdit: Po, isNoOutputPreview: Fo, heldEditCellId: Io, heldShowsCode: Lo, toggleHeldShowsCode: Ro } = useParkedPreview({
     activeCell: jo,
     slideConfigs: o.cells,
     noOutputIds: l
@@ -7350,7 +7350,7 @@ var ParkedPreviewContent = (e5) => {
     qo
   ]), Yo = useEvent_default((t) => {
     let n = resolveDeckNavigationTarget({
-      activeIndex: ro,
+      activeIndex: u,
       cells: e5,
       cellToTarget: Wo,
       getId: (e6) => e6.id
@@ -7361,7 +7361,7 @@ var ParkedPreviewContent = (e5) => {
     let e6 = bo.current;
     e6 != null && Yo(e6);
   }, [
-    ro,
+    u,
     Wo,
     e5,
     Yo
@@ -7391,14 +7391,14 @@ var ParkedPreviewContent = (e5) => {
     let e6 = bo.current;
     if (!e6) return;
     let t = resolveActiveCellIndex(Go, e6.getIndices());
-    t != null && (io == null ? void 0 : io(t));
+    t != null && (f == null ? void 0 : f(t));
   }), $o = useEvent_default((t) => {
-    if (!No || ro == null || Events.fromInput(t)) return;
+    if (!No || u == null || Events.fromInput(t)) return;
     let n = classifyNavKey(t);
     if (n === 0) return;
     t.preventDefault(), t.stopPropagation();
-    let i = ro + n;
-    i < 0 || i >= e5.length || (io == null ? void 0 : io(i));
+    let i = u + n;
+    i < 0 || i >= e5.length || (f == null ? void 0 : f(i));
   }), ns = useEvent_default(() => {
     Qo(), triggerResize(bo.current);
   });
@@ -7494,7 +7494,7 @@ var ParkedPreviewContent = (e5) => {
       ]
     })
   });
-  return p === "read" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+  return io === "read" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
     className: "flex-1 min-w-0 flex flex-row gap-3",
     children: os
   }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.10-dev29",
+  "version": "0.23.10-dev30",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

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

@@ -7,10 +7,6 @@ import type { GetRowIds } from "@/plugins/impl/DataTablePlugin";
 import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
 import { prettyNumber } from "@/utils/numbers";
-import {
-  PANEL_TYPES,
-  type PanelType,
-} from "../editor/chrome/panels/context-aware-panel/context-aware-panel";
 import { Button } from "../ui/button";
 import { toast } from "../ui/use-toast";
 import { getColumnCountForDisplay } from "./hooks/use-column-visibility";
@@ -27,7 +23,6 @@ interface TableBottomBarProps<TData> {
   getRowIds?: GetRowIds;
   showPageSizeSelector?: boolean;
   tableLoading?: boolean;
-  togglePanel?: (panelType: PanelType) => void;
   part?: string;
   className?: string;
 }
@@ -41,7 +36,6 @@ export const TableBottomBar = <TData,>({
   getRowIds,
   showPageSizeSelector,
   tableLoading,
-  togglePanel,
   part,
   className,
 }: TableBottomBarProps<TData>) => {
@@ -159,15 +153,7 @@ export const TableBottomBar = <TData,>({
     return (
       <span className="flex items-center gap-1">
         <span>{rowsAndColumns}</span>
-        {hiddenSuffix && (
-          <button
-            type="button"
-            className="text-xs underline-offset-2 hover:underline cursor-pointer"
-            onClick={() => togglePanel?.(PANEL_TYPES.COLUMN_EXPLORER)}
-          >
-            {hiddenSuffix}
-          </button>
-        )}
+        {hiddenSuffix && <span className="text-xs">{hiddenSuffix}</span>}
       </span>
     );
   };

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

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 "use no memo";
 
+import type { Table } from "@tanstack/react-table";
 import { useDebounce } from "@uidotdev/usehooks";
 import {
   ChartSplineIcon,
@@ -17,13 +18,15 @@ import {
 } from "../editor/chrome/panels/context-aware-panel/context-aware-panel";
 import { Spinner } from "../icons/spinner";
 import { Button } from "../ui/button";
+import { ColumnVisibilityDropdown } from "./column-visibility-dropdown";
 import { type ExportActionProps, ExportMenu } from "./export-actions";
 
 const NOOP_ON_SEARCH = () => {
   /** no-op*/
 };
 
-interface TableTopBarProps extends Partial<ExportActionProps> {
+interface TableTopBarProps<TData> extends Partial<ExportActionProps> {
+  table: Table<TData>;
   enableSearch: boolean;
   searchQuery?: string;
   onSearchQueryChange?: (query: string) => void;
@@ -38,7 +41,8 @@ interface TableTopBarProps extends Partial<ExportActionProps> {
   sizeBytesIsLoading?: boolean;
 }
 
-export const TableTopBar: React.FC<TableTopBarProps> = ({
+export const TableTopBar = <TData,>({
+  table,
   enableSearch,
   searchQuery,
   onSearchQueryChange,
@@ -52,7 +56,7 @@ export const TableTopBar: React.FC<TableTopBarProps> = ({
   downloadAs,
   sizeBytes,
   sizeBytesIsLoading,
-}) => {
+}: TableTopBarProps<TData>) => {
   const [internalValue, setInternalValue] = useState(searchQuery || "");
   const debouncedSearch = useDebounce(internalValue, 500);
   const onSearch = useEvent(onSearchQueryChange ?? NOOP_ON_SEARCH);
@@ -62,16 +66,6 @@ export const TableTopBar: React.FC<TableTopBarProps> = ({
     onSearch(debouncedSearch);
   }, [debouncedSearch, onSearch]);
 
-  const hasAnyAction =
-    (enableSearch && onSearchQueryChange) ||
-    showChartBuilder ||
-    showTableExplorer ||
-    downloadAs;
-
-  if (!hasAnyAction) {
-    return null;
-  }
-
   return (
     <div className="flex items-center h-10 px-2 border-b gap-2">
       {onSearchQueryChange && enableSearch && (
@@ -106,6 +100,7 @@ export const TableTopBar: React.FC<TableTopBarProps> = ({
       )}
 
       <div className="flex items-center shrink-0">
+        <ColumnVisibilityDropdown table={table} />
         {showChartBuilder && (
           <Button
             variant="text"

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

@@ -3,7 +3,7 @@
 
 import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import { render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, it } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { CellSelectionProvider } from "../range-focus/provider";
 import { TableBottomBar } from "../TableBottomBar";
@@ -11,7 +11,6 @@ import { TableBottomBar } from "../TableBottomBar";
 function renderWithTable(opts: {
   totalColumns: number;
   hiddenColumns?: string[];
-  togglePanel?: (panelType: string) => void;
 }) {
   const Wrapper = () => {
     const table = useReactTable({
@@ -34,7 +33,6 @@ function renderWithTable(opts: {
         pagination={false}
         totalColumns={opts.totalColumns}
         table={table}
-        togglePanel={opts.togglePanel}
       />
     );
   };
@@ -60,14 +58,10 @@ describe("TableBottomBar — hidden column count", () => {
     expect(screen.getByText(/\(1 hidden\)/)).toBeInTheDocument();
   });
 
-  it("invokes togglePanel('column-explorer') when '(n hidden)' is clicked", () => {
-    const togglePanel = vi.fn();
-    renderWithTable({
-      totalColumns: 3,
-      hiddenColumns: ["col1"],
-      togglePanel,
-    });
-    screen.getByText(/\(1 hidden\)/).click();
-    expect(togglePanel).toHaveBeenCalledWith("column-explorer");
+  it("renders '(n hidden)' as inert text, not a button", () => {
+    renderWithTable({ totalColumns: 3, hiddenColumns: ["col1"] });
+    const suffix = screen.getByText(/\(1 hidden\)/);
+    expect(suffix.tagName).toBe("SPAN");
+    expect(suffix.closest("button")).toBeNull();
   });
 });

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