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

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

@@ -17,12 +17,15 @@ import {
   type PaginationState,
   type RowSelectionState,
   type SortingState,
+  type Table as TanstackTable,
   useReactTable,
 } from "@tanstack/react-table";
 import React, { memo } from "react";
 import { useLocale } from "react-aria";
 
+import { Button } from "@/components/ui/button";
 import { Table } from "@/components/ui/table";
+import { Banner } from "@/plugins/impl/common/error-banner";
 import type {
   CalculateTopKRows,
   GetRowIds,
@@ -63,6 +66,10 @@ import {
   type TooManyRows,
 } from "./types";
 import { getStableRowId } from "./utils";
+import {
+  getUserColumnVisibilityCounts,
+  useColumnVisibility,
+} from "./hooks/use-column-visibility";
 
 interface DataTableProps<TData> extends Partial<ExportActionProps> {
   wrapperClassName?: string;
@@ -80,6 +87,7 @@ interface DataTableProps<TData> extends Partial<ExportActionProps> {
   // JSON-serialized size of the currently-rendered data. Forwarded to
   // ExportMenu so hosts can size-gate the Export button via downloadSizeLimitAtom.
   sizeBytes?: number | null;
+  sizeBytesIsLoading?: boolean;
   totalColumns: number;
   pagination?: boolean;
   manualPagination?: boolean; // server-side pagination
@@ -107,6 +115,7 @@ interface DataTableProps<TData> extends Partial<ExportActionProps> {
   // Columns
   freezeColumnsLeft?: string[];
   freezeColumnsRight?: string[];
+  hiddenColumns?: string[];
   toggleDisplayHeader?: () => void;
   // Row viewer panel
   viewedRowIdx?: number;
@@ -119,6 +128,7 @@ interface DataTableProps<TData> extends Partial<ExportActionProps> {
   togglePanel?: (panelType: PanelType) => void;
   isPanelOpen?: (panelType: PanelType) => boolean;
   isAnyPanelOpen?: boolean;
+  renderTableExplorerPanel?: (table: TanstackTable<TData>) => React.ReactNode;
 }
 
 const DataTableInternal = <TData,>({
@@ -132,6 +142,7 @@ const DataTableInternal = <TData,>({
   totalColumns,
   totalRows,
   sizeBytes,
+  sizeBytesIsLoading,
   manualSorting = false,
   sorting,
   setSorting,
@@ -158,6 +169,7 @@ const DataTableInternal = <TData,>({
   reloading,
   freezeColumnsLeft,
   freezeColumnsRight,
+  hiddenColumns,
   toggleDisplayHeader,
   showChartBuilder,
   isChartBuilderOpen,
@@ -168,6 +180,7 @@ const DataTableInternal = <TData,>({
   isAnyPanelOpen,
   viewedRowIdx,
   onViewedRowChange,
+  renderTableExplorerPanel,
 }: DataTableProps<TData>) => {
   const [showLoadingBar, setShowLoadingBar] = React.useState<boolean>(false);
   const { locale } = useLocale();
@@ -176,6 +189,8 @@ const DataTableInternal = <TData,>({
     freezeColumnsLeft,
     freezeColumnsRight,
   );
+  const { columnVisibility, setColumnVisibility } =
+    useColumnVisibility(hiddenColumns);
 
   // Show loading bar only after a short delay to prevent flickering
   React.useEffect(() => {
@@ -267,6 +282,8 @@ const DataTableInternal = <TData,>({
     enableMultiCellSelection: selection === "multi-cell",
     // pinning
     onColumnPinningChange: setColumnPinning,
+    // col visibility
+    onColumnVisibilityChange: setColumnVisibility,
     // focus row
     enableFocusRow: true,
     onFocusRowChange: onViewedRowChange,
@@ -284,6 +301,7 @@ const DataTableInternal = <TData,>({
             { pagination: { pageIndex: 0, pageSize: data.length } }),
       rowSelection: rowSelection ?? {},
       cellSelection: cellSelection ?? [],
+      columnVisibility,
       cellStyling,
       columnPinning: columnPinning,
       cellHoverTemplate: hoverTemplate,
@@ -317,6 +335,10 @@ const DataTableInternal = <TData,>({
     [table],
   );
 
+  const visibilityCounts = getUserColumnVisibilityCounts(table);
+  const allUserColumnsHidden =
+    visibilityCounts.total > 0 && visibilityCounts.visible === 0;
+
   return (
     <FilterEditorProvider value={filterEditor}>
       <div className={cn(wrapperClassName, "flex flex-col space-y-1")}>
@@ -327,6 +349,7 @@ const DataTableInternal = <TData,>({
           addFilterSnapshot={addFilterSnapshot}
           onAddFilterSnapshotChange={setAddFilterSnapshot}
         />
+        {renderTableExplorerPanel?.(table)}
         <CellSelectionProvider>
           <div
             part="table-wrapper"
@@ -345,7 +368,20 @@ const DataTableInternal = <TData,>({
               isAnyPanelOpen={isAnyPanelOpen}
               downloadAs={downloadAs}
               sizeBytes={sizeBytes}
+              sizeBytesIsLoading={sizeBytesIsLoading}
             />
+            {allUserColumnsHidden && (
+              <Banner className="mb-1 mx-2 rounded flex items-center justify-between">
+                <span>All columns are hidden.</span>
+                <Button
+                  variant="link"
+                  size="xs"
+                  onClick={() => table.resetColumnVisibility(true)}
+                >
+                  Unhide all
+                </Button>
+              </Banner>
+            )}
             <Table
               className={cn(
                 "relative",
@@ -377,6 +413,7 @@ const DataTableInternal = <TData,>({
               getRowIds={getRowIds}
               showPageSizeSelector={showPageSizeSelector}
               tableLoading={reloading}
+              togglePanel={togglePanel}
             />
           </div>
         </CellSelectionProvider>

package/src/components/data-table/export-actions.tsx

@@ -9,7 +9,6 @@ import {
   TableIcon,
 } from "lucide-react";
 import React from "react";
-import { useLocale } from "react-aria";
 import { downloadSizeLimitAtom } from "./download-policy/atoms";
 import { logNever } from "@/utils/assertNever";
 import { cn } from "@/utils/cn";
@@ -20,7 +19,6 @@ import { Filenames } from "@/utils/filenames";
 import {
   jsonParseWithSpecialChar,
   jsonToMarkdown,
-  jsonToTSV,
 } from "@/utils/json/json-parser";
 import { MissingPackagePrompt } from "../datasources/missing-package-prompt";
 import { Button } from "../ui/button";
@@ -68,7 +66,12 @@ const FILE_TYPES = {
   },
 } as const;
 
-const downloadOptions = [FILE_TYPES.CSV, FILE_TYPES.JSON, FILE_TYPES.PARQUET];
+const downloadOptions = [
+  FILE_TYPES.CSV,
+  FILE_TYPES.TSV,
+  FILE_TYPES.JSON,
+  FILE_TYPES.PARQUET,
+];
 const copyOptions = [
   FILE_TYPES.TSV,
   FILE_TYPES.JSON,
@@ -79,6 +82,15 @@ const copyOptions = [
 type DownloadFormat = (typeof downloadOptions)[number]["format"];
 type CopyFormat = (typeof copyOptions)[number]["format"];
 
+// Each clipboard-copy format fetches from a backend download format, then
+// transforms the payload client-side as needed.
+const COPY_SOURCE_FORMAT: Record<CopyFormat, DownloadFormat> = {
+  csv: "csv",
+  tsv: "tsv",
+  json: "json",
+  markdown: "json",
+};
+
 export interface ExportActionProps {
   downloadAs: (req: { format: DownloadFormat }) => Promise<{
     url: string;
@@ -91,6 +103,7 @@ export interface ExportActionProps {
   // marimo-lsp inside VS Code) declares a download size cap. Null/undefined
   // means "no info" and the gate stays disabled (fail-open).
   sizeBytes?: number | null;
+  sizeBytesIsLoading?: boolean;
 }
 
 const labelForDownloadFormat = (format: DownloadFormat): string =>
@@ -99,14 +112,19 @@ const labelForCopyFormat = (format: CopyFormat): string =>
   copyOptions.find((opt) => opt.format === format)?.label ?? format;
 
 export const ExportMenu: React.FC<ExportActionProps> = (props) => {
-  const { locale } = useLocale();
-  const [open, setOpen] = React.useState(false);
+  const [downloadMenuOpen, setDownloadMenuOpen] = React.useState(false);
   const policy = useAtomValue(downloadSizeLimitAtom);
-  const disabled = !!(
+  const overLimit = !!(
     policy &&
     props.sizeBytes != null &&
     props.sizeBytes > policy.limitBytes
   );
+  const disabled = !!(policy && (props.sizeBytesIsLoading || overLimit));
+  const tooltipContent = !disabled
+    ? "Export"
+    : props.sizeBytesIsLoading
+      ? "Checking download size…"
+      : policy?.unavailableMessage;
 
   const button = (
     <Button
@@ -116,7 +134,7 @@ export const ExportMenu: React.FC<ExportActionProps> = (props) => {
       disabled={disabled}
       className={cn(
         "print:hidden text-xs gap-1",
-        open ? "text-primary" : "text-muted-foreground",
+        downloadMenuOpen ? "text-primary" : "text-muted-foreground",
       )}
     >
       <DownloadIcon className="w-3.5 h-3.5" />
@@ -206,7 +224,7 @@ export const ExportMenu: React.FC<ExportActionProps> = (props) => {
     await withLoadingToast(
       `Preparing ${labelForCopyFormat(format)} for clipboard...`,
       async () => {
-        const sourceFormat: DownloadFormat = format === "csv" ? "csv" : "json";
+        const sourceFormat = COPY_SOURCE_FORMAT[format];
         const result = await resolveDownloadUrl(sourceFormat, () => {
           void handleClipboardCopy(format);
         });
@@ -216,19 +234,15 @@ export const ExportMenu: React.FC<ExportActionProps> = (props) => {
 
         let text: string;
         switch (format) {
-          case "tsv": {
-            const json = await fetchJson(result.url);
-            text = jsonToTSV(json, locale);
+          case "tsv":
+          case "csv":
+            text = await fetchText(result.url);
             break;
-          }
           case "json": {
             const json = await fetchJson(result.url);
             text = JSON.stringify(json, null, 2);
             break;
           }
-          case "csv":
-            text = await fetchText(result.url);
-            break;
           case "markdown": {
             const json = await fetchJson(result.url);
             text = jsonToMarkdown(json);
@@ -248,10 +262,14 @@ export const ExportMenu: React.FC<ExportActionProps> = (props) => {
   };
 
   return (
-    <DropdownMenu modal={false} open={open} onOpenChange={setOpen}>
+    <DropdownMenu
+      modal={false}
+      open={downloadMenuOpen}
+      onOpenChange={setDownloadMenuOpen}
+    >
       <Tooltip
-        content={disabled ? policy?.unavailableMessage : "Export"}
-        open={open ? false : undefined}
+        content={tooltipContent}
+        open={downloadMenuOpen ? false : undefined}
       >
         <DropdownMenuTrigger asChild={true} disabled={disabled}>
           <span tabIndex={disabled ? 0 : -1} className="inline-flex">

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 = {