@marimo-team/islands 0.23.9-dev4 → 0.23.9-dev40

package/src/components/data-table/header-items.tsx

@@ -8,6 +8,7 @@ import {
   ArrowUpNarrowWideIcon,
   ChevronsUpDown,
   CopyIcon,
+  EyeOffIcon,
   FilterX,
   PinOffIcon,
   WrapTextIcon,
@@ -28,10 +29,13 @@ import { formattingExample } from "./column-formatting/feature";
 import { formatOptions } from "./column-formatting/types";
 import { NAMELESS_COLUMN_PREFIX } from "./columns";
 
-export function renderFormatOptions<TData, TValue>(
-  column: Column<TData, TValue>,
-  locale: string,
-) {
+export function FormatOptions<TData, TValue>({
+  column,
+  locale,
+}: {
+  column: Column<TData, TValue>;
+  locale: string;
+}) {
   const dataType: DataType | undefined = column.columnDef.meta?.dataType;
   const columnFormatOptions = dataType ? formatOptions[dataType] : [];
 
@@ -82,9 +86,11 @@ export function renderFormatOptions<TData, TValue>(
   );
 }
 
-export function renderColumnWrapping<TData, TValue>(
-  column: Column<TData, TValue>,
-) {
+export function ColumnWrapping<TData, TValue>({
+  column,
+}: {
+  column: Column<TData, TValue>;
+}) {
   if (!column.getCanWrap?.() || !column.getColumnWrapping) {
     return null;
   }
@@ -107,9 +113,11 @@ export function renderColumnWrapping<TData, TValue>(
   );
 }
 
-export function renderColumnPinning<TData, TValue>(
-  column: Column<TData, TValue>,
-) {
+export function ColumnPinning<TData, TValue>({
+  column,
+}: {
+  column: Column<TData, TValue>;
+}) {
   if (!column.getCanPin?.() || !column.getIsPinned) {
     return null;
   }
@@ -139,7 +147,28 @@ export function renderColumnPinning<TData, TValue>(
   );
 }
 
-export function renderCopyColumn<TData, TValue>(column: Column<TData, TValue>) {
+export function HideColumn<TData, TValue>({
+  column,
+}: {
+  column: Column<TData, TValue>;
+}) {
+  if (!column.getCanHide()) {
+    return null;
+  }
+
+  return (
+    <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
+      <EyeOffIcon className="mo-dropdown-icon" />
+      Hide column
+    </DropdownMenuItem>
+  );
+}
+
+export function CopyColumn<TData, TValue>({
+  column,
+}: {
+  column: Column<TData, TValue>;
+}) {
   if (!column.getCanCopy?.()) {
     return null;
   }
@@ -159,10 +188,19 @@ export function renderCopyColumn<TData, TValue>(column: Column<TData, TValue>) {
 const AscIcon = ArrowUpNarrowWideIcon;
 const DescIcon = ArrowDownWideNarrowIcon;
 
-export function renderSorts<TData, TValue>(
-  column: Column<TData, TValue>,
-  table?: Table<TData>,
-) {
+/**
+ * `table` is optional: it is only needed to detect multi-column sorting and
+ * offer "Clear all sorts". Call sites that build their header inside column
+ * definitions (where the table instance isn't yet in scope) omit it and fall
+ * back to single-column "Clear sort".
+ */
+export function Sorts<TData, TValue>({
+  column,
+  table,
+}: {
+  column: Column<TData, TValue>;
+  table?: Table<TData>;
+}) {
   if (!column.getCanSort()) {
     return null;
   }
@@ -233,7 +271,6 @@ export function renderSorts<TData, TValue>(
         {sortDirection === "desc" && renderSortIndex()}
       </DropdownMenuItem>
       {renderClearSort()}
-      <DropdownMenuSeparator />
     </>
   );
 }
@@ -254,7 +291,11 @@ export function renderSortIcon<TData, TValue>(column: Column<TData, TValue>) {
   return <Icon className="h-3 w-3" />;
 }
 
-export function renderDataType<TData, TValue>(column: Column<TData, TValue>) {
+export function DataType<TData, TValue>({
+  column,
+}: {
+  column: Column<TData, TValue>;
+}) {
   const dtype: string | undefined = column.columnDef.meta?.dtype;
   if (!dtype) {
     return null;

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

@@ -0,0 +1,56 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+"use no memo";
+
+import { useInternalStateWithSync } from "@/hooks/useInternalStateWithSync";
+import type { Table, VisibilityState } from "@tanstack/react-table";
+import { dequal as isDeepEqual } from "dequal";
+import type React from "react";
+
+interface UseColumnVisibilityResult {
+  columnVisibility: VisibilityState;
+  setColumnVisibility: React.Dispatch<React.SetStateAction<VisibilityState>>;
+}
+
+export function useColumnVisibility(
+  hiddenColumns?: string[],
+): UseColumnVisibilityResult {
+  const [columnVisibility, setColumnVisibility] =
+    useInternalStateWithSync<VisibilityState>(
+      Object.fromEntries((hiddenColumns ?? []).map((c) => [c, false])),
+      isDeepEqual,
+    );
+
+  return { columnVisibility, setColumnVisibility };
+}
+
+interface ColumnVisibilityCounts {
+  total: number;
+  visible: number;
+  hidden: number;
+}
+
+export function getUserColumnVisibilityCounts<TData>(
+  table: Table<TData>,
+): ColumnVisibilityCounts {
+  const userColumns = table.getAllLeafColumns().filter((c) => c.getCanHide());
+  const visible = userColumns.filter((c) => c.getIsVisible()).length;
+  return {
+    total: userColumns.length,
+    visible,
+    hidden: userColumns.length - visible,
+  };
+}
+
+// When columns are clipped server-side, the TanStack instance only holds the
+// rendered subset, so visible/hidden math must use that subset's total. The
+// dataset-wide value is still correct for the no-hidden "N columns" label.
+export function getColumnCountForDisplay<TData>(
+  table: Table<TData>,
+  datasetTotalColumns: number,
+): { totalColumns: number; hiddenColumns: number } {
+  const counts = getUserColumnVisibilityCounts(table);
+  return {
+    totalColumns: counts.hidden > 0 ? counts.total : datasetTotalColumns,
+    hiddenColumns: counts.hidden,
+  };
+}

package/src/components/data-table/pagination.tsx

@@ -443,15 +443,28 @@ export function prettifyRowCount(rowCount: number, locale: string): string {
 export const prettifyRowColumnCount = ({
   numRows,
   totalColumns,
+  hiddenColumns,
   locale,
 }: {
   numRows: number | "too_many";
   totalColumns: number;
+  hiddenColumns?: number;
   locale: string;
-}): string => {
+}): { rowsAndColumns: string; hiddenSuffix: string | null } => {
   const rowsLabel =
     numRows === "too_many" ? "Unknown" : prettifyRowCount(numRows, locale);
-  const columnsLabel = `${prettyNumber(totalColumns, locale)} ${new PluralWord("column").pluralize(totalColumns)}`;
 
-  return [rowsLabel, columnsLabel].join(", ");
+  const hidden = hiddenColumns ?? 0;
+  const visibleColumns = totalColumns - hidden;
+
+  const columnsLabel =
+    hidden > 0
+      ? `${prettyNumber(visibleColumns, locale)} visible`
+      : `${prettyNumber(totalColumns, locale)} ${new PluralWord("column").pluralize(totalColumns)}`;
+
+  return {
+    rowsAndColumns: [rowsLabel, columnsLabel].join(", "),
+    hiddenSuffix:
+      hidden > 0 ? `(${prettyNumber(hidden, locale)} hidden)` : null,
+  };
 };

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

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

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

@@ -1,8 +1,15 @@
 /* Copyright 2026 Marimo. All rights reserved. */
+"use no memo";
+
+// tanstack/table is not compatible with React compiler
+// https://github.com/TanStack/table/issues/5567
 
 import { Fill } from "@marimo-team/react-slotz";
-import type { OnChangeFn, RowSelectionState } from "@tanstack/react-table";
-import type React from "react";
+import type {
+  OnChangeFn,
+  RowSelectionState,
+  Table,
+} from "@tanstack/react-table";
 import { Button } from "@/components/ui/button";
 import { Tabs, TabsContent } from "@/components/ui/tabs";
 import { SlotNames } from "@/core/slots/slots";
@@ -19,7 +26,7 @@ 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 {
+export interface TableExplorerPanelProps<TData> {
   // Row viewer props
   rowIdx: number;
   setRowIdx: (rowIdx: number) => void;
@@ -33,6 +40,7 @@ export interface TableExplorerPanelProps {
   previewColumn?: PreviewColumn;
   totalColumns: number;
   tableId: string;
+  table: Table<TData>;
   // Visibility flags
   showRowExplorer: boolean;
   showColumnExplorer: boolean;
@@ -46,7 +54,7 @@ const tabTriggerClassName =
 const activeClassName = "text-primary";
 const inactiveClassName = "hover:text-foreground";
 
-export const TableExplorerPanel: React.FC<TableExplorerPanelProps> = ({
+export function TableExplorerPanel<TData>({
   // Row viewer
   rowIdx,
   setRowIdx,
@@ -60,13 +68,14 @@ export const TableExplorerPanel: React.FC<TableExplorerPanelProps> = ({
   previewColumn,
   totalColumns,
   tableId,
+  table,
   // Visibility
   showRowExplorer,
   showColumnExplorer,
   // Tab state
   activeTab,
   onTabChange,
-}) => {
+}: TableExplorerPanelProps<TData>) {
   const showTabs = showRowExplorer && showColumnExplorer;
 
   const rowViewer = (
@@ -89,6 +98,7 @@ export const TableExplorerPanel: React.FC<TableExplorerPanelProps> = ({
       totalRows={totalRows}
       totalColumns={totalColumns}
       tableId={tableId}
+      table={table}
     />
   );
 
@@ -158,4 +168,4 @@ export const TableExplorerPanel: React.FC<TableExplorerPanelProps> = ({
       </TabsContent>
     </Tabs>
   );
-};
+}

package/src/components/databases/display.tsx

@@ -53,6 +53,8 @@ export function dbDisplayName(name: string) {
       return "MongoDB";
     case "iceberg":
       return "Apache Iceberg";
+    case "dremio":
+      return "Dremio";
     default:
       return name;
   }

package/src/components/datasources/__tests__/utils.test.ts

@@ -313,6 +313,26 @@ describe("sqlCode", () => {
       );
     });
 
+    it("should preserve dots inside quoted schema names", () => {
+      const sqlTableContext: SQLTableContext = {
+        engine: "postgres",
+        schema: "analytics.events",
+        defaultSchema: "public",
+        defaultDatabase: "mydb",
+        database: "remote",
+        dialect: "postgres",
+      };
+
+      const result = sqlCode({
+        table: mockTable,
+        columnName: mockColumn.name,
+        sqlTableContext,
+      });
+      expect(result).toBe(
+        '_df = mo.sql(f"""\nSELECT "email" FROM "remote"."analytics.events"."users" LIMIT 100\n""", engine=postgres)',
+      );
+    });
+
     it("should not quote * column name", () => {
       const sqlTableContext: SQLTableContext = {
         engine: "postgres",
@@ -334,6 +354,68 @@ describe("sqlCode", () => {
     });
   });
 
+  describe("Dremio dialect", () => {
+    it("should quote reserved column names and table path parts", () => {
+      const sqlTableContext: SQLTableContext = {
+        engine: "dremio_conn",
+        schema: "operations",
+        defaultSchema: "",
+        defaultDatabase: "",
+        database: "lakehouse",
+        dialect: "dremio",
+      };
+
+      const result = sqlCode({
+        table: { ...mockTable, name: "shipments" as const },
+        columnName: "order",
+        sqlTableContext,
+      });
+      expect(result).toBe(
+        '_df = mo.sql(f"""\nSELECT "order" FROM "lakehouse"."operations"."shipments" LIMIT 100\n""", engine=dremio_conn)',
+      );
+    });
+
+    it("should not quote * column name", () => {
+      const sqlTableContext: SQLTableContext = {
+        engine: "dremio_conn",
+        schema: "operations",
+        defaultSchema: "",
+        defaultDatabase: "",
+        database: "lakehouse",
+        dialect: "dremio",
+      };
+
+      const result = sqlCode({
+        table: { ...mockTable, name: "customers" as const },
+        columnName: "*",
+        sqlTableContext,
+      });
+      expect(result).toBe(
+        '_df = mo.sql(f"""\nSELECT * FROM "lakehouse"."operations"."customers" LIMIT 100\n""", engine=dremio_conn)',
+      );
+    });
+
+    it("should preserve dots inside quoted schema names", () => {
+      const sqlTableContext: SQLTableContext = {
+        engine: "dremio_conn",
+        schema: "samples.dremio.com",
+        defaultSchema: "",
+        defaultDatabase: "",
+        database: "Samples",
+        dialect: "dremio",
+      };
+
+      const result = sqlCode({
+        table: { ...mockTable, name: "airlines" as const },
+        columnName: "*",
+        sqlTableContext,
+      });
+      expect(result).toBe(
+        '_df = mo.sql(f"""\nSELECT * FROM "Samples"."samples.dremio.com"."airlines" LIMIT 100\n""", engine=dremio_conn)',
+      );
+    });
+  });
+
   describe("fallback behavior", () => {
     it("should use default formatter for unknown dialect", () => {
       const sqlTableContext: SQLTableContext = {

package/src/components/datasources/utils.ts

@@ -15,9 +15,9 @@ export function isSchemaless(schemaName: string) {
 
 interface SqlCodeFormatter {
   /**
-   * Format the table name based on dialect-specific rules
+   * Format the table path based on dialect-specific rules
    */
-  formatTableName: (tableName: string) => string;
+  formatTablePath: (tablePath: string[]) => string;
   /**
    * Format the SELECT clause
    */
@@ -25,7 +25,7 @@ interface SqlCodeFormatter {
 }
 
 const defaultFormatter: SqlCodeFormatter = {
-  formatTableName: (tableName: string) => tableName,
+  formatTablePath: (tablePath: string[]) => tablePath.join("."),
   formatSelectClause: (columnName: string, tableName: string) =>
     `SELECT ${columnName} FROM ${tableName} LIMIT 100`,
 };
@@ -41,7 +41,8 @@ function getFormatter(dialect: string): SqlCodeFormatter {
       const quote = BigQueryDialect.spec.identifierQuotes;
       return {
         // BigQuery uses backticks for identifiers
-        formatTableName: (tableName: string) => `${quote}${tableName}${quote}`,
+        formatTablePath: (tablePath: string[]) =>
+          `${quote}${tablePath.join(".")}${quote}`,
         formatSelectClause: defaultFormatter.formatSelectClause,
       };
     }
@@ -49,7 +50,7 @@ function getFormatter(dialect: string): SqlCodeFormatter {
     case "sqlserver":
     case "microsoft sql server":
       return {
-        formatTableName: defaultFormatter.formatTableName,
+        formatTablePath: defaultFormatter.formatTablePath,
         formatSelectClause: (columnName: string, tableName: string) =>
           `SELECT TOP 100 ${columnName} FROM ${tableName}`,
       };
@@ -57,12 +58,11 @@ function getFormatter(dialect: string): SqlCodeFormatter {
     case "postgres":
     case "postgresql":
     case "duckdb":
+    case "dremio":
       // Quote column and table names to avoid raising errors on weird characters
       return {
-        formatTableName: (tableName: string) => {
-          const parts = tableName.split(".");
-          return parts.map((part) => `"${part}"`).join(".");
-        },
+        formatTablePath: (tablePath: string[]) =>
+          tablePath.map((part) => `"${part}"`).join("."),
         formatSelectClause: (columnName: string, tableName: string) =>
           `SELECT ${columnName === "*" ? "*" : `"${columnName}"`} FROM ${tableName} LIMIT 100`,
       };
@@ -114,26 +114,27 @@ export function sqlCode({
       database,
       dialect,
     } = sqlTableContext;
-    let tableName = table.name;
+    const tablePath = [table.name];
 
     // Set the fully qualified table name based on schema and database
     if (isSchemaless(schema)) {
-      tableName =
-        database === defaultDatabase ? tableName : `${database}.${tableName}`;
+      if (database !== defaultDatabase) {
+        tablePath.unshift(database);
+      }
     } else {
       // Include schema if it's not the default schema
       if (schema !== defaultSchema) {
-        tableName = `${schema}.${tableName}`;
+        tablePath.unshift(schema);
       }
 
       // Include database if it's not the default database
       if (database !== defaultDatabase) {
-        tableName = `${database}.${tableName}`;
+        tablePath.unshift(database);
       }
     }
 
     const formatter = getFormatter(dialect);
-    const formattedTableName = formatter.formatTableName(tableName);
+    const formattedTableName = formatter.formatTablePath(tablePath);
     const selectClause = formatter.formatSelectClause(
       columnName,
       formattedTableName,

package/src/components/editor/actions/pair-with-agent-modal.tsx

@@ -113,6 +113,7 @@ export const PairWithAgentModal: React.FC<{
             className="underline"
           >
             Learn more
+            <span className="sr-only"> about pairing marimo with an agent</span>
           </a>
           .
         </DialogDescription>

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

@@ -48,7 +48,7 @@ import {
 import { switchLanguage } from "@/core/codemirror/language/extension";
 import { MARKDOWN_INITIAL_HIDE_CODE } from "@/core/codemirror/language/languages/markdown";
 import {
-  aiEnabledAtom,
+  aiFeaturesEnabledAtom,
   appWidthAtom,
   autoInstantiateAtom,
 } from "@/core/config/config";
@@ -100,7 +100,7 @@ export function useCellActionButtons({ cell, closePopover }: Props) {
   const deleteCell = useDeleteCellCallback();
   const { openModal } = useImperativeModal();
   const setAiCompletionCell = useSetAtom(aiCompletionCellAtom);
-  const aiEnabled = useAtomValue(aiEnabledAtom);
+  const aiFeaturesEnabled = useAtomValue(aiFeaturesEnabledAtom);
   const autoInstantiate = useAtomValue(autoInstantiateAtom);
   const kioskMode = useAtomValue(kioskModeAtom);
   const appWidth = useAtomValue(appWidthAtom);
@@ -162,7 +162,7 @@ export function useCellActionButtons({ cell, closePopover }: Props) {
       {
         icon: <SparklesIcon size={13} strokeWidth={1.5} />,
         label: "Refactor with AI",
-        hidden: !aiEnabled,
+        hidden: !aiFeaturesEnabled,
         handle: () => {
           setAiCompletionCell((current) =>
             current?.cellId === cellId ? null : { cellId },

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

@@ -142,9 +142,10 @@ export function useNotebookActions() {
   const { selectedLayout } = useLayoutState();
   const { setLayoutView } = useLayoutActions();
   const togglePresenting = useTogglePresenting();
-  // Fallback: if sharing is undefined, both are enabled by default
+  // Fallback: if sharing is undefined, all options are enabled by default
   const sharingHtmlEnabled = resolvedConfig.sharing?.html ?? true;
   const sharingWasmEnabled = resolvedConfig.sharing?.wasm ?? true;
+  const sharingMolabEnabled = resolvedConfig.sharing?.molab ?? true;
 
   // Server-side PDF export is always available outside WASM.
   // Browser print fallback is used in WASM.
@@ -360,7 +361,8 @@ export function useNotebookActions() {
       icon: <Share2Icon size={14} strokeWidth={1.5} />,
       label: "Share",
       handle: NOOP_HANDLER,
-      hidden: !sharingHtmlEnabled && !sharingWasmEnabled,
+      hidden:
+        !sharingHtmlEnabled && !sharingWasmEnabled && !sharingMolabEnabled,
       dropdown: [
         {
           icon: <GlobeIcon size={14} strokeWidth={1.5} />,
@@ -387,6 +389,7 @@ export function useNotebookActions() {
         {
           icon: <MarimoPlusIcon size={14} strokeWidth={1.5} />,
           label: "Create molab notebook",
+          hidden: !sharingMolabEnabled,
           handle: async () => {
             const code = await readCode();
             const url = createShareableLink({

package/src/components/editor/cell/code/cell-editor.tsx

@@ -26,7 +26,7 @@ import {
   connectedDocAtom,
   realTimeCollaboration,
 } from "@/core/codemirror/rtc/extension";
-import { autoInstantiateAtom, isAiEnabled } from "@/core/config/config";
+import { autoInstantiateAtom, isAiFeatureEnabled } from "@/core/config/config";
 import type { UserConfig } from "@/core/config/config-schema";
 import { OverridingHotkeyProvider } from "@/core/hotkeys/hotkeys";
 import { connectionAtom } from "@/core/network/connection";
@@ -173,13 +173,13 @@ const CellEditorInternal = ({
     });
   });
 
-  const aiEnabled = isAiEnabled(userConfig);
+  const aiFeaturesEnabled = isAiFeatureEnabled(userConfig);
 
   const extensions = useMemo(() => {
     const extensions = setupCodeMirror({
       cellId,
       showPlaceholder,
-      enableAI: aiEnabled,
+      enableAI: aiFeaturesEnabled,
       cellActions: {
         ...cellActions,
         afterToggleMarkdown,
@@ -201,6 +201,9 @@ const CellEditorInternal = ({
         splitCell,
         toggleHideCode,
         aiCellCompletion: () => {
+          if (!aiFeaturesEnabled) {
+            return false;
+          }
           let closed = false;
           setAiCompletionCell((v) => {
             // Toggle close
@@ -271,7 +274,7 @@ const CellEditorInternal = ({
     userConfig.display,
     userConfig.diagnostics,
     userConfig.ai?.inline_tooltip,
-    aiEnabled,
+    aiFeaturesEnabled,
     theme,
     showPlaceholder,
     cellActions,

package/src/components/editor/chrome/types.ts

@@ -201,16 +201,23 @@ export const PANEL_MAP = new Map<PanelType, PanelDescriptor>(
 );
 
 /**
- * Check if a panel should be hidden based on its `hidden` property
- * and `requiredCapability`.
+ * Check if a panel should be hidden based on its descriptor and runtime state.
  */
-export function isPanelHidden(
-  panel: PanelDescriptor,
-  capabilities: Capabilities,
-): boolean {
+export function isPanelHidden({
+  panel,
+  capabilities,
+  aiEnabled,
+}: {
+  panel: PanelDescriptor;
+  capabilities: Capabilities;
+  aiEnabled: boolean;
+}): boolean {
   if (panel.hidden) {
     return true;
   }
+  if (panel.type === "ai" && !aiEnabled) {
+    return true;
+  }
   if (panel.requiredCapability && !capabilities[panel.requiredCapability]) {
     return true;
   }