feat(react,ui): built-in per-column header filter menu#185
Merged
Conversation
Per-column funnel → popover (operator select + typed value control by filterType), live-apply with multi-part gating, onFiltersChange, on-by-default for filterable columns. React component + @pretable/ui vanilla CSS; RTL tests. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…nnels Clicking a different column's funnel while a menu is open reused the same FilterMenu instance, so its mount-only draft stayed stale (previous column's operator/value) and an edit would write the stale draft to the new column. Key the root FilterMenu by columnId so it remounts (re-hydrates draft + re-focuses) on column change. Adds a regression test for the direct switch. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
Vercel preview readyPreview: https://pretable-n9u8uuupl-cacheplane.vercel.app Updated automatically by the |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Sub-project 2 of 3 of "filter UI + operators" (after the engine in #180). Adds a built-in, per-column header filter menu to
@pretable/react, styled in@pretable/ui.What it does
Every
filterablecolumn gets a header funnel (visible on header hover/focus, and permanently accented when a filter is active). Clicking it opens a popover dialog: an operator<select>(only the operators valid for the column'sfilterType) + a value control that swaps by type — text input, two inputs forbetween, native date input(s), or a checkbox list forenum(options fromfilterOptions, else auto-derived viadistinctColumnValues).isEmpty/isNotEmptyhide the value control.grid.setColumnFilter(free-text debounced ~200ms; select/checkbox/date immediate). Multi-part ops (between/dateBetween) gate — a half-entered range clears rather than blanking the grid.onFiltersChange(filters: Record<string, ColumnFilter>); fully controllable via the existingstate.filters.filterablecolumns (mirrors resize/reorder); opt out withfilterable: false.Implementation
packages/react/src/filter-menu/— purefilter-operators.ts(operators-per-type, value-shape, completeness gating, draft↔ColumnFilter) +FunnelButton/useFilterPopover/FilterMenu. None are publicly exported — the only new public API is theonFiltersChangeprop.<button>, so the funnel can't nest); oneFilterMenurenders at the surface root (fixed-position) to escape header clipping. Clicking the funnel never triggers sort/resize/reorder.@pretable/ui/grid.css::where()+data-pretable-filter-*, reusing existing tokens (no new tokens; contract test untouched).aria-haspopup="dialog"/aria-expanded; popoverrole="dialog"with an accessible name; Escape + outside-click close; native controls throughout.Notes
FilterMenuoncolumnId, with a regression test.~selector over-matches) — within spec, avoids per-hover re-renders.Scope
Hero adoption, a filtering docs page, and Playwright e2e are sub-project 3. The hero still uses controlled
state.filtersand is unchanged here.Validation
pnpm -r typecheck/lint/test(react 272, ui 19, website 220),pnpm format, websitebuild, andpnpm api(refreshed foronFiltersChange; second run a no-op) all green locally.Spec:
docs/superpowers/specs/2026-06-19-filter-header-menu-design.md· Plan:docs/superpowers/plans/2026-06-19-filter-header-menu.md🤖 Generated with Claude Code