@marimo-team/islands 0.24.1-dev109 → 0.24.1-dev110

package/package.json

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

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

@@ -5,7 +5,7 @@ import {
   getCoreRowModel,
   useReactTable,
 } from "@tanstack/react-table";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, within } from "@testing-library/react";
 import { beforeAll, describe, expect, it, vi } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { ColumnExplorerPanel } from "../column-explorer-panel/column-explorer";
@@ -46,7 +46,7 @@ function PanelHarness({
     columns: TEST_COLUMNS,
     getCoreRowModel: getCoreRowModel(),
     locale: "en-US",
-    state: {
+    initialState: {
       columnVisibility: Object.fromEntries(
         initiallyHidden.map((id) => [id, false]),
       ),
@@ -76,6 +76,20 @@ function getSearchInput() {
   return screen.getByPlaceholderText("Search columns...");
 }
 
+function getColumnRow(columnName: string): HTMLElement {
+  const row = screen.getByText(columnName).closest('[role="option"]');
+  if (!row) {
+    throw new Error(`No row for column ${columnName}`);
+  }
+  return row as HTMLElement;
+}
+
+function getShowOnlyButton(columnName: string): HTMLElement {
+  return within(getColumnRow(columnName)).getByRole("button", {
+    name: "Show only this column",
+  });
+}
+
 describe("ColumnExplorerPanel search", () => {
   it("shows all columns when search is empty", () => {
     renderPanel();
@@ -150,4 +164,49 @@ describe("ColumnExplorerPanel visibility actions", () => {
     expect(showAll()).toBeEnabled();
     expect(hideAll()).toBeEnabled();
   });
+
+  it("show-only icon isolates one column", () => {
+    renderPanel();
+    fireEvent.click(getShowOnlyButton("customer_name"));
+
+    expect(
+      within(getColumnRow("customer_name")).getByRole("button", {
+        name: "Hide column",
+      }),
+    ).toBeInTheDocument();
+    expect(
+      within(getColumnRow("cust_age")).getByRole("button", {
+        name: "Show column",
+      }),
+    ).toBeInTheDocument();
+    expect(
+      within(getColumnRow("order_total")).getByRole("button", {
+        name: "Show column",
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it("disables show-only icon when the column is already alone", () => {
+    renderPanel({
+      initiallyHidden: ["cust_age", "order_total"],
+    });
+    expect(getShowOnlyButton("customer_name")).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+  });
+
+  it("disabled show-only icon does not toggle explorer row expansion", () => {
+    renderPanel({
+      initiallyHidden: ["cust_age", "order_total"],
+    });
+    const row = getColumnRow("customer_name");
+    expect(row.querySelector(".lucide-chevron-down")).not.toBeNull();
+
+    const button = getShowOnlyButton("customer_name");
+    fireEvent.pointerDown(button, { pointerId: 1, bubbles: true });
+    fireEvent.click(button, { bubbles: true });
+
+    expect(row.querySelector(".lucide-chevron-down")).not.toBeNull();
+  });
 });

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

@@ -7,6 +7,7 @@ import {
 } from "@tanstack/react-table";
 import { fireEvent, render, screen } from "@testing-library/react";
 import { beforeAll, describe, expect, it } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
 import { ColumnVisibilityDropdown } from "../column-visibility-dropdown";
 import { INDEX_COLUMN_NAME, SELECT_COLUMN_ID } from "../types";
 
@@ -70,11 +71,25 @@ function Harness({ initiallyHidden = [], nonHideable = [] }: HarnessProps) {
 }
 
 function renderAndOpen(props?: HarnessProps) {
-  const result = render(<Harness {...(props ?? {})} />);
+  const result = render(
+    <TooltipProvider>
+      <Harness {...(props ?? {})} />
+    </TooltipProvider>,
+  );
   fireEvent.click(screen.getByTestId("column-visibility-trigger"));
   return result;
 }
 
+function getShowOnlyButton(columnName: string): HTMLElement {
+  const button = getColumnOption(columnName).querySelector(
+    '[aria-label="Show only this column"]',
+  );
+  if (!button) {
+    throw new Error(`No show-only button for column ${columnName}`);
+  }
+  return button as HTMLElement;
+}
+
 function getOptionTexts(): string[] {
   return screen.getAllByRole("option").map((el) => el.textContent ?? "");
 }
@@ -270,10 +285,124 @@ describe("ColumnVisibilityDropdown", () => {
   it("offers both bulk actions when matches are mixed", () => {
     renderAndOpen({ initiallyHidden: ["cust_age"] });
     fireEvent.change(getSearchInput(), { target: { value: "cust" } });
+    expect(screen.getByText(/Show only 2 matching/)).toBeInTheDocument();
     expect(screen.getByText(/Hide 1 matching/)).toBeInTheDocument();
     expect(screen.getByText(/Show 1 matching/)).toBeInTheDocument();
   });
 
+  it("lists show-only before hide and show bulk actions while searching", () => {
+    renderAndOpen({ initiallyHidden: ["cust_age"] });
+    fireEvent.change(getSearchInput(), { target: { value: "cust" } });
+    expect(getOptionTexts().slice(0, 3)).toEqual([
+      "Show only 2 matching",
+      "Hide 1 matching",
+      "Show 1 matching",
+    ]);
+  });
+
+  it("'Show only N matching' isolates matching columns", () => {
+    renderAndOpen({ initiallyHidden: ["cust_age"] });
+    fireEvent.change(getSearchInput(), { target: { value: "cust" } });
+    fireEvent.click(getColumnOption("Show only 2 matching"));
+    fireEvent.change(getSearchInput(), { target: { value: "" } });
+
+    expect(
+      getColumnOption("customer_name").querySelector(".lucide-eye-off"),
+    ).toBeNull();
+    expect(
+      getColumnOption("cust_age").querySelector(".lucide-eye-off"),
+    ).toBeNull();
+    expect(
+      getColumnOption("order_total").querySelector(".lucide-eye-off"),
+    ).not.toBeNull();
+    fireEvent.change(getSearchInput(), { target: { value: "cust" } });
+    expect(getColumnOption("Show only 2 matching")).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+  });
+
+  it("disables 'Show only N matching' when already showing only matches", () => {
+    renderAndOpen({
+      initiallyHidden: ["order_total"],
+    });
+    fireEvent.change(getSearchInput(), { target: { value: "cust" } });
+    expect(getColumnOption("Show only 2 matching")).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+  });
+
+  it("omits 'Show only N matching' without search text", () => {
+    renderAndOpen();
+    expect(
+      screen.queryByText(/Show only \d+ matching/),
+    ).not.toBeInTheDocument();
+  });
+
+  it("omits search bulk actions when only non-hideable columns match", () => {
+    renderAndOpen({ nonHideable: ["customer_name"] });
+    fireEvent.change(getSearchInput(), { target: { value: "customer" } });
+    expect(screen.getByText("customer_name")).toBeInTheDocument();
+    expect(
+      screen.queryByText(/Show only \d+ matching/),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByText(/Hide \d+ matching/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Show \d+ matching/)).not.toBeInTheDocument();
+  });
+
+  it("show-only icon isolates one column without clearing search", () => {
+    renderAndOpen();
+    fireEvent.change(getSearchInput(), { target: { value: "cust" } });
+    fireEvent.click(getShowOnlyButton("customer_name"));
+    expect(getSearchInput()).toHaveValue("cust");
+    fireEvent.change(getSearchInput(), { target: { value: "" } });
+
+    expect(
+      getColumnOption("customer_name").querySelector(".lucide-eye-off"),
+    ).toBeNull();
+    expect(
+      getColumnOption("cust_age").querySelector(".lucide-eye-off"),
+    ).not.toBeNull();
+    expect(
+      getColumnOption("order_total").querySelector(".lucide-eye-off"),
+    ).not.toBeNull();
+  });
+
+  it("show-only icon does not toggle the row visibility", () => {
+    renderAndOpen();
+    fireEvent.click(getShowOnlyButton("customer_name"));
+
+    expect(
+      getColumnOption("customer_name").querySelector(".lucide-eye-off"),
+    ).toBeNull();
+  });
+
+  it("disables show-only icon when the column is already alone", () => {
+    renderAndOpen({
+      initiallyHidden: ["cust_age", "order_total"],
+    });
+    expect(getShowOnlyButton("customer_name")).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+  });
+
+  it("disabled show-only icon blocks pointer activation of the row", () => {
+    renderAndOpen({
+      initiallyHidden: ["cust_age", "order_total"],
+    });
+    const button = getShowOnlyButton("customer_name");
+    expect(button).toHaveAttribute("aria-disabled", "true");
+
+    fireEvent.pointerDown(button, { pointerId: 1, bubbles: true });
+    fireEvent.click(button, { bubbles: true });
+
+    expect(
+      getColumnOption("customer_name").querySelector(".lucide-eye-off"),
+    ).toBeNull();
+  });
+
   it("renders non-hideable columns disabled and without an eye toggle", () => {
     renderAndOpen({ nonHideable: ["customer_name"] });
     const option = getColumnOption("customer_name");

package/src/components/data-table/__tests__/useColumnVisibility.test.ts

@@ -1,8 +1,62 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
 import { act, renderHook } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
-import { useColumnVisibility } from "../hooks/use-column-visibility";
+import {
+  applyShowOnlyColumns,
+  getShowOnlyColumnState,
+  getShowOnlyVisibility,
+  isShowingOnly,
+  isShowingOnlyColumns,
+  useColumnVisibility,
+} from "../hooks/use-column-visibility";
+import { INDEX_COLUMN_NAME, SELECT_COLUMN_ID } from "../types";
+
+type Row = Record<string, unknown>;
+
+const TEST_COLUMNS: ColumnDef<Row>[] = [
+  { id: SELECT_COLUMN_ID, accessorKey: SELECT_COLUMN_ID, enableHiding: false },
+  {
+    id: INDEX_COLUMN_NAME,
+    accessorKey: INDEX_COLUMN_NAME,
+    enableHiding: false,
+  },
+  { id: "customer_name", accessorKey: "customer_name" },
+  { id: "cust_age", accessorKey: "cust_age" },
+  { id: "order_total", accessorKey: "order_total" },
+];
+
+function createTestTable({
+  initiallyHidden = [],
+  nonHideable = [],
+}: {
+  initiallyHidden?: string[];
+  nonHideable?: string[];
+} = {}) {
+  const { result } = renderHook(() =>
+    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 result.current;
+}
 
 describe("useColumnVisibility", () => {
   it("should initialize with correct default values", () => {
@@ -40,3 +94,101 @@ describe("useColumnVisibility", () => {
     expect(result.current.columnVisibility).toEqual({ a: false, c: false });
   });
 });
+
+describe("getShowOnlyVisibility", () => {
+  it("shows matching hideable columns and hides the rest", () => {
+    const table = createTestTable({ initiallyHidden: ["cust_age"] });
+
+    expect(
+      getShowOnlyVisibility(table, ["customer_name", "order_total"]),
+    ).toEqual({
+      customer_name: true,
+      cust_age: false,
+      order_total: true,
+    });
+  });
+
+  it("ignores non-hideable columns in the input", () => {
+    const table = createTestTable({ nonHideable: ["customer_name"] });
+
+    expect(
+      getShowOnlyVisibility(table, [
+        SELECT_COLUMN_ID,
+        "customer_name",
+        "cust_age",
+      ]),
+    ).toEqual({
+      cust_age: true,
+      order_total: false,
+    });
+  });
+
+  it("hides every hideable column when the input is empty", () => {
+    const table = createTestTable();
+
+    expect(getShowOnlyVisibility(table, [])).toEqual({
+      customer_name: false,
+      cust_age: false,
+      order_total: false,
+    });
+  });
+});
+
+describe("isShowingOnly", () => {
+  it("returns true when visible hideable columns match the input", () => {
+    const table = createTestTable({
+      initiallyHidden: ["cust_age", "order_total"],
+    });
+
+    expect(isShowingOnly(table, ["customer_name"])).toBe(true);
+  });
+
+  it("returns false when extra hideable columns remain visible", () => {
+    const table = createTestTable();
+
+    expect(isShowingOnly(table, ["customer_name"])).toBe(false);
+  });
+
+  it("ignores non-hideable columns in the input", () => {
+    const table = createTestTable({
+      initiallyHidden: ["cust_age", "order_total"],
+      nonHideable: ["customer_name"],
+    });
+
+    expect(isShowingOnly(table, [SELECT_COLUMN_ID, "customer_name"])).toBe(
+      true,
+    );
+  });
+
+  it("returns true when every hideable column is hidden and the input is empty", () => {
+    const table = createTestTable({
+      initiallyHidden: ["customer_name", "cust_age", "order_total"],
+    });
+
+    expect(isShowingOnly(table, [])).toBe(true);
+  });
+});
+
+describe("isShowingOnlyColumns", () => {
+  it("reuses precomputed visible hideable columns", () => {
+    const table = createTestTable({
+      initiallyHidden: ["cust_age", "order_total"],
+    });
+    const state = getShowOnlyColumnState(table);
+
+    expect(isShowingOnlyColumns(state, ["customer_name"])).toBe(true);
+    expect(isShowingOnly(table, ["customer_name"])).toBe(true);
+  });
+});
+
+describe("applyShowOnlyColumns", () => {
+  it("shows only the requested hideable columns", () => {
+    const table = createTestTable({ initiallyHidden: ["cust_age"] });
+
+    act(() => {
+      applyShowOnlyColumns(table, ["customer_name", "order_total"]);
+    });
+
+    expect(isShowingOnly(table, ["customer_name", "order_total"])).toBe(true);
+  });
+});

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

@@ -10,7 +10,7 @@ import {
   EyeIcon,
   EyeOffIcon,
 } from "lucide-react";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useLocale } from "react-aria";
 import {
   AddDataframeChart,
@@ -52,8 +52,12 @@ import type { Column, Table } from "@tanstack/react-table";
 import { cn } from "@/utils/cn";
 import {
   getColumnCountForDisplay,
+  getShowOnlyColumnState,
   getUserColumnVisibilityCounts,
+  isShowingOnlyColumns,
+  type ShowOnlyColumnState,
 } from "../hooks/use-column-visibility";
+import { ShowOnlyColumnButton } from "../show-only-column-button";
 
 interface ColumnExplorerPanelProps<TData> {
   previewColumn: PreviewColumn;
@@ -94,6 +98,11 @@ export function ColumnExplorerPanel<TData>({
     hiddenColumns: hiddenColumnCount,
   } = getColumnCountForDisplay(table, totalColumns);
   const { visible: visibleColumnCount } = getUserColumnVisibilityCounts(table);
+  const columnVisibility = table.getState().columnVisibility;
+  const showOnlyColumnState = useMemo(
+    () => getShowOnlyColumnState(table),
+    [table, columnVisibility],
+  );
 
   const { rowsAndColumns, hiddenSuffix } = prettifyRowColumnCount({
     numRows: totalRows,
@@ -162,6 +171,8 @@ export function ColumnExplorerPanel<TData>({
                   dataType={dataType}
                   externalType={externalType}
                   previewColumn={previewColumn}
+                  table={table}
+                  showOnlyColumnState={showOnlyColumnState}
                   defaultExpanded={index === 0}
                 />
               );
@@ -179,6 +190,8 @@ function ColumnItem<TData>({
   dataType,
   externalType,
   previewColumn,
+  table,
+  showOnlyColumnState,
   defaultExpanded = false,
 }: {
   columnName: string;
@@ -186,6 +199,8 @@ function ColumnItem<TData>({
   dataType: DataType;
   externalType: string;
   previewColumn: PreviewColumn;
+  table: Table<TData>;
+  showOnlyColumnState: ShowOnlyColumnState;
   defaultExpanded?: boolean;
 }) {
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
@@ -218,36 +233,50 @@ function ColumnItem<TData>({
             )}
           />
           {column?.getCanHide() && (
-            <Tooltip
-              content={column.getIsVisible() ? "Hide column" : "Show column"}
-              delayDuration={400}
-            >
-              <Button
-                type="button"
-                variant="text"
-                size="icon"
-                aria-label={
-                  column.getIsVisible() ? "Hide column" : "Show column"
-                }
+            <>
+              <ShowOnlyColumnButton
+                table={table}
+                columnIds={[columnName]}
+                disabled={isShowingOnlyColumns(showOnlyColumnState, [
+                  columnName,
+                ])}
                 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());
-                }}
+              />
+              <Tooltip
+                content={column.getIsVisible() ? "Hide column" : "Show column"}
+                delayDuration={400}
               >
-                {column.getIsVisible() ? (
-                  <EyeIcon className="h-3 w-3" strokeWidth={2.5} />
-                ) : (
-                  <EyeOffIcon className="h-3 w-3" strokeWidth={2.5} />
-                )}
-              </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>

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

@@ -5,8 +5,8 @@
 // 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 { Columns3Icon, EyeIcon, EyeOffIcon, ScanEyeIcon } from "lucide-react";
+import React, { useMemo } from "react";
 import { ColumnName } from "@/components/datasources/components";
 import { Button } from "@/components/ui/button";
 import {
@@ -28,6 +28,11 @@ import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
 import { smartMatchFilter } from "@/utils/smartMatch";
 import { NAMELESS_COLUMN_PREFIX } from "./columns";
+import {
+  applyShowOnlyColumns,
+  isShowingOnlyColumns,
+} from "./hooks/use-column-visibility";
+import { ShowOnlyColumnButton } from "./show-only-column-button";
 import { INDEX_COLUMN_NAME, SELECT_COLUMN_ID } from "./types";
 
 function getUserColumns<TData>(table: Table<TData>) {
@@ -95,6 +100,23 @@ export const ColumnVisibilityDropdown = <TData,>({
     > =>
       action.kind === "select-matching" || action.kind === "deselect-matching",
   );
+  const showOnlyMatchIds =
+    list.searchQuery !== ""
+      ? list.visibleOptions
+          .filter((option) => !option.disabled)
+          .map((option) => option.value)
+      : [];
+  const showOnlyColumnState = useMemo(
+    () => ({
+      visibleHideableColumnIds: hideableIds.filter(
+        (id) => !hiddenIds.includes(id),
+      ),
+      hideableColumnIdSet: new Set(hideableIds),
+    }),
+    [hideableIds, hiddenIds],
+  );
+  const hasSearchBulkActions =
+    showOnlyMatchIds.length > 0 || matchingActions.length > 0;
 
   return (
     <Popover open={list.open} onOpenChange={list.setOpen}>
@@ -145,8 +167,25 @@ export const ColumnVisibilityDropdown = <TData,>({
                 <CommandSeparator />
               </>
             ) : (
-              matchingActions.length > 0 && (
+              hasSearchBulkActions && (
                 <>
+                  <CommandItem
+                    value="__show_only_matching__"
+                    disabled={
+                      showOnlyMatchIds.length === 0 ||
+                      isShowingOnlyColumns(
+                        showOnlyColumnState,
+                        showOnlyMatchIds,
+                      )
+                    }
+                    onSelect={() => {
+                      applyShowOnlyColumns(table, showOnlyMatchIds);
+                    }}
+                    className="cursor-pointer"
+                  >
+                    <ScanEyeIcon className="w-3 h-3 mr-1.5" />
+                    Show only {showOnlyMatchIds.length} matching
+                  </CommandItem>
                   {matchingActions.map((action) => (
                     <CommandItem
                       key={action.kind}
@@ -194,17 +233,26 @@ export const ColumnVisibilityDropdown = <TData,>({
                       />
                     )}
                     {!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 className="ml-auto flex items-center gap-0.5">
+                        <ShowOnlyColumnButton
+                          table={table}
+                          columnIds={[option.value]}
+                          disabled={isShowingOnlyColumns(showOnlyColumnState, [
+                            option.value,
+                          ])}
+                          iconClassName="w-3 h-3"
+                        />
+                        <span
+                          className={cn(
+                            hidden ? "text-primary" : "text-muted-foreground",
+                          )}
+                        >
+                          {hidden ? (
+                            <EyeOffIcon className="w-3 h-3" />
+                          ) : (
+                            <EyeIcon className="w-3 h-3" />
+                          )}
+                        </span>
                       </span>
                     )}
                   </CommandItem>