Skip to content

Conversation

dchyun
Copy link
Contributor

@dchyun dchyun commented Sep 18, 2025

πŸ“Œ Summary

This spike explores implementing filtering in the AdvancedTable through a filter bar 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.

A contextual FilterBar component is provided inside the AdvancedTable where a consumer can set the filterable dropdown options they would like to present to the user. The consumer provide what column filters are available through the contextual FiltersDropdown component, and provides the dropdowns for each column that will be displayed through a Dropdown contextual component.

Example:

<HdsAdvancedTable
  ...
  @filters={{this.filters}}
  @isLiveFilter={{this.isLiveFilter}}
  @onFilter={{this.onFilter}}
>
  <:actions as |A|>
    <A.FilterBar as |F|>
      <F.FiltersDropdown as |D|>
        <D.Checkbox @value="project-name">Project name</D.Checkbox>
      </F.FiltersDropdown>
      <F.Dropdown @key="project-name" as |D|>
        <D.ToggleButton @text="Project name" />
        {{#each (get SAMPLE_MODEL_VALUES "project-name") as |option|}}
          <D.Checkbox @value={{option.value}}>{{option.label}}</D.Checkbox>
        {{/each}}
      </F.Dropdown>
    </A.FilterBar>
  </:actions>
...

πŸ“Έ 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 18, 2025

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

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

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