Patterns

Filters

The one filter for every table that can be filtered: a Filter button that opens a contextual menu of the attributes, each opening its values beside it, with the filters that are on shown as chips under the toolbar.

Live example

Open Filter, point at an attribute and its values open beside it. A choice applies at once: there is no Apply button. Organisation and Contributor are lists that grow with the data, so their submenu has a search box. (A date attribute, such as Updated, offers its presets and a Custom range in the same way.)

Filter menu and chips

5 of 5 projects

Adelaide Hills Bushland SurveyAdelaide Hills Landcare · Olivia WyattActive
Coorong Wetlands Bird CountBirds SA · Phoenix BakerActive
Flinders Ranges Reptile AtlasSouth Australian Museum · Olivia WyattDraft
Kangaroo Island Recovery MonitoringBirdLife Australia · Lana SteinerCompleted
Murray Mallee Woodland TransectsBirds SA · Maya DewittActive

Anatomy

The button is FilterMenu (app/pages/_shared/filter-menu.tsx), directly after the search in the toolbar, with the count of filters that are on. Its menu lists the attributes, an icon and a name each, a line between related groups (the group on the attribute), and the number ticked on an attribute that is on.
The values open as a submenu beside the attribute, a tick after each value that is on. A date attribute offers its presets and a Custom range, which drops a small date picker from the same button.
A list that grows with the data (a project, a person, an organisation) is marked searchable: from 4 values up its submenu has a search box at the top, ticked values stay on top, and at most 50 others are drawn at a time with a line saying how many are waiting, so a list of thousands is searched, not scrolled.
The chips are AttributeFilterChips: one removable chip per filter that is on, and Clear all, under the toolbar. Nothing is shown while no filter is on.
The state is useAttributeFilter (or useListFilter for a list described as sections and getters, useSelectionFilter where the selection lives outside the list). Each gives the rows that pass (filter.matches) and the object FilterMenu and the chips draw.

The rules

One filter. Every table that can be filtered uses this one. No second filter button, popover, side panel or hand-built chips on a table (contract section 4.2d).
It applies as you choose. No Apply button, and Escape closes the menu without changing what is ticked.
What is filtered is a column you would scan. A status, an organisation, a person, a date. Not an identifier: the search covers IDs and names.
Every attribute has an icon that names what it holds (icon on the attribute; one that is left out gets the icon for what its name says).
A choice goes back to page 1. The list's page resets whenever a filter changes.