[SPIKE] AdvancedTable Filtering - Mega dropdown

[dchyun]

📌 Summary

This spike explores implementing filtering in the AdvancedTable through a mega dropdown approach.

Preview

🛠️ Detailed description

In this spike a new FilterBar component is created, which is also added as a contextual block to the AdvancedTable.

Component API

In the FilterBar component, the filters argument is the data that is used for the filters that are passed to consumers, and how consumers pass in filters to the component. It's general data structure is as follows:

{
  'terraform-version': {
    type: 'single-select',
    text: 'Terraform version'
    data: {
      value: '0.14.0',
    }
  }
}

There are various different types of filter types such as single-select, multi-select, range, and search. Each type has its own structure for the data. For example the range filter would be structured as follows:

{
  'module-count: {
    type: 'range',
    text: 'Module count'
    data: {
      selector: 'greater-than',
      value: 100,
    }
  }
}

When the onFilter event occurs after a user adds or removes a filter, filters is passed to the consumer who can use it to implement their own filtering of their data.

The dropdown that contains all of the filter options that can be applied sets the structure for the filters data, and consumers can use contextual components to set all of the filter options in the template.

<HdsAdvancedTable
  @columns={{this.demoColumns}}
  @model={{this.demoModelFilteredData}}
>
  <:actions as |A|>
      <A.FilterBar
        @filters={{this.filters}}
        @onFilter={{this.onFilter}}
        as |F|
      >
        <F.FiltersDropdown as |D|>
          <D.FilterGroup
            @key="terraform-version"
            @text="Terraform version"
            @type="single-select"
            as |F|
          >
            {{#each (get SAMPLE_MODEL_VALUES "name") as |option|}}
              <F.Radio @value={{option.value}}>{{option.label}}</F.Checkbox>
            {{/each}}
          </D.FilterGroup>
          <D.FilterGroup
            @key="module-count"
            @text="Module count"
            @type="range"
          />
...

🔗 External links

Jira ticket: HDS-XXX
Figma file: [if it applies]

---

👀 Component checklist

• Percy was checked for any visual regression
• A changelog entry was added via Changesets if needed (see templates here)

💬 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.

[vercel]

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

Project	Deployment	Preview	Updated (UTC)
hds-showcase	Ready	Preview	Nov 6, 2025 3:13pm
hds-website	Ready	Preview	Nov 6, 2025 3:13pm

[github-actions]

📦 RC Packages Published

Latest commit: a800966

Published 1 packages

@hashicorp/design-system-components@5.1.0-rc-20251106155636

yarn up -C @hashicorp/design-system-components@rc