Why it works this way

1. 01People lost track of what was applied

   Filters lived behind one button. Applying one showed a count, so seeing what was actually on meant opening the menu again, and losing sight of the table.

   Filters 3Which three?

   Status2 itemsQueueIntakeCreated Date1 week ago

2. 02Sorting disappeared on wide tables

   Tables scroll sideways. Once the sorted column's header left the screen, nobody could tell how the rows were ordered without scrolling back to find it.

   PagesSourceAssignee→

   Sorted by… a column scrolled out of view

   Sort: Created DateNewest first

3. 03Every filter weighed the same

   The date range a report depends on sat in the same long, scrolling list as filters almost nobody used, so people hunted for the one they needed most.

   AssigneeBatch IDCreated DateDocument IDFax NumberQueue…

   Created DateStatusMore Filters

4. 04Controls competed with the data

   Titles, search and filters each took their own row, pushing the content people came for further down the screen.

   Three rows before the data starts

   DocumentsStatusOpenMore Filters

• Context is always on

  Every applied filter becomes a chip in the toolbar, with its value, ready to remove. The active sort gets a chip too, so it’s visible however far the table scrolls.

• Two tiers, not one list

  The one to three filters a screen depends on stay up front. Everything else waits in a searchable More Filters menu, and shows as a chip once it’s used.

• The data takes centre stage

  Title, search and filters share a single toolbar row, giving the space back to the content and making the workspace calmer.

Humanised dates

“1 week ago” and “1 month ago” are one click away instead of a calendar every time. They’re stored as words, not dates, so a shared link stays relative.

Apply, for heavy tables

Refreshing a large table on every tick makes the interface feel frantic. Apply keeps it calm; instant mode is there for small, fast data.

Predictable ordering

Selected options come to the top the next time a list opens, so reviewing choices is easy. While it’s open, nothing moves under the cursor.

One control to add and remove

The + of an empty chip turns into the × that clears it. Removing applies at once; Escape or clicking away throws unapplied edits away.

Keyboard first

Every popover works from the keyboard, focus always returns to the chip, and nothing animates for people who ask for reduced motion.

Yours to change

It installs as source, and every size and colour is a CSS variable, so it can match any product’s design system.

• Show the feel

  A working prototype carried the micro-interactions that static screens can’t.

• Faster buy-in

  Stakeholders could use it, not just look at it, which made approval quick.

• A clearer handoff

  Developers had a live reference next to the Figma specs.

This open-source version takes the same pattern further: built against a written spec, tested rule by rule, and packaged so any team can install it.

One modular filtering pattern became the source of truth for every data table: clarity without clutter, and control without complexity.

Making the interface quieter and more predictable lets the data speak for itself. A filter is the start of a conversation with the data; the job of the design is to keep that conversation clear.