canonical / canonical/vanilla-framework

[New pattern]: Filtering on table pages

Open
#5,663 2 comments 0 reactions 0 assignees View on GitHub
Priority: Medium Tier: Apps WG: Validated
Dominant language
HTML
Stars
983
Forks
216
Avg merge
3d 13h
Merged PRs (30d)
3

Description

## Visual

![Image](https://github.com/user-attachments/assets/8a14c295-d07d-4e0c-b962-d86125266847)

## Context

We discussed this in mafia as a way to unify the way in which we design filters on table pages. The proposed behaviour would be:

- Filters appear as base buttons
- Each filter option can be separated into separate buttons, or appear in the same dropdown and organized into tabs. This will depend on the amount of space available and the number of filters.
- Once filters are selected, the number of options selected will be indicated by a badge between the label and chevron
- The combo-box should align with a corner of the trigger button.
- “Filter by” label can be included next to the buttons, but isn’t required
- Once a filter is selected, a reset action link will appear to the right of the filters. It will read “Reset all filters”

Further exploration needed:
- Responsive behaviour
- Depends on the design of the combo box, and would mean combo box should include multiple tabs.

Contributor guide

Open the contributing guide

Research direction

The issue names no files or tests. Start by locating the existing table-page filter and combo-box patterns in Vanilla Framework, then compare their current behavior with the proposed buttons, badges, reset link, alignment, tabs, and responsive requirements. Done should include an agreed pattern covering those behaviors.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html
Domain
design, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
32/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.