[SPIKE] AdvancedTable Filtering - In-column
:pushpin: Summary
This spike explores implementing filtering in the AdvancedTable through an in-column approach.
:hammer_and_wrench: Detailed description
Component API
There are two parts to the component API changes made here in the AdvancedTable.
The filters argument sets the filters that are to be applied, and is what is used by consumers to filter their data. It takes the following format
{
'column-key': [
{ value: 'filter1', label: 'Filter 1' }
]
}
The second part is how the consumer passes in what columns are filterable, and what are the values available for those filters that users can select.
Inside the column model there are new arguments filterOptions and filterType. filterOptions specifies what options are available for filtering, and filterType specifies if the options should be a checkbox group or radio group.
Example:
columns = [
{
label: 'Project name',
key: 'project-name',
filterOptions: [
{ value: 'filter1', label: 'Filter 1' },
{ value: 'filter2', label: 'Filter 2' },
{ value: 'filter3', label: 'Filter 3' },
],
filterType: 'checkbox',
},
]
:camera_flash: Screenshots
:link: External links
Jira ticket: HDS-4380
:eyes: Component checklist
- [ ] Percy was checked for any visual regression
- [ ] A changelog entry was added via Changesets if needed (see templates here)
:speech_balloon: Please consider using conventional comments when reviewing this PR.
:clipboard: PCI review checklist
- [ ] If applicable, I've documented a plan to revert these changes if they require more than reverting the pull request.
- [ ] If applicable, I've worked with GRC to document the impact of any changes to security controls. Examples of changes to controls include access controls, encryption, logging, etc.
- [ ] If applicable, I've worked with GRC to ensure compliance due to a significant change to the in-scope PCI environment. Examples include changes to operating systems, ports, protocols, services, cryptography-related components, PII processing code, etc.
The latest updates on your projects. Learn more about Vercel for GitHub.
| Project | Deployment | Preview | Updated (UTC) |
|---|---|---|---|
| hds-showcase | Preview | Sep 17, 2025 6:02pm | |
| hds-website | Preview | Sep 17, 2025 6:02pm |