@marimo-team/islands 0.21.2-dev0 → 0.21.2-dev100

package/src/components/data-table/row-viewer-panel/row-viewer.tsx

@@ -12,16 +12,16 @@ import {
   ChevronsLeft,
   ChevronsRight,
   Info,
-  SearchIcon,
 } from "lucide-react";
-import { useRef, useState } from "react";
+import { type KeyboardEvent, useId, useRef, useState } from "react";
 import { useLocale } from "react-aria";
 import { ColumnName } from "@/components/datasources/components";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
 import { Spinner } from "@/components/icons/spinner";
 import { KeyboardHotkeys } from "@/components/shortcuts/renderShortcut";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Command, CommandInput } from "@/components/ui/command";
 import {
   Table,
   TableBody,
@@ -32,7 +32,6 @@ import {
 } from "@/components/ui/table";
 import { DelayMount } from "@/components/utils/delay-mount";
 import { useAsyncData } from "@/hooks/useAsyncData";
-import { useKeydownOnElement } from "@/hooks/useHotkey";
 import { Banner, ErrorBanner } from "@/plugins/impl/common/error-banner";
 import type { GetRowResult } from "@/plugins/impl/DataTablePlugin";
 import { NAMELESS_COLUMN_PREFIX, renderCellValue } from "../columns";
@@ -68,7 +67,7 @@ export const RowViewerPanel: React.FC<RowViewerPanelProps> = ({
 }: RowViewerPanelProps) => {
   const [searchQuery, setSearchQuery] = useState("");
   const panelRef = useRef<HTMLDivElement>(null);
-  const searchInputRef = useRef<HTMLInputElement>(null);
+  const checkboxId = useId();
   const { locale } = useLocale();
 
   const tooManyRows = totalRows === TOO_MANY_ROWS;
@@ -102,26 +101,29 @@ export const RowViewerPanel: React.FC<RowViewerPanelProps> = ({
     setRow(totalRows - 1);
   }
 
-  useKeydownOnElement(panelRef, {
-    ArrowLeft: (e) => {
-      if (e?.target === searchInputRef.current) {
-        return false;
-      }
-      setRow(rowIdx - 1);
-    },
-    ArrowRight: (e) => {
-      if (e?.target === searchInputRef.current) {
-        return false;
-      }
-      setRow(rowIdx + 1);
-    },
-    Space: (e) => {
-      if (e?.target === searchInputRef.current) {
-        return false;
-      }
-      toggleRowSelection();
-    },
-  });
+  const handleKeyDown = (e: KeyboardEvent) => {
+    // Don't intercept keys when typing in an input
+    if (e.target instanceof HTMLInputElement) {
+      return;
+    }
+    switch (e.key) {
+      case "ArrowLeft":
+        setRow(rowIdx - 1);
+
+        break;
+
+      case "ArrowRight":
+        setRow(rowIdx + 1);
+
+        break;
+
+      case " ":
+        e.preventDefault();
+        toggleRowSelection();
+
+        break;
+    }
+  };
 
   const buttonStyles = "h-6 w-6 p-0.5";
 
@@ -248,19 +250,29 @@ export const RowViewerPanel: React.FC<RowViewerPanelProps> = ({
       className="flex flex-col gap-3 mt-4 focus:outline-hidden"
       ref={panelRef}
       tabIndex={-1}
+      onKeyDown={handleKeyDown}
     >
-      <div className="flex flex-row gap-2 items-center mr-2">
+      <div className="flex flex-row gap-2 items-center mr-2 px-2">
         {isSelectable && (
-          <div className="flex flex-row gap-1 items-center">
-            <Button
-              variant="link"
-              size="xs"
-              className="pr-0"
-              onClick={toggleRowSelection}
-            >
-              {isRowSelected ? "Deselect row" : "Select row"}
-            </Button>
-            <KeyboardHotkeys shortcut="Space" />
+          <div
+            className="flex items-center"
+            title="Select/unselect the current row"
+          >
+            <div className="flex items-center gap-1.5">
+              <Checkbox
+                id={checkboxId}
+                checked={isRowSelected}
+                onCheckedChange={toggleRowSelection}
+                className="h-3.5 w-3.5"
+              />
+              <label
+                htmlFor={checkboxId}
+                className="text-xs text-muted-foreground cursor-pointer"
+              >
+                Select
+              </label>
+            </div>
+            <KeyboardHotkeys shortcut="Space" className="scale-75" />
           </div>
         )}
 
@@ -315,17 +327,14 @@ export const RowViewerPanel: React.FC<RowViewerPanelProps> = ({
         </Button>
       </div>
 
-      <div className="mx-2 -mb-1">
-        <Input
-          ref={searchInputRef}
-          type="text"
+      <Command className="bg-background" shouldFilter={false}>
+        <CommandInput
           placeholder="Search"
-          onChange={(e) => setSearchQuery(e.target.value)}
-          icon={<SearchIcon className="w-4 h-4" />}
-          className="mb-0 border-border"
+          value={searchQuery}
+          onValueChange={setSearchQuery}
           data-testid="selection-panel-search-input"
         />
-      </div>
+      </Command>
       {renderTable()}
     </div>
   );

package/src/components/data-table/schemas.ts

@@ -5,7 +5,7 @@ import { rpc } from "@/plugins/core/rpc";
 
 export type DownloadAsArgs = (req: {
   format: "csv" | "json" | "parquet";
-}) => Promise<string>;
+}) => Promise<{ url: string; filename: string }>;
 
 export const DownloadAsSchema = rpc
   .input(
@@ -13,4 +13,9 @@ export const DownloadAsSchema = rpc
       format: z.enum(["csv", "json", "parquet"]),
     }),
   )
-  .output(z.string());
+  .output(
+    z.object({
+      url: z.string(),
+      filename: z.string(),
+    }),
+  );

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/data-table/types.ts

@@ -1,8 +1,29 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import type { RowData } from "@tanstack/react-table";
 import type { DataType } from "@/core/kernel/messages";
 import { Objects } from "@/utils/objects";
 
+declare module "@tanstack/react-table" {
+  interface TableMeta<TData extends RowData> {
+    rawData?: TData[]; // raw data for filtering/copying (present only if format_mapping is provided)
+  }
+}
+
+// Pixel heights derived from Tailwind classes applied to table elements.
+// row: h-6 = 24px (TableRow in renderers.tsx)
+// header: min-h-10 = 40px (TableHead in renderers.tsx)
+export const TABLE_ROW_HEIGHT_PX = 24;
+export const TABLE_HEADER_HEIGHT_PX = 40;
+
+// Default number of visible rows when virtualizing without an explicit maxHeight.
+export const DEFAULT_VIRTUAL_ROWS = 15;
+
+// Minimum row count before virtualization kicks in. Below this threshold the
+// DOM overhead is negligible and the virtualizer's measurement cost isn't
+// worth it. Must be greater than DEFAULT_VIRTUAL_ROWS.
+export const MIN_ROWS_TO_VIRTUALIZE = 100;
+
 export type ColumnName = string;
 
 export const ColumnHeaderStatsKeys = [

package/src/components/data-table/utils.ts

@@ -1,8 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import type { Table } from "@tanstack/react-table";
 import type { TableData } from "@/plugins/impl/DataTablePlugin";
 import { vegaLoadData } from "@/plugins/impl/vega/loader";
 import { jsonParseWithSpecialChar } from "@/utils/json/json-parser";
+import { getMimeValues } from "./mime-cell";
 import { INDEX_COLUMN_NAME } from "./types";
 
 /**
@@ -32,6 +34,21 @@ export async function loadTableData<T = object>(
   return tableData;
 }
 
+/**
+ * Load both table and raw table data. Raw table data is typically when
+ * there is formatting applied to the table data.
+ */
+export async function loadTableAndRawData<T>(
+  tableData: TableData<T>,
+  rawTableData?: TableData<T> | null,
+): Promise<[T[], T[] | undefined]> {
+  if (rawTableData) {
+    return Promise.all([loadTableData(tableData), loadTableData(rawTableData)]);
+  }
+
+  return [await loadTableData(tableData), undefined];
+}
+
 /**
  * Get the stable row ID for a row.
  *
@@ -87,3 +104,73 @@ export function stringifyUnknownValue(opts: {
   }
   return String(value);
 }
+
+function stripHtml(html: string): string {
+  const div = document.createElement("div");
+  div.innerHTML = html;
+  const text = (div.textContent || div.innerText || "").trim();
+  return text || html;
+}
+
+const HTML_MIMETYPES = new Set(["text/html", "text/markdown"]);
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+
+/**
+ * Get clipboard-ready text and optional HTML for a cell.
+ *
+ * @param rawValue - The raw (unformatted) value, or undefined if not available.
+ * @param displayedValue - The displayed value (may be a mime bundle).
+ */
+export function getClipboardContent(
+  rawValue: unknown,
+  displayedValue: unknown,
+): { text: string; html?: string } {
+  const mimeValues =
+    typeof displayedValue === "object" && displayedValue !== null
+      ? getMimeValues(displayedValue)
+      : undefined;
+
+  let html: string | undefined;
+  if (mimeValues) {
+    // text/markdown from mo.md() contains rendered HTML
+    const htmlParts = mimeValues
+      .filter((v) => HTML_MIMETYPES.has(v.mimetype))
+      .map((v) => v.data);
+    html = htmlParts.length > 0 ? htmlParts.join("") : undefined;
+  }
+
+  let text: string;
+  if (rawValue !== undefined && rawValue !== displayedValue) {
+    text = stringifyUnknownValue({ value: rawValue });
+  } else if (mimeValues) {
+    text = mimeValues
+      .map((v) => (HTML_MIMETYPES.has(v.mimetype) ? stripHtml(v.data) : v.data))
+      .join(", ");
+  } else {
+    text = stringifyUnknownValue({ value: displayedValue });
+  }
+
+  return { text, html };
+}
+
+/**
+ * Get the raw (unformatted) value for a row/column from the table,
+ * or undefined if raw data is not available.
+ */
+export function getRawValue<TData>(
+  table: Table<TData>,
+  rowIndex: number,
+  columnId: string,
+): unknown {
+  const rawData = table.options.meta?.rawData;
+  if (rawData) {
+    const rawRow = rawData[rowIndex];
+    if (isRecord(rawRow)) {
+      return rawRow[columnId];
+    }
+  }
+  return undefined;
+}

package/src/components/datasources/datasources.tsx

@@ -2,7 +2,6 @@
 
 import { CommandList } from "cmdk";
 import { atom, useAtomValue, useSetAtom } from "jotai";
-import { sortBy } from "lodash-es";
 import { PlusIcon, PlusSquareIcon, XIcon } from "lucide-react";
 import React from "react";
 import { dbDisplayName } from "@/components/databases/display";
@@ -28,6 +27,7 @@ import {
   INTERNAL_SQL_ENGINES,
 } from "@/core/datasets/engines";
 import {
+  PreviewSQLSchemaList,
   PreviewSQLTable,
   PreviewSQLTableList,
 } from "@/core/datasets/request-registry";
@@ -48,6 +48,7 @@ import { useRequestClient } from "@/core/network/requests";
 import { variablesAtom } from "@/core/variables/state";
 import type { VariableName } from "@/core/variables/types";
 import { useAsyncData } from "@/hooks/useAsyncData";
+import { sortBy } from "@/utils/arrays";
 import { logNever } from "@/utils/assertNever";
 import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
@@ -80,6 +81,7 @@ const INDENT = {
   database: "pl-4",
   schemaEmpty: "pl-8",
   schema: "pl-7",
+  schemaLoading: "pl-8",
   tableLoading: "pl-11",
   tableSchemaless: "pl-8",
   tableWithSchema: "pl-12",
@@ -369,6 +371,49 @@ const SchemaList: React.FC<{
   hasSearch,
   searchValue,
 }) => {
+  const { addSchemaList } = useDataSourceActions();
+  const [schemasRequested, setSchemasRequested] = React.useState(false);
+
+  // Custom loading state, we need to wait for the data to propagate once requested
+  // useAsyncData's loading state may return false before data has propagated
+  const [schemasLoading, setSchemasLoading] = React.useState(false);
+
+  const { isPending, error } = useAsyncData(async () => {
+    if (schemas.length === 0 && engineName && !schemasRequested) {
+      setSchemasRequested(true);
+      setSchemasLoading(true);
+      try {
+        const previewSchemaList = await PreviewSQLSchemaList.request({
+          engine: engineName,
+          database: databaseName,
+        });
+
+        addSchemaList({
+          schemas: previewSchemaList.schemas ?? [],
+          sqlSchemaContext: {
+            engine: engineName,
+            database: databaseName,
+          },
+        });
+      } finally {
+        setSchemasLoading(false);
+      }
+    }
+  }, [schemas.length, engineName, databaseName, schemasRequested]);
+
+  if (isPending || schemasLoading) {
+    return (
+      <LoadingState
+        message="Loading schemas..."
+        className={INDENT.schemaLoading}
+      />
+    );
+  }
+
+  if (error) {
+    return <ErrorState error={error} className={INDENT.schemaLoading} />;
+  }
+
   if (schemas.length === 0) {
     return (
       <EmptyState

package/src/components/editor/__tests__/data-attributes.test.tsx

@@ -5,9 +5,9 @@ import { beforeAll, describe, expect, it } from "vitest";
 import { SetupMocks } from "@/__mocks__/common";
 import { MockNotebook } from "@/__mocks__/notebook";
 import { MockRequestClient } from "@/__mocks__/requests";
+import { cellId } from "@/__tests__/branded";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { notebookAtom } from "@/core/cells/cells";
-import type { CellId } from "@/core/cells/ids";
 import { createCellRuntimeState } from "@/core/cells/types";
 import type { UserConfig } from "@/core/config/config-schema";
 import type { OutputMessage } from "@/core/kernel/messages";
@@ -39,7 +39,7 @@ describe("Cell data attributes", () => {
     "present",
   ])("should render cell with data-cell-id and data-cell-name in %s mode", (mode) => {
     const { store, wrapper } = createTestWrapper();
-    const cellId = "test" as CellId;
+    const cid = cellId("test");
     const cellName = "test_cell";
 
     const userConfig: UserConfig = {
@@ -83,7 +83,7 @@ describe("Cell data attributes", () => {
 
     const notebook = MockNotebook.notebookState({
       cellData: {
-        [cellId]: {
+        [cid]: {
           code: "",
           name: cellName,
           edited: false,
@@ -97,7 +97,7 @@ describe("Cell data attributes", () => {
       },
     });
 
-    notebook.cellRuntime[cellId] = createCellRuntimeState({
+    notebook.cellRuntime[cid] = createCellRuntimeState({
       status: "idle",
       output: null,
       consoleOutputs: [],
@@ -117,7 +117,7 @@ describe("Cell data attributes", () => {
     const { container } = render(
       <TooltipProvider>
         <Cell
-          cellId={cellId}
+          cellId={cid}
           mode={mode as AppMode}
           canDelete={true}
           userConfig={userConfig}
@@ -131,7 +131,7 @@ describe("Cell data attributes", () => {
       { wrapper },
     );
 
-    const cellElement = container.querySelector(`[data-cell-id="${cellId}"]`);
+    const cellElement = container.querySelector(`[data-cell-id="${cid}"]`);
     expect(cellElement).toBeTruthy();
     expect(cellElement?.getAttribute("data-cell-name")).toBe(cellName);
   });
@@ -139,7 +139,7 @@ describe("Cell data attributes", () => {
 
 describe("Output data attributes", () => {
   it("should render output with data-cell-role", () => {
-    const cellId = "test" as CellId;
+    const cid = cellId("test");
     const output: OutputMessage = {
       channel: "output",
       mimetype: "text/plain",
@@ -151,7 +151,7 @@ describe("Output data attributes", () => {
       <TooltipProvider>
         <OutputArea
           output={output}
-          cellId={cellId}
+          cellId={cid}
           stale={false}
           loading={false}
           allowExpand={true}

package/src/components/editor/actions/useNotebookActions.tsx

@@ -1,7 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import { startCase } from "lodash-es";
 import {
   BookMarkedIcon,
   CheckIcon,
@@ -80,6 +79,7 @@ import {
 import { Filenames } from "@/utils/filenames";
 import { Objects } from "@/utils/objects";
 import type { ProgressState } from "@/utils/progress";
+import { Strings } from "@/utils/strings";
 import { newNotebookURL } from "@/utils/urls";
 import { useRunAllCells } from "../cell/useRunCells";
 import { useChromeActions, useChromeState } from "../chrome/state";
@@ -385,7 +385,7 @@ export function useNotebookActions() {
             return [];
           }
           return {
-            label: startCase(id),
+            label: Strings.startCase(id),
             rightElement: renderCheckboxElement(selectedPanel === id),
             icon: <Icon size={14} strokeWidth={1.5} />,
             handle: () => toggleApplication(id),