Enabling a filter
The user interacts with filter dropdowns directly in the toolbar (simple/intermediate) or clicks the filter button to open a side panel (advanced, or at lower breakpoints).
Search integration
- For simple filtering, search starts as compact button; expands to full-width "Search" input on click.
- Real-time filtering with match highlighting (yellow highlight on matching cell values).
- Search and filter dropdowns work together simultaneously.
- Adding a filter search input in the side panel is optional.
Advanced filtering
- Side panel with accordion-based categories.
- Each accordion expands to reveal filter options (checkboxes, search inputs, radio buttons).
- Multiple accordions can be expanded simultaneously.
See less/ See more
In instances where the amount of selected filter groups can't be shown in two lines, the remaining selected filter categories are hidden and accessible through the "See more" button
This view can be collapsed again with the inline button
Side panel accordions
All of the filter category accordions are collapsed and positioned at the bottom of the Side Panel
Count badge
Each accordion header shows a count badge for selected filters in that category.
Apply action
|
Action |
When used |
Behaviour |
|---|---|---|
|
No apply action required |
Simple and Intermediate filtering |
Filter take effect immediately. No “Apply” button. |
|
Apply action required |
Advanced filtering |
Requires explicit “Apply”. CTA bar shows Apply, Clear all and Cancel buttons. |
Applied filters - panel closed
- Filter button updates to show total count (e.g. "Filter (16)").
- In-page "Applied Filters:" row with category-level tags and "Clear all" link.
- Simple (wide): individual value tags. Lower breakpoints: grouped category tags. Advanced: grouped tags with count badges.