feat(table): unified filter pill UI with overflow strip

[kirangadhave]

Summary

Replaces the column-header value-picker submenu with a unified pill-based filter strip below the table. Users add, edit, and remove filters via a single editor popover anchored to the pills row.

UI

• New + button on the pills strip opens the editor. The column-header ··· menu routes through the same editor.
• Persistent filter icon on column headers whose column has an active filter.
• Filter pills format date / datetime / time values using the same helpers as column cells, so a pill matches what the cell shows.
• "Filter by values" is shown only on text and numeric columns.
• When pills overflow the strip width, the row clips with a soft right-edge fade and a "See all" button appears. Clicking it opens a draggable popover that lists every active filter. Overflow detection is a scrollWidth > clientWidth check on the strip itself with a ResizeObserver, re-measured on filter content change.

• Value truncation with a full-segments tooltip and inline is_in / not_in chip rendering via a shared chip primitive reused by the editor picker.

Filter by values editor

Filter pill + Tooltip

Internals

• Filter logic split out of filters.ts into a filters/ folder (types, operators, guards, builders, defaults, serialize, format).
  • Filters code blew up with all new additions, now the code is organized by concepts, so adding new filters or features should be easier.
• Removes the select filter type. Text and number columns carry their own in / not_in membership shape directly. supportsMembership is promoted to a type guard (isMembershipFilterType) used at every call site.
  • select was incorrect conceptually. select is a filter operator rather than a type.
• Operator groups (NULLISH, MEMBERSHIP, COMPARISON, TEXT_SCALAR, BOOLEAN_VALUE, EMPTY) consolidated so OPERATORS_WITHOUT_VALUE and per-type lists derive from one source.
  • Grouping operators by shape and purpose makes sense rather than just data type. We compose data type filters from the shape/purpose primitives.
  • For e.g. number column can have nullish, membership, comparision operators, but not text_scalar, empty or boolean operators
• Local-ISO date formatters moved to utils/dates and renamed dateToLocalISO* to make local-time semantics explicit (vs. Date.toISOString).

Demo

Screen.Recording.2026-05-22.at.4.11.59.PM.mov

Test plan

• Open mo.ui.table(df) with text, number, date, datetime, time, and boolean columns. Column ··· menu shows "Filter by values" only on text and numeric columns.
• + button on the pill strip and the column-header ··· Filter item both open the same editor.
• Filtered columns show the persistent filter icon next to the header.
• Add enough filters that the strip overflows: right edge fades, "See all" appears, popover lists every filter.
• Resize the table narrower / wider: "See all" appears / disappears as overflow changes.
• Date / datetime / time pill text matches the column-cell formatting for the same value.
• Pasting "X and Y", "X to Y", "X - Y", "X – Y" into a date range input all parse into the two date fields.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
marimo-docs	Ready	Preview, Comment	May 22, 2026 10:39pm

[kirangadhave]

@cubic-dev-ai

[cubic-dev-ai]

@cubic-dev-ai

@kirangadhave I have started the AI code review. It will take a few minutes to complete.

[cubic-dev-ai]

2 issues found across 17 files

Architecture diagram

sequenceDiagram
    participant Table as DataTable
    participant Ctx as FilterEditorProvider
    participant Header as ColumnHeader
    participant Pills as FilterPills
    participant Ghost as Ghost Row (hidden)
    participant AddBtn as AddFilterButton
    participant Editor as FilterPillEditor
    participant ChipPicker as CompactChipRow / Chip
    participant Overflow as Overflow Popover

    Note over Table,Overflow: Unified filter pill UI with overflow strip

    Table->>Ctx: Provide requestAddFilter callback
    Table->>Pills: Render with filters, addFilterSnapshot, onAddFilterSnapshotChange
    Table->>Pills: Pass table, calculateTopKRows

    Header->>Ctx: useFilterEditor()
    Ctx-->>Header: requestAddFilter

    alt User clicks "Filter" in column header
        Header->>+Ctx: requestAddFilter({ columnId })
        Ctx->>Table: setAddFilterSnapshot(buildEditorSnapshot(column))
        Table->>Pills: update addFilterSnapshot prop
        Pills->>AddBtn: snapshot != null
        AddBtn->>Editor: render FilterPillEditor with snapshot
    else User clicks "Filter by values" in column header
        Header->>+Ctx: requestAddFilter({ columnId, operator: "in" })
        Ctx->>Table: setAddFilterSnapshot(buildEditorSnapshot(column, { operator: "in" }))
        Table->>Pills: update addFilterSnapshot prop
        Pills->>AddBtn: snapshot != null
        AddBtn->>Editor: render FilterPillEditor with "in" operator
    end

    alt User clicks "+" button on pills strip
        AddBtn->>AddBtn: buildEditorSnapshot(first editable column)
        AddBtn->>AddBtn: set open = true
        AddBtn->>Editor: render FilterPillEditor
    else User clicks existing filter pill
        Pills->>Editor: open FilterPillEditor with pill's snapshot & editIndex
    end

    Editor->>Editor: User modifies operator/value
    Editor->>Table: onApply → setColumnFilters(updater)
    alt editIndex undefined (new filter)
        Table->>Table: prepend { id: draftColumnId, value } to filters
    else editIndex defined (edit existing)
        Table->>Table: replace filters[editIndex] = { id: draftColumnId, value }
    end
    Editor->>Pills: onClose → close popover

    Note over Pills,Ghost: Overflow detection uses hidden ghost row
    Pills->>Ghost: Always render all pills at natural width (hidden, not displayed)
    Ghost-->>Pills: Provide scrollWidth measurement
    Pills->>Pills: Compare scrollWidth > clientWidth via ResizeObserver
    alt hasOverflow
        Pills->>Pills: Apply CSS mask gradient on container
        Pills->>Pills: Show +N button at right edge
        Pills->>Overflow: open DraggablePopover with full filter list
        Overflow-->>Table: "Clear all" → setColumnFilters([])
    end

    Note over Pills,ChipPicker: Pill rendering
    Pills->>ChipPicker: Format value (scalar or multi-value)
    alt scalar value
        ChipPicker-->>Pills: Render truncated text with tooltip on hover
    else multi-value (in/not_in)
        ChipPicker->>ChipPicker: CompactChipRow with max 3 visible chips
        ChipPicker-->>Pills: Render chips with +N overflow indicator
    end

    Note over Table: Column header shows persistent filter indicator
    Header->>Header: hasFilter → show FilterIcon next to header text

Loading

<sub>Reply with feedback, questions, or to request a fix.

Re-trigger cubic</sub>

[Copilot]

Pull request overview

Copilot reviewed 28 out of 28 changed files in this pull request and generated 2 comments.