@marimo-team/frontend 0.23.9-dev3 → 0.23.9-dev30

package/src/components/data-table/add-filter-button.tsx

@@ -0,0 +1,85 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+"use no memo";
+
+import type { Column, Table } from "@tanstack/react-table";
+import { PlusIcon } from "lucide-react";
+import type { CalculateTopKRows } from "@/plugins/impl/DataTablePlugin";
+import { Button } from "../ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import {
+  buildEditorSnapshot,
+  editableColumns,
+  FilterPillEditor,
+} from "./filter-pill-editor";
+import type { Snapshot } from "./filters";
+
+interface AddFilterButtonProps<TData> {
+  table: Table<TData>;
+  calculateTopKRows?: CalculateTopKRows;
+  snapshot: Snapshot | null;
+  onSnapshotChange: (snapshot: Snapshot | null) => void;
+}
+
+export const AddFilterButton = <TData,>({
+  table,
+  calculateTopKRows,
+  snapshot,
+  onSnapshotChange,
+}: AddFilterButtonProps<TData>) => {
+  const columns = editableColumns(table);
+
+  if (columns.length === 0) {
+    return null;
+  }
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open) {
+      onSnapshotChange(null);
+      return;
+    }
+    if (snapshot === null) {
+      onSnapshotChange(
+        buildEditorSnapshot(columns[0] as Column<unknown, unknown>),
+      );
+    }
+  };
+
+  return (
+    <Popover
+      open={snapshot !== null}
+      onOpenChange={handleOpenChange}
+      modal={false}
+    >
+      <PopoverTrigger asChild={true}>
+        <Button
+          type="button"
+          size="icon"
+          variant="ghost"
+          className="h-5 w-5 -mr-1 rounded-full text-muted-foreground hover:text-foreground"
+          aria-label="Add filter"
+        >
+          <PlusIcon className="h-3.5 w-3.5" aria-hidden={true} />
+        </Button>
+      </PopoverTrigger>
+      {snapshot !== null && (
+        <PopoverContent
+          className="w-auto p-0"
+          align="start"
+          alignOffset={-10}
+          sideOffset={10}
+          avoidCollisions={true}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+          onCloseAutoFocus={(e) => e.preventDefault()}
+        >
+          <FilterPillEditor
+            key={`${snapshot.columnId}:${snapshot.value.operator}`}
+            snapshot={snapshot}
+            table={table}
+            calculateTopKRows={calculateTopKRows}
+            onClose={() => onSnapshotChange(null)}
+          />
+        </PopoverContent>
+      )}
+    </Popover>
+  );
+};

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,19 +83,43 @@ export const ColumnExplorerPanel = ({
   });
 
   const filteredColumns = columns?.filter(([columnName]) => {
-    return columnName.toLowerCase().includes(searchValue.toLowerCase());
+    return smartMatch(searchValue, columnName);
+  });
+
+  const {
+    totalColumns: effectiveTotalColumns,
+    hiddenColumns: hiddenColumnCount,
+  } = getColumnCountForDisplay(table, totalColumns);
+
+  const { rowsAndColumns, hiddenSuffix } = prettifyRowColumnCount({
+    numRows: totalRows,
+    totalColumns: effectiveTotalColumns,
+    locale,
+    hiddenColumns: hiddenColumnCount,
   });
 
   return (
     <div className="mb-3">
-      <span className="text-xs font-semibold ml-2 flex">
-        {prettifyRowColumnCount({ numRows: totalRows, totalColumns, locale })}
+      <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..."
@@ -91,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}
@@ -108,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 = (
@@ -142,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>
@@ -170,7 +242,7 @@ const ColumnItem = ({
       )}
     </>
   );
-};
+}
 
 const ColumnPreview = ({
   previewColumn,