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

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,
@@ -41,7 +42,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";
@@ -289,67 +296,92 @@ 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],
+  );
+
   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}
+        />
+        <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" />
-            )}
-            {renderTableHeader(table, virtualize || Boolean(maxHeight))}
-            <DataTableBody
+            <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}
+            >
+              {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}
             />
-          </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/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);
+}