@marimo-team/frontend 0.23.9-dev2 → 0.23.9-dev21

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

@@ -44,9 +44,10 @@ import { detectSentinel, splitLeadingTrailingWhitespace } from "./utils";
 import { uniformSample } from "./uniformSample";
 import { MarkdownUrlDetector, UrlDetector } from "./url-detector";
 
+export const NAMELESS_COLUMN_PREFIX = "__m_column__";
 // Artificial limit to display long strings
+export const SELECT_ID = "__select__";
 const MAX_STRING_LENGTH = 50;
-const SELECT_ID = "__select__";
 
 function inferDataType(value: unknown): [type: DataType, displayType: string] {
   if (typeof value === "string") {
@@ -106,8 +107,6 @@ export function inferFieldTypes<T>(items: T[]): FieldTypesWithExternalType {
   return Objects.entries(fieldTypes);
 }
 
-export const NAMELESS_COLUMN_PREFIX = "__m_column__";
-
 export function generateColumns<T>({
   rowHeaders,
   selection,
@@ -192,7 +191,7 @@ export function generateColumns<T>({
       accessorFn: (row) => {
         return row[key as keyof T];
       },
-
+      enableHiding: !rowHeadersSet.has(key) && key !== "",
       header: ({ column, table }) => {
         const stats = chartSpecModel?.getColumnStats(key);
         const dtype = column.columnDef.meta?.dtype;

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

@@ -16,7 +16,11 @@ import {
   ContextMenuTrigger,
 } from "../ui/context-menu";
 import { DATA_CELL_ID } from "./cell-utils";
-import { Filter } from "./filters";
+import {
+  Filter,
+  isMembershipFilterType,
+  type MembershipFilterType,
+} from "./filters";
 import { selectedCellsAtom } from "./range-focus/atoms";
 import { getClipboardContent, getRawValue } from "./utils";
 
@@ -97,15 +101,21 @@ export const CellContextMenu = <TData,>({
   };
 
   const column = cell.column;
-  const canFilter = column.getCanFilter() && column.columnDef.meta?.filterType;
+  const filterType = column.columnDef.meta?.filterType;
+  const membershipFilterType: MembershipFilterType | undefined =
+    column.getCanFilter() && filterType && isMembershipFilterType(filterType)
+      ? filterType
+      : undefined;
 
-  const handleFilterCell = (operator: "in" | "not_in") => {
-    column.setFilterValue(
-      Filter.select({
-        options: [rawValue],
-        operator,
-      }),
-    );
+  const handleFilterCell = (
+    type: MembershipFilterType,
+    operator: "in" | "not_in",
+  ) => {
+    const filter =
+      type === "number"
+        ? Filter.number({ operator, values: [rawValue] })
+        : Filter.text({ operator, values: [rawValue] });
+    column.setFilterValue(filter);
   };
 
   return (
@@ -120,14 +130,18 @@ export const CellContextMenu = <TData,>({
           Copy selected cells
         </ContextMenuItem>
       )}
-      {canFilter && (
+      {membershipFilterType && (
         <>
           <ContextMenuSeparator />
-          <ContextMenuItem onClick={() => handleFilterCell("in")}>
+          <ContextMenuItem
+            onClick={() => handleFilterCell(membershipFilterType, "in")}
+          >
             <FilterIcon className="mo-dropdown-icon h-3 w-3" />
             Filter by this value
           </ContextMenuItem>
-          <ContextMenuItem onClick={() => handleFilterCell("not_in")}>
+          <ContextMenuItem
+            onClick={() => handleFilterCell(membershipFilterType, "not_in")}
+          >
             <FilterIcon className="mo-dropdown-icon h-3 w-3" />
             Remove rows with this value
           </ContextMenuItem>

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

@@ -5,6 +5,7 @@
 // https://github.com/TanStack/table/issues/5567
 
 import {
+  type Column,
   type ColumnDef,
   type ColumnFiltersState,
   ColumnPinning,
@@ -16,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,
@@ -41,7 +45,13 @@ import { ColumnFormattingFeature } from "./column-formatting/feature";
 import { ColumnWrappingFeature } from "./column-wrapping/feature";
 import { CopyColumnFeature } from "./copy-column/feature";
 import type { ExportActionProps } from "./export-actions";
+import {
+  type AddFilterRequest,
+  FilterEditorProvider,
+} from "./filter-editor-context";
+import { buildEditorSnapshot } from "./filter-pill-editor";
 import { FilterPills } from "./filter-pills";
+import type { Snapshot } from "./filters";
 import { FocusRowFeature } from "./focus-row/feature";
 import { useColumnPinning } from "./hooks/use-column-pinning";
 import { useScrollContainerHeight } from "./hooks/use-scroll-container-height";
@@ -56,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;
@@ -73,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
@@ -100,6 +115,7 @@ interface DataTableProps<TData> extends Partial<ExportActionProps> {
   // Columns
   freezeColumnsLeft?: string[];
   freezeColumnsRight?: string[];
+  hiddenColumns?: string[];
   toggleDisplayHeader?: () => void;
   // Row viewer panel
   viewedRowIdx?: number;
@@ -112,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,>({
@@ -125,6 +142,7 @@ const DataTableInternal = <TData,>({
   totalColumns,
   totalRows,
   sizeBytes,
+  sizeBytesIsLoading,
   manualSorting = false,
   sorting,
   setSorting,
@@ -151,6 +169,7 @@ const DataTableInternal = <TData,>({
   reloading,
   freezeColumnsLeft,
   freezeColumnsRight,
+  hiddenColumns,
   toggleDisplayHeader,
   showChartBuilder,
   isChartBuilderOpen,
@@ -161,6 +180,7 @@ const DataTableInternal = <TData,>({
   isAnyPanelOpen,
   viewedRowIdx,
   onViewedRowChange,
+  renderTableExplorerPanel,
 }: DataTableProps<TData>) => {
   const [showLoadingBar, setShowLoadingBar] = React.useState<boolean>(false);
   const { locale } = useLocale();
@@ -169,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(() => {
@@ -260,6 +282,8 @@ const DataTableInternal = <TData,>({
     enableMultiCellSelection: selection === "multi-cell",
     // pinning
     onColumnPinningChange: setColumnPinning,
+    // col visibility
+    onColumnVisibilityChange: setColumnVisibility,
     // focus row
     enableFocusRow: true,
     onFocusRowChange: onViewedRowChange,
@@ -277,6 +301,7 @@ const DataTableInternal = <TData,>({
             { pagination: { pageIndex: 0, pageSize: data.length } }),
       rowSelection: rowSelection ?? {},
       cellSelection: cellSelection ?? [],
+      columnVisibility,
       cellStyling,
       columnPinning: columnPinning,
       cellHoverTemplate: hoverTemplate,
@@ -289,67 +314,111 @@ const DataTableInternal = <TData,>({
 
   const tableRef = useScrollContainerHeight({ maxHeight, virtualize });
 
+  const [addFilterSnapshot, setAddFilterSnapshot] =
+    React.useState<Snapshot | null>(null);
+
+  // useMemo instead of useCallback because need to pass it as object
+  const filterEditor = React.useMemo(
+    () => ({
+      requestAddFilter: (request: AddFilterRequest) => {
+        const column = table.getColumn(request.columnId);
+        if (!column) {
+          return;
+        }
+        setAddFilterSnapshot(
+          buildEditorSnapshot(column as Column<unknown, unknown>, {
+            operator: request.operator,
+          }),
+        );
+      },
+    }),
+    [table],
+  );
+
+  const visibilityCounts = getUserColumnVisibilityCounts(table);
+  const allUserColumnsHidden =
+    visibilityCounts.total > 0 && visibilityCounts.visible === 0;
+
   return (
-    <div className={cn(wrapperClassName, "flex flex-col space-y-1")}>
-      <FilterPills
-        filters={filters}
-        table={table}
-        calculateTopKRows={calculateTopKRows}
-      />
-      <CellSelectionProvider>
-        <div
-          part="table-wrapper"
-          className={cn(className || "rounded-md border overflow-hidden")}
-        >
-          <TableTopBar
-            enableSearch={enableSearch}
-            searchQuery={searchQuery}
-            onSearchQueryChange={onSearchQueryChange}
-            reloading={reloading}
-            showChartBuilder={showChartBuilder}
-            isChartBuilderOpen={isChartBuilderOpen}
-            toggleDisplayHeader={toggleDisplayHeader}
-            showTableExplorer={showTableExplorer}
-            togglePanel={togglePanel}
-            isAnyPanelOpen={isAnyPanelOpen}
-            downloadAs={downloadAs}
-            sizeBytes={sizeBytes}
-          />
-          <Table
-            className={cn(
-              "relative",
-              columns.length <= AUTO_WIDTH_MAX_COLUMNS ? "w-auto" : "w-full",
-            )}
-            ref={tableRef}
+    <FilterEditorProvider value={filterEditor}>
+      <div className={cn(wrapperClassName, "flex flex-col space-y-1")}>
+        <FilterPills
+          filters={filters}
+          table={table}
+          calculateTopKRows={calculateTopKRows}
+          addFilterSnapshot={addFilterSnapshot}
+          onAddFilterSnapshotChange={setAddFilterSnapshot}
+        />
+        {renderTableExplorerPanel?.(table)}
+        <CellSelectionProvider>
+          <div
+            part="table-wrapper"
+            className={cn(className || "rounded-md border overflow-hidden")}
           >
-            {showLoadingBar && (
-              <thead className="absolute top-0 left-0 h-[3px] w-1/2 bg-primary animate-slide" />
+            <TableTopBar
+              enableSearch={enableSearch}
+              searchQuery={searchQuery}
+              onSearchQueryChange={onSearchQueryChange}
+              reloading={reloading}
+              showChartBuilder={showChartBuilder}
+              isChartBuilderOpen={isChartBuilderOpen}
+              toggleDisplayHeader={toggleDisplayHeader}
+              showTableExplorer={showTableExplorer}
+              togglePanel={togglePanel}
+              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>
             )}
-            {renderTableHeader(table, virtualize || Boolean(maxHeight))}
-            <DataTableBody
+            <Table
+              className={cn(
+                "relative",
+                columns.length <= AUTO_WIDTH_MAX_COLUMNS ? "w-auto" : "w-full",
+              )}
+              ref={tableRef}
+            >
+              {showLoadingBar && (
+                <thead className="absolute top-0 left-0 h-[3px] w-1/2 bg-primary animate-slide" />
+              )}
+              {renderTableHeader(table, virtualize || Boolean(maxHeight))}
+              <DataTableBody
+                table={table}
+                columns={columns}
+                rowViewerPanelOpen={rowViewerPanelOpen}
+                getRowIndex={getPaginatedRowIndex}
+                viewedRowIdx={viewedRowIdx}
+                virtualize={virtualize}
+              />
+            </Table>
+            <TableBottomBar
+              part="table-footer"
+              className="pt-1.5 pb-0.5 border-t border-border"
+              totalColumns={totalColumns}
+              pagination={pagination}
+              selection={selection}
+              onRowSelectionChange={onRowSelectionChange}
               table={table}
-              columns={columns}
-              rowViewerPanelOpen={rowViewerPanelOpen}
-              getRowIndex={getPaginatedRowIndex}
-              viewedRowIdx={viewedRowIdx}
-              virtualize={virtualize}
+              getRowIds={getRowIds}
+              showPageSizeSelector={showPageSizeSelector}
+              tableLoading={reloading}
+              togglePanel={togglePanel}
             />
-          </Table>
-          <TableBottomBar
-            part="table-footer"
-            className="pt-1.5 pb-0.5 border-t border-border"
-            totalColumns={totalColumns}
-            pagination={pagination}
-            selection={selection}
-            onRowSelectionChange={onRowSelectionChange}
-            table={table}
-            getRowIds={getRowIds}
-            showPageSizeSelector={showPageSizeSelector}
-            tableLoading={reloading}
-          />
-        </div>
-      </CellSelectionProvider>
-    </div>
+          </div>
+        </CellSelectionProvider>
+      </div>
+    </FilterEditorProvider>
   );
 };
 

package/src/components/data-table/date-filter-inputs.tsx

@@ -11,11 +11,11 @@ import type { DateValue, TimeValue } from "react-aria-components";
 import { TimeField } from "@/components/ui/date-input";
 import { DatePicker, DateRangePicker } from "@/components/ui/date-picker";
 import {
-  dateToISODate,
-  dateToISODateTime,
-  dateToISOTime,
-  type FilterType,
-} from "./filters";
+  dateToLocalISODate,
+  dateToLocalISODateTime,
+  dateToLocalISOTime,
+} from "@/utils/dates";
+import type { FilterType } from "./filters";
 
 export type DateLikeFilterType = Extract<
   FilterType,
@@ -28,11 +28,11 @@ function dateToAria(
 ): DateValue | TimeValue {
   switch (filterType) {
     case "date":
-      return parseDate(dateToISODate(d));
+      return parseDate(dateToLocalISODate(d));
     case "datetime":
-      return parseDateTime(dateToISODateTime(d));
+      return parseDateTime(dateToLocalISODateTime(d));
     case "time":
-      return parseTime(dateToISOTime(d));
+      return parseTime(dateToLocalISOTime(d));
   }
 }
 
@@ -128,11 +128,11 @@ export function parsePastedDate(
   return parsed;
 }
 
-function parsePastedRange(
+export function parsePastedRange(
   filterType: DateLikeFilterType,
   text: string,
 ): { min: Date; max: Date } | undefined {
-  const parts = text.split(/\s+(?:-|–|—|to)\s+/i);
+  const parts = text.split(/\s+(?:-|–|—|to|and)\s+/i);
   if (parts.length === 2) {
     const min = parsePastedDate(filterType, parts[0]);
     const max = parsePastedDate(filterType, parts[1]);
@@ -194,6 +194,7 @@ export const DateLikeInput = ({
           key={seedKey}
           aria-label={ariaLabel}
           defaultValue={seedValue as Time | undefined}
+          hourCycle={24}
           onChange={handleChange}
           className={className}
         />
@@ -211,6 +212,7 @@ export const DateLikeInput = ({
           aria-label={ariaLabel}
           defaultValue={seedValue as CalendarDateTime | undefined}
           granularity="second"
+          hourCycle={24}
           onChange={handleChange}
           className={className}
         />
@@ -316,6 +318,7 @@ export const DateLikeRangeInput = ({
               | undefined
           }
           granularity="second"
+          hourCycle={24}
           onChange={handleChange}
           className={className}
         />

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

@@ -91,6 +91,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 =>
@@ -100,13 +101,19 @@ const labelForCopyFormat = (format: CopyFormat): string =>
 
 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 +123,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" />
@@ -248,10 +255,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/filter-by-values-picker.tsx

@@ -7,7 +7,6 @@ import { useMemo, useState } from "react";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { ErrorBanner } from "@/plugins/impl/common/error-banner";
 import type { CalculateTopKRows } from "@/plugins/impl/DataTablePlugin";
-import { cn } from "@/utils/cn";
 import { Logger } from "@/utils/Logger";
 import { Sets } from "@/utils/sets";
 import { smartMatch } from "@/utils/smartMatch";
@@ -24,6 +23,7 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import { SentinelCell } from "./sentinel-cell";
 import { detectSentinel, stringifyUnknownValue } from "./utils";
+import { CompactChipRow } from "./value-chips";
 
 const TOP_K_ROWS = 30;
 
@@ -42,19 +42,14 @@ export const FilterByValuesPicker = <TData, TValue>({
   onChange,
   creatable = false,
 }: Props<TData, TValue>) => {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(chosenValues.length === 0);
 
   const chosenValuesSet = useMemo(() => new Set(chosenValues), [chosenValues]);
 
-  const selectedValuesStr = useMemo(() => {
-    if (chosenValuesSet.size === 0) {
-      return "Select values…";
-    }
-    const items = [...chosenValuesSet].map((v) =>
-      stringifyUnknownValue({ value: v }),
-    );
-    return `[${items.join(", ")}]`;
-  }, [chosenValuesSet]);
+  const displayItems = useMemo(
+    () => [...chosenValuesSet].map((v) => stringifyUnknownValue({ value: v })),
+    [chosenValuesSet],
+  );
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
@@ -65,14 +60,13 @@ export const FilterByValuesPicker = <TData, TValue>({
           size="xs"
           className="h-6 mb-1 w-full justify-between font-normal"
         >
-          <span
-            className={cn(
-              "truncate",
-              chosenValuesSet.size === 0 && "text-muted-foreground",
-            )}
-          >
-            {selectedValuesStr}
-          </span>
+          {displayItems.length === 0 ? (
+            <span className="truncate text-muted-foreground">
+              Select values…
+            </span>
+          ) : (
+            <CompactChipRow items={displayItems} max={3} />
+          )}
           <ChevronDownIcon className="h-4 w-4 opacity-50 shrink-0" />
         </Button>
       </PopoverTrigger>

package/src/components/data-table/filter-editor-context.tsx

@@ -0,0 +1,34 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+/**
+ * Lets descendants of `DataTable` (column headers, etc.) ask the table to open
+ * the filter pill editor for a given column. The table owns the pending
+ * snapshot state and renders the editor anchored under the pills strip's
+ * `+` button; consumers only fire intent via `requestAddFilter`.
+ *
+ * `useFilterEditor()` returns `null` outside a provider, which callers treat as
+ * "filter editor not available" and hide the corresponding menu items.
+ */
+
+import { createContext, useContext } from "react";
+import type { OperatorType } from "@/plugins/impl/data-frames/utils/operators";
+
+export interface AddFilterRequest {
+  columnId: string;
+  /** Pre-select an operator (e.g. `"in"` for "Filter by values"); defaults to the column dtype's default. */
+  operator?: OperatorType;
+}
+
+interface FilterEditorContextValue {
+  requestAddFilter: (request: AddFilterRequest) => void;
+}
+
+const FilterEditorContext = createContext<FilterEditorContextValue | null>(
+  null,
+);
+
+export const FilterEditorProvider = FilterEditorContext.Provider;
+
+export function useFilterEditor(): FilterEditorContextValue | null {
+  return useContext(FilterEditorContext);
+}