@marimo-team/islands 0.21.2-dev93 → 0.21.2-dev94

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

@@ -0,0 +1,161 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { Fill } from "@marimo-team/react-slotz";
+import type { OnChangeFn, RowSelectionState } from "@tanstack/react-table";
+import type React from "react";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent } from "@/components/ui/tabs";
+import { SlotNames } from "@/core/slots/slots";
+import type {
+  GetRowResult,
+  PreviewColumn,
+} from "@/plugins/impl/DataTablePlugin";
+import { cn } from "@/utils/cn";
+import {
+  PANEL_TYPES,
+  type PanelType,
+} from "../../editor/chrome/panels/context-aware-panel/context-aware-panel";
+import { ColumnExplorerPanel } from "../column-explorer-panel/column-explorer";
+import { RowViewerPanel } from "../row-viewer-panel/row-viewer";
+import type { FieldTypesWithExternalType, TooManyRows } from "../types";
+
+export interface TableExplorerPanelProps {
+  // Row viewer props
+  rowIdx: number;
+  setRowIdx: (rowIdx: number) => void;
+  totalRows: number | TooManyRows;
+  fieldTypes: FieldTypesWithExternalType | undefined | null;
+  getRow: (rowIdx: number) => Promise<GetRowResult>;
+  isSelectable: boolean;
+  isRowSelected: boolean;
+  handleRowSelectionChange?: OnChangeFn<RowSelectionState>;
+  // Column explorer props
+  previewColumn?: PreviewColumn;
+  totalColumns: number;
+  tableId: string;
+  // Visibility flags
+  showRowExplorer: boolean;
+  showColumnExplorer: boolean;
+  // Tab state (driven by contextAwarePanelType atom)
+  activeTab: PanelType | null;
+  onTabChange: (tab: PanelType) => void;
+}
+
+const tabTriggerClassName =
+  "text-xs uppercase tracking-wide font-semibold cursor-pointer transition-colors";
+const activeClassName = "text-primary";
+const inactiveClassName = "hover:text-foreground";
+
+export const TableExplorerPanel: React.FC<TableExplorerPanelProps> = ({
+  // Row viewer
+  rowIdx,
+  setRowIdx,
+  totalRows,
+  fieldTypes,
+  getRow,
+  isSelectable,
+  isRowSelected,
+  handleRowSelectionChange,
+  // Column explorer
+  previewColumn,
+  totalColumns,
+  tableId,
+  // Visibility
+  showRowExplorer,
+  showColumnExplorer,
+  // Tab state
+  activeTab,
+  onTabChange,
+}) => {
+  const showTabs = showRowExplorer && showColumnExplorer;
+
+  const rowViewer = (
+    <RowViewerPanel
+      rowIdx={rowIdx}
+      setRowIdx={setRowIdx}
+      totalRows={totalRows}
+      fieldTypes={fieldTypes}
+      getRow={getRow}
+      isSelectable={isSelectable}
+      isRowSelected={isRowSelected}
+      handleRowSelectionChange={handleRowSelectionChange}
+    />
+  );
+
+  const columnExplorer = previewColumn && (
+    <ColumnExplorerPanel
+      previewColumn={previewColumn}
+      fieldTypes={fieldTypes}
+      totalRows={totalRows}
+      totalColumns={totalColumns}
+      tableId={tableId}
+    />
+  );
+
+  // If only one panel is visible, don't show tabs
+  if (!showTabs) {
+    if (showRowExplorer) {
+      return rowViewer;
+    }
+    if (showColumnExplorer) {
+      return columnExplorer;
+    }
+    return null;
+  }
+
+  // Resolve active tab — fall back to first available
+  const resolvedTab = activeTab ?? PANEL_TYPES.ROW_VIEWER;
+
+  return (
+    <Tabs
+      value={resolvedTab}
+      onValueChange={(value) => onTabChange(value as PanelType)}
+      className="h-full flex flex-col min-w-[350px]"
+    >
+      <Fill name={SlotNames.CONTEXT_AWARE_PANEL_HEADER}>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="text"
+            size="xs"
+            onClick={() => onTabChange(PANEL_TYPES.ROW_VIEWER)}
+            className={cn(
+              tabTriggerClassName,
+              resolvedTab === PANEL_TYPES.ROW_VIEWER
+                ? activeClassName
+                : inactiveClassName,
+            )}
+          >
+            Rows
+          </Button>
+          <span className="text-muted-foreground text-xs">|</span>
+          <Button
+            variant="text"
+            size="xs"
+            onClick={() => onTabChange(PANEL_TYPES.COLUMN_EXPLORER)}
+            className={cn(
+              tabTriggerClassName,
+              resolvedTab === PANEL_TYPES.COLUMN_EXPLORER
+                ? activeClassName
+                : inactiveClassName,
+            )}
+          >
+            Explorer
+          </Button>
+        </div>
+      </Fill>
+
+      <TabsContent
+        value={PANEL_TYPES.ROW_VIEWER}
+        className="flex-1 overflow-auto"
+      >
+        {rowViewer}
+      </TabsContent>
+      <TabsContent
+        value={PANEL_TYPES.COLUMN_EXPLORER}
+        className="flex-1 overflow-auto"
+      >
+        {columnExplorer}
+      </TabsContent>
+    </Tabs>
+  );
+};

package/src/components/editor/chrome/panels/context-aware-panel/context-aware-panel.tsx

@@ -21,7 +21,12 @@ import {
   isPinnedAtom,
 } from "./atoms";
 
-export type PanelType = "row-viewer" | "column-explorer";
+export const PANEL_TYPES = {
+  ROW_VIEWER: "row-viewer",
+  COLUMN_EXPLORER: "column-explorer",
+} as const;
+
+export type PanelType = (typeof PANEL_TYPES)[keyof typeof PANEL_TYPES];
 
 export const ContextAwarePanel: React.FC = () => {
   const [owner, setOwner] = useAtom(contextAwarePanelOwner);
@@ -51,7 +56,7 @@ export const ContextAwarePanel: React.FC = () => {
             aria-label={isPinned ? "Unpin panel" : "Pin panel"}
           >
             {isPinned ? (
-              <PinIcon className="w-4 h-4" />
+              <PinIcon className="w-4 h-4 text-primary" />
             ) : (
               <PinOffIcon className="w-4 h-4" />
             )}
@@ -95,16 +100,18 @@ export const ContextAwarePanel: React.FC = () => {
 
   const renderBody = () => {
     return (
-      <div className="mt-2 pb-7 mb-4 h-full overflow-auto">
-        <div className="flex flex-row justify-between items-center mx-2">
+      <div className="pb-7 mb-4 h-full overflow-auto">
+        <div className="p-3 border-b flex justify-between items-center">
           {renderModeToggle()}
+          <Slot name={SlotNames.CONTEXT_AWARE_PANEL_HEADER} />
           <Button
-            variant="linkDestructive"
-            size="icon"
+            variant="text"
+            size="xs"
+            className="m-0"
             onClick={closePanel}
             aria-label="Close selection panel"
           >
-            <XIcon className="w-4 h-4" />
+            <XIcon className="w-4 h-4 hover:text-destructive" />
           </Button>
         </div>
 
@@ -126,7 +133,7 @@ export const ContextAwarePanel: React.FC = () => {
         onDragging={handleDragging}
         className="resize-handle border-border z-20 print:hidden border-l"
       />
-      <Panel defaultSize={20} minSize={15} maxSize={80}>
+      <Panel defaultSize={25} minSize={25} maxSize={80}>
         {renderBody()}
       </Panel>
     </>
@@ -150,7 +157,7 @@ interface ResizableComponentProps {
 const ResizableComponent = ({ children }: ResizableComponentProps) => {
   const { resizableDivRef, handleRefs, style } = useResizeHandle({
     startingWidth: 400,
-    minWidth: 300,
+    minWidth: 400,
     maxWidth: 1500,
     onResize: () => {
       raf2(() => {

package/src/core/slots/slots.ts

@@ -6,4 +6,5 @@ export const slotsController = new SlotzController();
 export const SlotNames = {
   SIDEBAR: "sidebar",
   CONTEXT_AWARE_PANEL: "context-aware-panel",
+  CONTEXT_AWARE_PANEL_HEADER: "context-aware-panel-header",
 };

package/src/plugins/impl/DataTablePlugin.tsx

@@ -26,7 +26,6 @@ import type { CellSelectionState } from "@/components/data-table/cell-selection/
 import type { CellStyleState } from "@/components/data-table/cell-styling/types";
 import { TablePanel } from "@/components/data-table/charts/charts";
 import { hasChart } from "@/components/data-table/charts/storage";
-import { ColumnExplorerPanel } from "@/components/data-table/column-explorer-panel/column-explorer";
 import { ColumnChartSpecModel } from "@/components/data-table/column-summary/chart-spec-model";
 import { ColumnChartContext } from "@/components/data-table/column-summary/column-summary";
 import {
@@ -35,11 +34,11 @@ import {
 } from "@/components/data-table/filters";
 import { usePanelOwnership } from "@/components/data-table/hooks/use-panel-ownership";
 import { LoadingTable } from "@/components/data-table/loading-table";
-import { RowViewerPanel } from "@/components/data-table/row-viewer-panel/row-viewer";
 import {
   type DownloadAsArgs,
   DownloadAsSchema,
 } from "@/components/data-table/schemas";
+import { TableExplorerPanel } from "@/components/data-table/table-explorer-panel/table-explorer-panel";
 import {
   type BinValues,
   type ColumnHeaderStats,
@@ -839,7 +838,8 @@ const DataTableComponent = ({
   }): JSX.Element => {
   const id = useId();
   const [viewedRowIdx, setViewedRowIdx] = useState(0);
-  const { isPanelOpen, togglePanel } = usePanelOwnership(id, cellId);
+  const { isPanelOpen, isAnyPanelOpen, togglePanel, panelType, setPanelType } =
+    usePanelOwnership(id, cellId);
 
   const chartSpecModel = useMemo(() => {
     if (!columnSummaries) {
@@ -1002,8 +1002,7 @@ const DataTableComponent = ({
   );
 
   const isSelectable = selection === "multi" || selection === "single";
-  const showColExplorer =
-    showColumnExplorer && preview_column && isPanelOpen("column-explorer");
+  const canShowColumnExplorer = showColumnExplorer && !!preview_column;
 
   const isInVscode = isInVscodeExtension();
 
@@ -1032,28 +1031,24 @@ const DataTableComponent = ({
         </Banner>
       )}
 
-      {isPanelOpen("row-viewer") && (
+      {isAnyPanelOpen && (showRowExplorer || canShowColumnExplorer) && (
         <ContextAwarePanelItem>
-          <RowViewerPanel
-            getRow={getRow}
-            fieldTypes={memoizedUnclampedFieldTypes}
-            totalRows={totalRows}
+          <TableExplorerPanel
             rowIdx={viewedRowIdx}
             setRowIdx={setViewedRow}
+            totalRows={totalRows}
+            fieldTypes={memoizedUnclampedFieldTypes}
+            getRow={getRow}
             isSelectable={isSelectable}
-            isRowSelected={rowSelection[viewedRowIdx]}
+            isRowSelected={Boolean(rowSelection[viewedRowIdx])}
             handleRowSelectionChange={handleRowSelectionChange}
-          />
-        </ContextAwarePanelItem>
-      )}
-      {showColExplorer && (
-        <ContextAwarePanelItem>
-          <ColumnExplorerPanel
             previewColumn={preview_column}
-            fieldTypes={memoizedUnclampedFieldTypes}
-            totalRows={totalRows}
             totalColumns={totalColumns}
             tableId={id}
+            showRowExplorer={showRowExplorer && !isInVscode}
+            showColumnExplorer={canShowColumnExplorer && !isInVscode}
+            activeTab={panelType}
+            onTabChange={setPanelType}
           />
         </ContextAwarePanelItem>
       )}
@@ -1099,11 +1094,13 @@ const DataTableComponent = ({
             showChartBuilder={showChartBuilder}
             showPageSizeSelector={showPageSizeSelector}
             // Hidden in VSCode (for now) because we don't have a panel to show
-            // the column/row explorer.
-            showColumnExplorer={showColumnExplorer && !isInVscode}
-            showRowExplorer={showRowExplorer && !isInVscode}
+            // the table explorer.
+            showTableExplorer={
+              (showRowExplorer || canShowColumnExplorer) && !isInVscode
+            }
             togglePanel={togglePanel}
             isPanelOpen={isPanelOpen}
+            isAnyPanelOpen={isAnyPanelOpen}
             viewedRowIdx={viewedRowIdx}
             onViewedRowChange={(rowIdx) => setViewedRowIdx(rowIdx)}
           />