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

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>

package/src/components/data-table/hooks/use-column-visibility.ts

@@ -54,3 +54,79 @@ export function getColumnCountForDisplay<TData>(
     hiddenColumns: counts.hidden,
   };
 }
+
+export function getShowOnlyVisibility<TData>(
+  table: Table<TData>,
+  columnIds: string[],
+): VisibilityState {
+  const showOnlySet = new Set(columnIds);
+  const visibility: VisibilityState = {};
+
+  for (const column of table.getAllLeafColumns()) {
+    if (!column.getCanHide()) {
+      continue;
+    }
+    visibility[column.id] = showOnlySet.has(column.id);
+  }
+
+  return visibility;
+}
+
+export function applyShowOnlyColumns<TData>(
+  table: Table<TData>,
+  columnIds: string[],
+): void {
+  table.setColumnVisibility((previous) => ({
+    ...previous,
+    ...getShowOnlyVisibility(table, columnIds),
+  }));
+}
+
+export interface ShowOnlyColumnState {
+  visibleHideableColumnIds: readonly string[];
+  hideableColumnIdSet: ReadonlySet<string>;
+}
+
+export function getShowOnlyColumnState<TData>(
+  table: Table<TData>,
+): ShowOnlyColumnState {
+  const hideableIds: string[] = [];
+  const visibleHideableColumnIds: string[] = [];
+
+  for (const column of table.getAllLeafColumns()) {
+    if (!column.getCanHide()) {
+      continue;
+    }
+    hideableIds.push(column.id);
+    if (column.getIsVisible()) {
+      visibleHideableColumnIds.push(column.id);
+    }
+  }
+
+  return {
+    visibleHideableColumnIds,
+    hideableColumnIdSet: new Set(hideableIds),
+  };
+}
+
+export function isShowingOnlyColumns(
+  state: ShowOnlyColumnState,
+  columnIds: readonly string[],
+): boolean {
+  const targetIds = new Set(
+    columnIds.filter((id) => state.hideableColumnIdSet.has(id)),
+  );
+
+  if (state.visibleHideableColumnIds.length !== targetIds.size) {
+    return false;
+  }
+
+  return state.visibleHideableColumnIds.every((id) => targetIds.has(id));
+}
+
+export function isShowingOnly<TData>(
+  table: Table<TData>,
+  columnIds: string[],
+): boolean {
+  return isShowingOnlyColumns(getShowOnlyColumnState(table), columnIds);
+}

package/src/components/data-table/show-only-column-button.tsx

@@ -0,0 +1,58 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+"use no memo";
+
+import type { Table } from "@tanstack/react-table";
+import { ScanEyeIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Tooltip } from "@/components/ui/tooltip";
+import { cn } from "@/utils/cn";
+import { applyShowOnlyColumns } from "./hooks/use-column-visibility";
+
+export const SHOW_ONLY_COLUMN_LABEL = "Show only this column";
+
+interface ShowOnlyColumnButtonProps<TData> {
+  table: Table<TData>;
+  columnIds: string[];
+  disabled: boolean;
+  className?: string;
+  iconClassName?: string;
+}
+
+export function ShowOnlyColumnButton<TData>({
+  table,
+  columnIds,
+  disabled,
+  className,
+  iconClassName = "h-3 w-3",
+}: ShowOnlyColumnButtonProps<TData>) {
+  return (
+    <Tooltip content={SHOW_ONLY_COLUMN_LABEL} delayDuration={400}>
+      <Button
+        type="button"
+        variant="text"
+        size="icon"
+        aria-label={SHOW_ONLY_COLUMN_LABEL}
+        aria-disabled={disabled}
+        tabIndex={disabled ? -1 : 0}
+        className={cn(
+          "h-6 w-6 hover:bg-muted text-muted-foreground hover:text-primary",
+          disabled && "opacity-50",
+          className,
+        )}
+        onPointerDown={(event) => {
+          event.stopPropagation();
+        }}
+        onClick={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          if (disabled) {
+            return;
+          }
+          applyShowOnlyColumns(table, columnIds);
+        }}
+      >
+        <ScanEyeIcon className={iconClassName} strokeWidth={2.5} />
+      </Button>
+    </Tooltip>
+  );
+}