Skip to content

Conversation

dchyun
Copy link
Contributor

@dchyun dchyun commented Sep 5, 2025

πŸ“Œ Summary

This spike explores implementing filtering in the AdvancedTable through an in-column approach.

Preview

πŸ› οΈ 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',
  },
]

πŸ“Έ Screenshots

πŸ”— External links

Jira ticket: HDS-4380


πŸ‘€ Component checklist

πŸ’¬ Please consider using conventional comments when reviewing this PR.

πŸ“‹ 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.

Copy link

vercel bot commented Sep 5, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Updated (UTC)
hds-showcase Ready Ready Preview Sep 17, 2025 6:02pm
hds-website Ready Ready Preview Sep 17, 2025 6:02pm

@dchyun dchyun force-pushed the dchyun/spike-adv-table-in-column-filter branch from 25fa5ae to e47f550 Compare September 17, 2025 17:56
@dchyun dchyun changed the title [SPIKE] AdvancedTable in-column filtering [SPIKE] AdvancedTable Filtering - In-column Sep 18, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants