@marimo-team/frontend 0.24.1-dev99 → 0.24.2-dev129

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";
 
@@ -20,6 +21,7 @@ beforeAll(() => {
 });
 
 type Row = Record<string, unknown>;
+const EMPTY_COLUMN_IDS: readonly string[] = [];
 
 // Select, index, and nameless columns are non-hideable in production
 // (see columns.tsx), so the harness mirrors that to keep visibility counts
@@ -46,11 +48,14 @@ const TEST_COLUMNS: ColumnDef<Row>[] = [
 ];
 
 interface HarnessProps {
-  initiallyHidden?: string[];
-  nonHideable?: string[];
+  initiallyHidden?: readonly string[];
+  nonHideable?: readonly string[];
 }
 
-function Harness({ initiallyHidden = [], nonHideable = [] }: HarnessProps) {
+function Harness({
+  initiallyHidden = EMPTY_COLUMN_IDS,
+  nonHideable = EMPTY_COLUMN_IDS,
+}: HarnessProps) {
   const table = useReactTable<Row>({
     data: [],
     columns: TEST_COLUMNS.map((column) =>
@@ -70,11 +75,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 +289,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__/url-detector.test.tsx

@@ -98,7 +98,7 @@ describe("UrlDetector", () => {
     expect(img).toHaveAttribute("src", dataUri);
   });
 
-  it.skip("prevents event propagation on link clicks", () => {
+  it.fails("prevents event propagation on link clicks", () => {
     const mockStopPropagation = vi.fn();
     render(<UrlDetector parts={parseContent("Check https://marimo.io")} />);
     const link = screen.getByRole("link");

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/date-popover.tsx

@@ -45,7 +45,8 @@ export const DatePopover: React.FC<DatePopoverProps> = ({
 
 const TimezoneDisplay = ({ date }: { date: Date }) => {
   const { locale } = useLocale();
-  const localTimezone = Intl.DateTimeFormat(locale).resolvedOptions().timeZone;
+  const localTimezone = new Intl.DateTimeFormat(locale).resolvedOptions()
+    .timeZone;
   const hasSubSeconds = date.getUTCMilliseconds() !== 0;
 
   const utcFormatter = useDateFormatter(

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