@marimo-team/frontend 0.23.9-dev9 → 0.23.9

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

@@ -1,6 +1,15 @@
 /* Copyright 2026 Marimo. All rights reserved. */
+"use no memo";
 
-import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
+// tanstack/table is not compatible with React compiler
+// https://github.com/TanStack/table/issues/5567
+
+import {
+  ChevronDownIcon,
+  ChevronRightIcon,
+  EyeIcon,
+  EyeOffIcon,
+} from "lucide-react";
 import { useState } from "react";
 import { useLocale } from "react-aria";
 import {
@@ -38,22 +47,28 @@ import {
   INDEX_COLUMN_NAME,
   SELECT_COLUMN_ID,
 } from "../types";
+import { smartMatch } from "@/utils/smartMatch";
+import type { Column, Table } from "@tanstack/react-table";
+import { cn } from "@/utils/cn";
+import { getColumnCountForDisplay } from "../hooks/use-column-visibility";
 
-interface ColumnExplorerPanelProps {
+interface ColumnExplorerPanelProps<TData> {
   previewColumn: PreviewColumn;
   fieldTypes: FieldTypesWithExternalType | undefined | null;
   totalRows: number | "too_many";
   totalColumns: number;
   tableId: string;
+  table: Table<TData>;
 }
 
-export const ColumnExplorerPanel = ({
+export function ColumnExplorerPanel<TData>({
   previewColumn,
   fieldTypes,
   totalRows,
   totalColumns,
   tableId,
-}: ColumnExplorerPanelProps) => {
+  table,
+}: ColumnExplorerPanelProps<TData>) {
   const [searchValue, setSearchValue] = useState("");
   const { locale } = useLocale();
   const columns = fieldTypes?.filter(([columnName]) => {
@@ -68,25 +83,43 @@ export const ColumnExplorerPanel = ({
   });
 
   const filteredColumns = columns?.filter(([columnName]) => {
-    return columnName.toLowerCase().includes(searchValue.toLowerCase());
+    return smartMatch(searchValue, columnName);
   });
 
-  const rowColumnHiddenStr = prettifyRowColumnCount({
+  const {
+    totalColumns: effectiveTotalColumns,
+    hiddenColumns: hiddenColumnCount,
+  } = getColumnCountForDisplay(table, totalColumns);
+
+  const { rowsAndColumns, hiddenSuffix } = prettifyRowColumnCount({
     numRows: totalRows,
-    totalColumns,
+    totalColumns: effectiveTotalColumns,
     locale,
-  }).rowsAndColumns;
+    hiddenColumns: hiddenColumnCount,
+  });
 
   return (
     <div className="mb-3">
-      <span className="text-xs font-semibold ml-2 flex">
-        {rowColumnHiddenStr}
+      <div className="text-xs font-semibold ml-2 flex items-center gap-1">
+        {rowsAndColumns}
+        {hiddenColumnCount > 0 && <span>{hiddenSuffix}</span>}
         <CopyClipboardIcon
           tooltip="Copy column names"
           value={columns?.map(([columnName]) => columnName).join(",\n") || ""}
-          className="h-3 w-3 ml-1 mt-0.5"
+          className="h-3 w-3"
         />
-      </span>
+        {hiddenColumnCount > 0 && (
+          <Button
+            type="button"
+            variant="link"
+            size="xs"
+            className="h-auto p-0"
+            onClick={() => table.resetColumnVisibility(true)}
+          >
+            Unhide all
+          </Button>
+        )}
+      </div>
       <Command className="h-5/6 bg-background" shouldFilter={false}>
         <CommandInput
           placeholder="Search columns..."
@@ -97,11 +130,14 @@ export const ColumnExplorerPanel = ({
           <CommandEmpty>No results.</CommandEmpty>
           {filteredColumns?.map(
             ([columnName, [dataType, externalType]], index) => {
+              const column = table.getColumn(columnName);
+
               return (
                 <ColumnItem
                   // Tables may have the same column names, hence we use tableId to make it unique
                   key={`${tableId}-${columnName}`}
                   columnName={columnName}
+                  column={column}
                   dataType={dataType}
                   externalType={externalType}
                   previewColumn={previewColumn}
@@ -114,21 +150,23 @@ export const ColumnExplorerPanel = ({
       </Command>
     </div>
   );
-};
+}
 
-const ColumnItem = ({
+function ColumnItem<TData>({
   columnName,
+  column,
   dataType,
   externalType,
   previewColumn,
   defaultExpanded = false,
 }: {
   columnName: string;
+  column?: Column<TData, unknown>;
   dataType: DataType;
   externalType: string;
   previewColumn: PreviewColumn;
   defaultExpanded?: boolean;
-}) => {
+}) {
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
 
   const columnText = (
@@ -148,20 +186,48 @@ const ColumnItem = ({
           <ChevronRightIcon className="w-3 h-3 shrink-0 text-muted-foreground" />
         )}
         <ColumnName columnName={columnText} dataType={dataType} />
-        <div className="ml-auto">
-          <Tooltip content="Copy column name" delayDuration={400}>
-            <Button
-              variant="text"
-              size="icon"
-              className="group-hover:opacity-100 opacity-0 hover:bg-muted text-muted-foreground hover:text-foreground"
+        <div className="ml-auto flex items-center gap-0.5">
+          <CopyClipboardIcon
+            tooltip="Copy column name"
+            value={columnName}
+            className="h-3 w-3"
+            buttonClassName={cn(
+              "inline-flex items-center justify-center rounded-md h-6 w-6",
+              "group-hover:opacity-100 opacity-0 hover:bg-muted text-muted-foreground hover:text-primary",
+            )}
+          />
+          {column?.getCanHide() && (
+            <Tooltip
+              content={column.getIsVisible() ? "Hide column" : "Show column"}
+              delayDuration={400}
             >
-              <CopyClipboardIcon
-                tooltip={false}
-                value={columnName}
-                className="h-3 w-3"
-              />
-            </Button>
-          </Tooltip>
+              <Button
+                type="button"
+                variant="text"
+                size="icon"
+                aria-label={
+                  column.getIsVisible() ? "Hide column" : "Show column"
+                }
+                className={cn(
+                  "hover:bg-muted text-muted-foreground hover:text-primary",
+                  column.getIsVisible()
+                    ? "group-hover:opacity-100 opacity-0"
+                    : "opacity-100",
+                )}
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  column.toggleVisibility(!column.getIsVisible());
+                }}
+              >
+                {column.getIsVisible() ? (
+                  <EyeIcon className="h-3 w-3" strokeWidth={2.5} />
+                ) : (
+                  <EyeOffIcon className="h-3 w-3" strokeWidth={2.5} />
+                )}
+              </Button>
+            </Tooltip>
+          )}
           <span className="text-xs text-muted-foreground">{externalType}</span>
         </div>
       </CommandItem>
@@ -176,7 +242,7 @@ const ColumnItem = ({
       )}
     </>
   );
-};
+}
 
 const ColumnPreview = ({
   previewColumn,

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

@@ -17,14 +17,14 @@ import { useFilterEditor } from "./filter-editor-context";
 import { EDITABLE_FILTER_TYPES, isMembershipFilterType } from "./filters";
 import {
   ClearFilterMenuItem,
+  ColumnPinning,
+  ColumnWrapping,
+  CopyColumn,
+  DataType,
+  FormatOptions,
   HideColumn,
-  renderColumnPinning,
-  renderColumnWrapping,
-  renderCopyColumn,
-  renderDataType,
-  renderFormatOptions,
   renderSortIcon,
-  renderSorts,
+  Sorts,
 } from "./header-items";
 
 interface DataTableColumnHeaderProps<
@@ -36,6 +36,11 @@ interface DataTableColumnHeaderProps<
   subheader?: React.ReactNode;
   justify?: "left" | "center" | "right";
   calculateTopKRows?: CalculateTopKRows;
+  /**
+   * Optional: only used to surface multi-column sort actions ("Clear all
+   * sorts"). Omitted by call sites that define their header inside column
+   * definitions, where the table instance isn't yet available.
+   */
   table?: Table<TData>;
 }
 
@@ -119,12 +124,12 @@ export const DataTableColumnHeader = <TData, TValue>({
             </button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="start">
-            {renderDataType(column)}
-            {renderSorts(column, table)}
-            {renderCopyColumn(column)}
-            {renderColumnPinning(column)}
-            {renderColumnWrapping(column)}
-            {renderFormatOptions(column, locale)}
+            <DataType column={column} />
+            <Sorts column={column} table={table} />
+            <CopyColumn column={column} />
+            <ColumnPinning column={column} />
+            <ColumnWrapping column={column} />
+            <FormatOptions column={column} locale={locale} />
             <HideColumn column={column} />
             {canEditFilter && <DropdownMenuSeparator />}
             {canEditFilter && (

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

@@ -17,6 +17,7 @@ import {
   type PaginationState,
   type RowSelectionState,
   type SortingState,
+  type Table as TanstackTable,
   useReactTable,
 } from "@tanstack/react-table";
 import React, { memo } from "react";
@@ -127,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,>({
@@ -178,6 +180,7 @@ const DataTableInternal = <TData,>({
   isAnyPanelOpen,
   viewedRowIdx,
   onViewedRowChange,
+  renderTableExplorerPanel,
 }: DataTableProps<TData>) => {
   const [showLoadingBar, setShowLoadingBar] = React.useState<boolean>(false);
   const { locale } = useLocale();
@@ -346,6 +349,7 @@ const DataTableInternal = <TData,>({
           addFilterSnapshot={addFilterSnapshot}
           onAddFilterSnapshotChange={setAddFilterSnapshot}
         />
+        {renderTableExplorerPanel?.(table)}
         <CellSelectionProvider>
           <div
             part="table-wrapper"

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;
@@ -100,7 +112,6 @@ const labelForCopyFormat = (format: CopyFormat): string =>
   copyOptions.find((opt) => opt.format === format)?.label ?? format;
 
 export const ExportMenu: React.FC<ExportActionProps> = (props) => {
-  const { locale } = useLocale();
   const [downloadMenuOpen, setDownloadMenuOpen] = React.useState(false);
   const policy = useAtomValue(downloadSizeLimitAtom);
   const overLimit = !!(
@@ -213,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);
         });
@@ -223,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);

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

@@ -29,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] : [];
 
@@ -83,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;
   }
@@ -108,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;
   }
@@ -157,7 +164,11 @@ export function HideColumn<TData, TValue>({
   );
 }
 
-export function renderCopyColumn<TData, TValue>(column: Column<TData, TValue>) {
+export function CopyColumn<TData, TValue>({
+  column,
+}: {
+  column: Column<TData, TValue>;
+}) {
   if (!column.getCanCopy?.()) {
     return null;
   }
@@ -177,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;
   }
@@ -271,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

@@ -40,3 +40,17 @@ export function getUserColumnVisibilityCounts<TData>(
     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/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;
   }