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

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