hashicorp · dchyun · Sep 5, 2025
@@ -154,6 +154,7 @@
       "./components/hds/advanced-table/th-button-sort.js": "./dist/_app_/components/hds/advanced-table/th-button-sort.js",
       "./components/hds/advanced-table/th-button-tooltip.js": "./dist/_app_/components/hds/advanced-table/th-button-tooltip.js",
       "./components/hds/advanced-table/th-context-menu.js": "./dist/_app_/components/hds/advanced-table/th-context-menu.js",
+      "./components/hds/advanced-table/th-filter-menu.js": "./dist/_app_/components/hds/advanced-table/th-filter-menu.js",
       "./components/hds/advanced-table/th-reorder-drop-target.js": "./dist/_app_/components/hds/advanced-table/th-reorder-drop-target.js",
       "./components/hds/advanced-table/th-reorder-handle.js": "./dist/_app_/components/hds/advanced-table/th-reorder-handle.js",
       "./components/hds/advanced-table/th-resize-handle.js": "./dist/_app_/components/hds/advanced-table/th-resize-handle.js",

@@ -3,6 +3,16 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 
+{{#if this.hasActiveFilters}}
+  <Hds::Button
+    @text="Clear all filters"
+    @color="tertiary"
+    @icon="x"
+    @size="small"
+    class="hds-advanced-table__clear-filters-button"
+    {{on "click" this.clearFilters}}
+  />
+{{/if}}
 <div
   class="hds-advanced-table__container
     {{(if this.isStickyHeaderPinned 'hds-advanced-table__container--header-is-pinned')}}"
@@ -63,11 +73,14 @@
               @isStickyColumn={{this._isStickyColumn column}}
               @isStickyColumnPinned={{this.isStickyColumnPinned}}
               @tableHeight={{this._tableHeight}}
+              @filters={{this.filters}}
+              @isLiveFilter={{@isLiveFilter}}
               @onColumnResize={{@onColumnResize}}
               @onPinFirstColumn={{this._onPinFirstColumn}}
               @onReorderDragEnd={{fn (mut this._tableModel.reorderDraggedColumn) null}}
               @onReorderDragStart={{fn (mut this._tableModel.reorderDraggedColumn)}}
               @onReorderDrop={{this._tableModel.moveColumnToDropTarget}}
+              @onFilter={{this.onFilter}}
               {{this._registerThElement column}}
             >
               {{column.label}}

@@ -29,6 +29,8 @@ import type {
   HdsAdvancedTableModel,
   HdsAdvancedTableExpandState,
   HdsAdvancedTableColumnReorderCallback,
+  HdsAdvancedTableFilter,
+  HdsAdvancedTableFilters,
 } from './types.ts';
 import type HdsAdvancedTableColumnType from './models/column.ts';
 import type { HdsFormCheckboxBaseSignature } from '../form/checkbox/base.ts';
@@ -149,12 +151,15 @@ export interface HdsAdvancedTableSignature {
     hasStickyFirstColumn?: boolean;
     childrenKey?: string;
     maxHeight?: string;
+    filters?: HdsAdvancedTableFilters;
+    isLiveFilter?: boolean;
     onColumnReorder?: HdsAdvancedTableColumnReorderCallback;
     onColumnResize?: (columnKey: string, newWidth?: string) => void;
     onSelectionChange?: (
       selection: HdsAdvancedTableOnSelectionChangeSignature
     ) => void;
     onSort?: (sortBy: string, sortOrder: HdsAdvancedTableThSortOrder) => void;
+    onFilter?: (filters: HdsAdvancedTableFilters) => void;
   };
   Blocks: {
     body?: [
@@ -222,6 +227,8 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
   @tracked showScrollIndicatorTop = false;
   @tracked showScrollIndicatorBottom = false;
   @tracked stickyColumnOffset = '0px';
+  @tracked filters: HdsAdvancedTableFilters = this.args.filters ?? {};
+  @tracked hasActiveFilters: boolean = Object.keys(this.filters).length > 0;
 
   constructor(owner: Owner, args: HdsAdvancedTableSignature['Args']) {
     super(owner, args);
@@ -698,6 +705,30 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
     }
   }
 
+  @action
+  onFilter(
+    key: string,
+    keyFilter?: HdsAdvancedTableFilter[] | HdsAdvancedTableFilter
+  ): void {
+    this._updateFilter(key, keyFilter);
+
+    const { onFilter } = this.args;
+    if (onFilter && typeof onFilter === 'function') {
+      onFilter(this.filters);
+    }
+  }
+
+  @action
+  clearFilters(): void {
+    this.filters = {};
+    this.hasActiveFilters = false;
+
+    const { onFilter } = this.args;
+    if (onFilter && typeof onFilter === 'function') {
+      onFilter(this.filters);
+    }
+  }
+
   private _updateScrollIndicators(element: HTMLElement): void {
     // 6px as a buffer so the shadow doesn't appear over the border radius on the edge of the table
     const SCROLL_BUFFER = 6;
@@ -764,4 +795,21 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
     }
     return undefined;
   };
+
+  private _updateFilter(
+    key: string,
+    keyFilter?: HdsAdvancedTableFilter[] | HdsAdvancedTableFilter
+  ): void {
+    const newFilters = { ...this.filters };
+    if (
+      !keyFilter ||
+      (keyFilter && Array.isArray(keyFilter) && keyFilter.length === 0)
+    ) {
+      delete newFilters[key];
+    } else {
+      newFilters[key] = keyFilter;
+    }
+    this.filters = newFilters;
+    this.hasActiveFilters = Object.keys(this.filters).length > 0;
+  }
 }
@@ -13,7 +13,9 @@ import type { HdsDropdownToggleButtonSignature } from '../../dropdown/toggle/but
 import type {
   HdsAdvancedTableCell,
   HdsAdvancedTableHorizontalAlignment,
+  HdsAdvancedTableFilterOption,
   HdsAdvancedTableColumn as HdsAdvancedTableColumnType,
+  HdsAdvancedTableFilterType,
 } from '../types';
 
 export const DEFAULT_WIDTH = '1fr'; // default to '1fr' to allow flexible width
@@ -51,6 +53,8 @@ export default class HdsAdvancedTableColumn {
   @tracked
   thContextMenuToggleElement?: HdsDropdownToggleButtonSignature['Element'] =
     undefined;
+  @tracked filterOptions?: HdsAdvancedTableFilterOption[] = undefined;
+  @tracked filterType?: HdsAdvancedTableFilterType = undefined;
 
   // width properties
   @tracked transientWidth?: `${number}px` = undefined; // used for transient width changes
@@ -165,6 +169,8 @@ export default class HdsAdvancedTableColumn {
     this.tooltip = column.tooltip;
     this._setWidthValues(column);
     this.sortingFunction = column.sortingFunction;
+    this.filterOptions = column.filterOptions;
+    this.filterType = column.filterType;
   }
 
   // main collection function

@@ -0,0 +1,44 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<Hds::Dropdown
+  class="hds-advanced-table__th-filter-menu {{if this.hasActiveFilters 'hds-advanced-table__th-filter-menu--active'}}"
+  @enableCollisionDetection={{true}}
+  @listPosition="bottom-right"
+  @height="210px"
+  {{this._updateInternalFilters}}
+  ...attributes
+  as |D|
+>
+  <D.ToggleIcon @icon="filter" @text="Filter for {{@column.label}}" @hasChevron={{false}} @size="small" />
+  {{#each @column.filterOptions as |option|}}
+    {{#if (eq @column.filterType "radio")}}
+      <D.Radio
+        @value={{option.value}}
+        checked={{(this._isChecked option.value)}}
+        data-test-filter-option-key={{option.value}}
+        {{on "change" this.onFilter}}
+      >
+        {{option.label}}
+      </D.Radio>
+    {{else}}
+      <D.Checkbox
+        @value={{option.value}}
+        checked={{(this._isChecked option.value)}}
+        data-test-filter-option-key={{option.value}}
+        {{on "change" this.onFilter}}
+      >
+        {{option.label}}
+      </D.Checkbox>
+    {{/if}}
+  {{/each}}
+  {{#unless @isLiveFilter}}
+    <D.Footer @hasDivider={{true}}>
+      <Hds::ButtonSet>
+        <Hds::Button @text="Apply filters" @isFullWidth={{true}} @size="small" {{on "click" this.onApply}} />
+        <Hds::Button @text="Clear" @color="secondary" @size="small" {{on "click" this.onClear}} />
+      </Hds::ButtonSet>
+    </D.Footer>
+  {{/unless}}
+</Hds::Dropdown>
@@ -0,0 +1,135 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { modifier } from 'ember-modifier';
+
+import type HdsAdvancedTableColumn from './models/column.ts';
+import type { HdsDropdownSignature } from '../dropdown/index.ts';
+import type {
+  HdsAdvancedTableFilter,
+  HdsAdvancedTableFilters,
+} from './types.ts';
+
+export interface HdsAdvancedTableThFilterMenuSignature {
+  Args: {
+    column: HdsAdvancedTableColumn;
+    filters?: HdsAdvancedTableFilters;
+    isLiveFilter?: boolean;
+    onFilter?: (
+      key: string,
+      keyFilter?: HdsAdvancedTableFilter | HdsAdvancedTableFilter[]
+    ) => void;
+  };
+  Element: HdsDropdownSignature['Element'];
+}
+
+export default class HdsAdvancedTableThFilterMenu extends Component<HdsAdvancedTableThFilterMenuSignature> {
+  @tracked internalFilters:
+    | HdsAdvancedTableFilter[]
+    | HdsAdvancedTableFilter
+    | undefined = [];
+  @tracked hasActiveFilters: boolean = this.keyFilter !== undefined;
+
+  private _updateInternalFilters = modifier(() => {
+    this.internalFilters = this.keyFilter;
+  });
+
+  get keyFilter():
+    | HdsAdvancedTableFilter[]
+    | HdsAdvancedTableFilter
+    | undefined {
+    const { filters, column } = this.args;
+
+    if (!filters || !column) {
+      return undefined;
+    }
+    return filters[column.key];
+  }
+
+  @action
+  onFilter(event: Event): void {
+    const addFilter = (value: unknown): HdsAdvancedTableFilter[] => {
+      const newFilter = {
+        text: value as string,
+        value: value,
+      };
+      if (
+        Array.isArray(this.internalFilters) &&
+        input.classList.contains('hds-form-checkbox')
+      ) {
+        this.internalFilters.push(newFilter);
+        return this.internalFilters;
+      } else {
+        return [newFilter];
+      }
+    };
+
+    const removeFilter = (value: string): HdsAdvancedTableFilter[] => {
+      const newFilter = [] as HdsAdvancedTableFilter[];
+      if (Array.isArray(this.internalFilters)) {
+        this.internalFilters.forEach((filter) => {
+          if (filter.value != value) {
+            newFilter.push(filter);
+          }
+        });
+      }
+      return newFilter;
+    };
+
+    const input = event.target as HTMLInputElement;
+
+    let newFilter = [] as HdsAdvancedTableFilter[];
+
+    if (input.checked) {
+      newFilter = addFilter(input.value);
+    } else {
+      newFilter = removeFilter(input.value);
+    }
+
+    this.internalFilters = newFilter;
+
+    if (this.args.isLiveFilter) {
+      const { onFilter, column } = this.args;
+      if (onFilter && typeof onFilter === 'function') {
+        if (newFilter.length === 0) {
+          onFilter(column?.key, undefined);
+        } else {
+          onFilter(column?.key, newFilter);
+        }
+        this.hasActiveFilters = newFilter != undefined && newFilter.length > 0;
+      }
+    }
+  }
+
+  @action
+  onApply(): void {
+    const { onFilter, column } = this.args;
+    if (onFilter && typeof onFilter === 'function') {
+      onFilter(column?.key, this.internalFilters);
+    }
+  }
+
+  @action
+  onClear(): void {
+    this.internalFilters = [];
+
+    const { onFilter, column } = this.args;
+    if (onFilter && typeof onFilter === 'function') {
+      onFilter(column?.key, this.internalFilters);
+    }
+  }
+
+  private _isChecked = (value: string): boolean => {
+    if (Array.isArray(this.internalFilters)) {
+      return this.internalFilters.some((filter) => filter.value === value);
+    } else if (this.internalFilters && value) {
+      return this.internalFilters.value === value;
+    }
+    return false;
+  };
+}
@@ -34,6 +34,9 @@
       {{#if @tooltip}}
         <Hds::AdvancedTable::ThButtonTooltip @tooltip={{@tooltip}} @labelId={{this._labelId}} />
       {{/if}}
+      {{#if (gt this.numFilters 0)}}
+        <Hds::BadgeCount @text={{this.numFilters}} @type="outlined" @size="small" />
+      {{/if}}
     </div>
 
     <Hds::Layout::Flex class="hds-advanced-table__th-actions" @align="center" @gap="8">
@@ -44,6 +47,15 @@
       />
 
       {{#if @column}}
+        {{#if @column.filterOptions}}
+          <Hds::AdvancedTable::ThFilterMenu
+            @column={{@column}}
+            @filters={{@filters}}
+            @isLiveFilter={{@isLiveFilter}}
+            @onFilter={{@onFilter}}
+          />
+        {{/if}}
+
         <Hds::AdvancedTable::ThContextMenu
           @column={{@column}}
           @hasReorderableColumns={{@hasReorderableColumns}}