diff --git a/tensorboard/webapp/hparams/BUILD b/tensorboard/webapp/hparams/BUILD
index 8a38a39a921..e93ca9fd9f3 100644
--- a/tensorboard/webapp/hparams/BUILD
+++ b/tensorboard/webapp/hparams/BUILD
@@ -22,6 +22,7 @@ tf_ts_library(
     ],
     deps = [
         "//tensorboard/webapp/runs/data_source",
+        "//tensorboard/webapp/widgets/data_table:types",
     ],
 )
 
diff --git a/tensorboard/webapp/hparams/_types.ts b/tensorboard/webapp/hparams/_types.ts
index d018b5c5859..31184729304 100644
--- a/tensorboard/webapp/hparams/_types.ts
+++ b/tensorboard/webapp/hparams/_types.ts
@@ -13,12 +13,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import {
-  DiscreteHparamValues,
-  DomainType,
   HparamSpec,
   MetricSpec,
 } from '../runs/data_source/runs_data_source_types';
 
+export {DiscreteFilter, IntervalFilter} from '../widgets/data_table/types';
+
 export {
   DatasetType,
   DiscreteHparamValue,
@@ -33,21 +33,3 @@ export interface HparamAndMetricSpec {
   hparams: HparamSpec[];
   metrics: MetricSpec[];
 }
-
-export interface DiscreteFilter {
-  type: DomainType.DISCRETE;
-  includeUndefined: boolean;
-  possibleValues: DiscreteHparamValues;
-  // Subset of `possibleValues`
-  filterValues: DiscreteHparamValues;
-}
-
-export interface IntervalFilter {
-  type: DomainType.INTERVAL;
-  includeUndefined: boolean;
-  minValue: number;
-  maxValue: number;
-  // Filter values have to be in between min and max values (inclusive).
-  filterLowerValue: number;
-  filterUpperValue: number;
-}
diff --git a/tensorboard/webapp/metrics/views/main_view/common_selectors.ts b/tensorboard/webapp/metrics/views/main_view/common_selectors.ts
index 526c99fbacf..66d783085e6 100644
--- a/tensorboard/webapp/metrics/views/main_view/common_selectors.ts
+++ b/tensorboard/webapp/metrics/views/main_view/common_selectors.ts
@@ -245,6 +245,24 @@ const getFilteredRenderableRuns = memoize((experimentIds: string[]) => {
   );
 });
 
+const getCurrentColumnFilters = memoize((experimentIds: string[]) => {
+  return createSelector(
+    getHparamFilterMapFromExperimentIds(experimentIds),
+    getMetricFilterMapFromExperimentIds(experimentIds),
+    (hparamFilters, metricFilters) => {
+      return new Map([...hparamFilters, ...metricFilters]);
+    }
+  );
+});
+
+export const getCurrentColumnFiltersFromRoute = createSelector(
+  (state) => state,
+  getExperimentIdsFromRoute,
+  (state, experimentIds) => {
+    return getCurrentColumnFilters(experimentIds || [])(state);
+  }
+);
+
 export const getFilteredRenderableRunsFromRoute = createSelector(
   (state) => state,
   getExperimentIdsFromRoute,
@@ -272,6 +290,9 @@ export const getPotentialHparamColumns = createSelector(
       experimentIds,
     });
 
+    const hparamFilters =
+      getHparamFilterMapFromExperimentIds(experimentIds)(state);
+
     return hparams.map((spec) => ({
       type: ColumnHeaderType.HPARAM,
       name: spec.name,
@@ -282,6 +303,7 @@ export const getPotentialHparamColumns = createSelector(
       removable: true,
       sortable: true,
       movable: true,
+      filterable: true,
     }));
   }
 );
diff --git a/tensorboard/webapp/runs/data_source/BUILD b/tensorboard/webapp/runs/data_source/BUILD
index b35f4e47051..23162e3d43f 100644
--- a/tensorboard/webapp/runs/data_source/BUILD
+++ b/tensorboard/webapp/runs/data_source/BUILD
@@ -13,6 +13,7 @@ tf_ng_module(
     ],
     deps = [
         ":backend_types",
+        "//tensorboard/webapp/widgets/data_table:types",
         "//tensorboard/webapp/webapp_data_source:http_client",
         "@npm//@angular/core",
         "@npm//rxjs",
@@ -24,7 +25,7 @@ tf_ts_library(
     srcs = [
         "runs_backend_types.ts",
     ],
-    visibility = ["//visibility:private"],
+    visibility = ["//tensorboard/webapp/runs/data_source:__subpackages__", "//tensorboard/webapp/widgets/data_table:__subpackages__",],
 )
 
 tf_ng_module(
diff --git a/tensorboard/webapp/runs/data_source/runs_data_source.ts b/tensorboard/webapp/runs/data_source/runs_data_source.ts
index 729a3de3367..4ab408b45c3 100644
--- a/tensorboard/webapp/runs/data_source/runs_data_source.ts
+++ b/tensorboard/webapp/runs/data_source/runs_data_source.ts
@@ -20,9 +20,9 @@ import {
   TBHttpClient,
 } from '../../webapp_data_source/tb_http_client';
 import * as backendTypes from './runs_backend_types';
+import {DomainType} from '../../widgets/data_table/types';
 import {
   Domain,
-  DomainType,
   HparamsAndMetadata,
   HparamSpec,
   HparamValue,
diff --git a/tensorboard/webapp/runs/data_source/runs_data_source_types.ts b/tensorboard/webapp/runs/data_source/runs_data_source_types.ts
index 1865c8cf04c..2daac58d4ae 100644
--- a/tensorboard/webapp/runs/data_source/runs_data_source_types.ts
+++ b/tensorboard/webapp/runs/data_source/runs_data_source_types.ts
@@ -16,6 +16,9 @@ import {Injectable} from '@angular/core';
 import {Observable} from 'rxjs';
 import * as backendTypes from './runs_backend_types';
 
+import {DomainType} from '../../widgets/data_table/types';
+export {DomainType} from '../../widgets/data_table/types';
+
 export {
   BackendHparamsValueType as HparamsValueType,
   DatasetType,
@@ -41,11 +44,6 @@ export interface RunToHparamsAndMetrics {
   };
 }
 
-export enum DomainType {
-  DISCRETE,
-  INTERVAL,
-}
-
 interface IntervalDomain {
   type: DomainType.INTERVAL;
   minValue: number;
diff --git a/tensorboard/webapp/runs/store/runs_reducers.ts b/tensorboard/webapp/runs/store/runs_reducers.ts
index 1d144cb745f..16056953875 100644
--- a/tensorboard/webapp/runs/store/runs_reducers.ts
+++ b/tensorboard/webapp/runs/store/runs_reducers.ts
@@ -330,6 +330,7 @@ const {initialState: uiInitialState, reducers: uiNamespaceContextedReducers} =
           enabled: true,
           sortable: true,
           movable: true,
+          filterable: false,
         },
       ],
       sortingInfo: {
diff --git a/tensorboard/webapp/runs/views/runs_table/runs_data_table.ng.html b/tensorboard/webapp/runs/views/runs_table/runs_data_table.ng.html
index ea15a8261f7..b66b5a92c36 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_data_table.ng.html
+++ b/tensorboard/webapp/runs/views/runs_table/runs_data_table.ng.html
@@ -28,10 +28,12 @@
   [sortingInfo]="sortingInfo"
   [columnCustomizationEnabled]="true"
   [selectableColumns]="selectableColumns"
+  [columnFilters]="columnFilters"
   (sortDataBy)="sortDataBy.emit($event)"
   (orderColumns)="orderColumns.emit($event)"
   (addColumn)="addColumn.emit($event)"
   (removeColumn)="removeColumn.emit($event)"
+  (addFilter)="addFilter.emit($event)"
 >
   <ng-container header>
     <ng-container *ngFor="let header of getHeaders()">
diff --git a/tensorboard/webapp/runs/views/runs_table/runs_data_table.ts b/tensorboard/webapp/runs/views/runs_table/runs_data_table.ts
index 1dbddad69c5..1fa1ddb258a 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_data_table.ts
+++ b/tensorboard/webapp/runs/views/runs_table/runs_data_table.ts
@@ -24,8 +24,10 @@ import {
   TableData,
   SortingInfo,
   ColumnHeaderType,
+  FilterAddedEvent,
+  DiscreteFilter,
+  IntervalFilter,
 } from '../../../widgets/data_table/types';
-
 @Component({
   selector: 'runs-data-table',
   templateUrl: 'runs_data_table.ng.html',
@@ -40,6 +42,7 @@ export class RunsDataTable {
   @Input() regexFilter!: string;
   @Input() isFullScreen!: boolean;
   @Input() selectableColumns!: ColumnHeader[];
+  @Input() columnFilters!: Map<string, DiscreteFilter | IntervalFilter>;
 
   ColumnHeaderType = ColumnHeaderType;
 
@@ -59,6 +62,7 @@ export class RunsDataTable {
   }>();
   @Output() removeColumn = new EventEmitter<ColumnHeader>();
   @Output() onSelectionDblClick = new EventEmitter<string>();
+  @Output() addFilter = new EventEmitter<FilterAddedEvent>();
 
   // These columns must be stored and reused to stop needless re-rendering of
   // the content and headers in these columns. This has been known to cause
diff --git a/tensorboard/webapp/runs/views/runs_table/runs_table_container.ts b/tensorboard/webapp/runs/views/runs_table/runs_table_container.ts
index 5af7981c05d..9f9c6c3941c 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_table_container.ts
+++ b/tensorboard/webapp/runs/views/runs_table/runs_table_container.ts
@@ -68,7 +68,7 @@ import {matchRunToRegex} from '../../../util/matcher';
 import {getEnableHparamsInTimeSeries} from '../../../feature_flag/store/feature_flag_selectors';
 import {
   ColumnHeader,
-  ColumnHeaderType,
+  FilterAddedEvent,
   SortingInfo,
   SortingOrder,
   TableData,
@@ -96,10 +96,10 @@ import {
 } from './runs_table_component';
 import {RunsTableColumn, RunTableItem} from './types';
 import {
+  getCurrentColumnFiltersFromRoute,
   getFilteredRenderableRunsFromRoute,
   getPotentialHparamColumns,
 } from '../../../metrics/views/main_view/common_selectors';
-import {RunToHParamValues} from '../../data_source/runs_data_source_types';
 import {runsTableFullScreenToggled} from '../../../core/actions';
 
 const getRunsLoading = createSelector<
@@ -271,6 +271,7 @@ function matchFilter(
       [headers]="runsColumns$ | async"
       [data]="sortedRunsTableData$ | async"
       [selectableColumns]="selectableColumns$ | async"
+      [columnFilters]="columnFilters$ | async"
       [sortingInfo]="sortingInfo$ | async"
       [experimentIds]="experimentIds"
       [regexFilter]="regexFilter$ | async"
@@ -285,6 +286,7 @@ function matchFilter(
       (toggleFullScreen)="toggleFullScreen()"
       (addColumn)="addColumn($event)"
       (removeColumn)="removeColumn($event)"
+      (addFilter)="addHparamFilter($event)"
     ></runs-data-table>
   `,
   host: {
@@ -367,6 +369,8 @@ export class RunsTableContainer implements OnInit, OnDestroy {
     })
   );
 
+  columnFilters$ = this.store.select(getCurrentColumnFiltersFromRoute);
+
   allRunsTableData$ = this.store
     .select(getFilteredRenderableRunsFromRoute)
     .pipe(
@@ -823,6 +827,26 @@ export class RunsTableContainer implements OnInit, OnDestroy {
   useDataTable() {
     return this.hparamsEnabled.value && !this.forceLegacyTable;
   }
+
+  addHparamFilter(event: FilterAddedEvent) {
+    switch (event.value.type) {
+      case DomainType.INTERVAL:
+        this.onHparamIntervalFilterChanged({
+          name: event.header.name,
+          includeUndefined: event.value.includeUndefined,
+          filterLowerValue: (event.value as IntervalFilter).filterLowerValue,
+          filterUpperValue: (event.value as IntervalFilter).filterUpperValue,
+        });
+        break;
+      case DomainType.DISCRETE:
+        this.onHparamDiscreteFilterChanged({
+          hparamName: event.header.name,
+          includeUndefined: event.value.includeUndefined,
+          filterValues: (event.value as DiscreteFilter).filterValues,
+        });
+        break;
+    }
+  }
 }
 
 export const TEST_ONLY = {
diff --git a/tensorboard/webapp/widgets/data_table/BUILD b/tensorboard/webapp/widgets/data_table/BUILD
index df4c373cc01..221d41290f6 100644
--- a/tensorboard/webapp/widgets/data_table/BUILD
+++ b/tensorboard/webapp/widgets/data_table/BUILD
@@ -51,6 +51,16 @@ tf_sass_binary(
     ],
 )
 
+tf_sass_binary(
+    name = "filter_dialogue_styles",
+    src = "filter_dialogue.scss",
+    strict_deps = False,
+    deps = [
+        "//tensorboard/webapp:angular_material_sass_deps",
+        "//tensorboard/webapp/theme",
+    ],
+)
+
 tf_ng_module(
     name = "data_table",
     srcs = [
@@ -71,9 +81,11 @@ tf_ng_module(
     deps = [
         ":column_selector",
         ":data_table_header",
+        ":filter_dialogue",
         ":types",
         "//tensorboard/webapp/angular:expect_angular_material_button",
         "//tensorboard/webapp/angular:expect_angular_material_icon",
+        "//tensorboard/webapp/widgets/range_input:types",
         "//tensorboard/webapp/metrics/views/card_renderer:scalar_card_types",
         "//tensorboard/webapp/widgets/custom_modal",
         "//tensorboard/webapp/widgets/line_chart_v2/lib:formatter",
@@ -123,6 +135,28 @@ tf_ng_module(
     ],
 )
 
+tf_ng_module(
+    name = "filter_dialogue",
+    srcs = [
+        "filter_dialogue.ts",
+        "filter_dialogue_module.ts",
+    ],
+    assets = [
+        "filter_dialogue.ng.html",
+        ":filter_dialogue_styles",
+    ],
+    deps = [
+        ":types",
+        "//tensorboard/webapp/angular:expect_angular_material_button",
+        "//tensorboard/webapp/angular:expect_angular_material_checkbox",
+        "//tensorboard/webapp/widgets/range_input",
+        "//tensorboard/webapp/widgets/range_input:types",
+        "@npm//@angular/common",
+        "@npm//@angular/core",
+        "@npm//@angular/forms",
+    ],
+)
+
 tf_ts_library(
     name = "types",
     srcs = [
diff --git a/tensorboard/webapp/widgets/data_table/data_table_component.ng.html b/tensorboard/webapp/widgets/data_table/data_table_component.ng.html
index 2dc5674fdab..9d590b002f9 100644
--- a/tensorboard/webapp/widgets/data_table/data_table_component.ng.html
+++ b/tensorboard/webapp/widgets/data_table/data_table_component.ng.html
@@ -15,7 +15,7 @@
 <custom-modal #contextMenu>
   <div class="context-menu">
     <div
-      *ngIf="!contextMenuHeader?.removable && !contextMenuHeader?.sortable && !canContextMenuInsert()"
+      *ngIf="!contextMenuHeader?.removable && !contextMenuHeader?.sortable && !canContextMenuInsert() && !contextMenuHeader?.filterable"
       class="no-actions-message"
     >
       No Actions Available
@@ -47,17 +47,25 @@
       </ng-template>
     </button>
     <button
+      *ngIf="contextMenuHeader?.filterable"
+      class="context-menu-button"
       mat-button
+      (click)="openFilterMenu($event, contextMenuHeader)"
+    >
+      <mat-icon svgIcon="filter_alt_24px"></mat-icon> Filter
+    </button>
+    <button
       *ngIf="canContextMenuInsert()"
       class="context-menu-button"
+      mat-button
       (click)="openColumnSelector($event, Side.LEFT)"
     >
       <mat-icon svgIcon="add_24px"></mat-icon>Insert Column Left
     </button>
     <button
-      mat-button
       *ngIf="canContextMenuInsert()"
       class="context-menu-button"
+      mat-button
       (click)="openColumnSelector($event, Side.RIGHT)"
     >
       <mat-icon svgIcon="add_24px"></mat-icon>Insert Column Right
@@ -69,7 +77,7 @@
   #columnSelectorModal
   *ngIf="selectableColumns && selectableColumns.length"
   (onOpen)="focusColumnSelector()"
-  onClose="onColumnSelectorClosed()"
+  (onClose)="onColumnSelectorClosed()"
 >
   <tb-data-table-column-selector-component
     [selectableColumns]="selectableColumns"
@@ -77,6 +85,16 @@
   ></tb-data-table-column-selector-component>
 </custom-modal>
 
+<custom-modal #filterModal (onClose)="onFilterClosed()">
+  <tb-data-table-filter
+    *ngIf="getCurrentColumnFilter()"
+    [filter]="getCurrentColumnFilter()"
+    (intervalFilterChanged)="intervalFilterChanged($event)"
+    (discreteFilterChanged)="discreteFilterChanged($event)"
+    (includeUndefinedToggled)="includeUndefinedToggled()"
+  ></tb-data-table-filter>
+</custom-modal>
+
 <div class="data-table">
   <div class="header">
     <ng-content select="[header]"></ng-content>
diff --git a/tensorboard/webapp/widgets/data_table/data_table_component.ts b/tensorboard/webapp/widgets/data_table/data_table_component.ts
index 1efb407d7a6..c5ade76cfbb 100644
--- a/tensorboard/webapp/widgets/data_table/data_table_component.ts
+++ b/tensorboard/webapp/widgets/data_table/data_table_component.ts
@@ -28,6 +28,12 @@ import {
 import {
   ColumnHeader,
   ColumnHeaderType,
+  DiscreteFilter,
+  DiscreteFilterChange,
+  DiscreteFilterValue,
+  DiscreteFilterValues,
+  FilterAddedEvent,
+  IntervalFilter,
   SortingInfo,
   SortingOrder,
 } from './types';
@@ -36,6 +42,7 @@ import {Subscription} from 'rxjs';
 import {CustomModalComponent} from '../custom_modal/custom_modal_component';
 import {ColumnSelectorComponent} from './column_selector_component';
 import {ContentCellComponent} from './content_cell_component';
+import {RangeValues} from '../range_input/types';
 
 export enum Side {
   RIGHT,
@@ -59,6 +66,7 @@ export class DataTableComponent implements OnDestroy, AfterContentInit {
   @Input() sortingInfo!: SortingInfo;
   @Input() columnCustomizationEnabled!: boolean;
   @Input() selectableColumns?: ColumnHeader[];
+  @Input() columnFilters!: Map<string, DiscreteFilter | IntervalFilter>;
 
   @ContentChildren(HeaderCellComponent)
   headerCells!: QueryList<HeaderCellComponent>;
@@ -69,6 +77,7 @@ export class DataTableComponent implements OnDestroy, AfterContentInit {
 
   contextMenuHeader: ColumnHeader | undefined = undefined;
   insertColumnTo: Side | undefined = undefined;
+  filterColumn: ColumnHeader | undefined = undefined;
 
   @Output() sortDataBy = new EventEmitter<SortingInfo>();
   @Output() orderColumns = new EventEmitter<ColumnHeader[]>();
@@ -77,6 +86,7 @@ export class DataTableComponent implements OnDestroy, AfterContentInit {
     header: ColumnHeader;
     index?: number | undefined;
   }>();
+  @Output() addFilter = new EventEmitter<FilterAddedEvent>();
 
   @ViewChild('columnSelectorModal', {static: false})
   private readonly columnSelectorModal!: CustomModalComponent;
@@ -87,6 +97,9 @@ export class DataTableComponent implements OnDestroy, AfterContentInit {
   @ViewChild('contextMenu', {static: false})
   private readonly contextMenu!: CustomModalComponent;
 
+  @ViewChild('filterModal', {static: false})
+  private readonly filterModal!: CustomModalComponent;
+
   readonly ColumnHeaders = ColumnHeaderType;
   readonly SortingOrder = SortingOrder;
   readonly Side = Side;
@@ -304,7 +317,93 @@ export class DataTableComponent implements OnDestroy, AfterContentInit {
     return index;
   }
 
+  canBeContextMeFiltered() {
+    return this.contextMenuHeader?.filterable;
+  }
+
   onColumnAdded(header: ColumnHeader) {
     this.addColumn.emit({header, index: this.getInsertIndex()});
   }
+
+  openFilterMenu(event: MouseEvent, header: ColumnHeader) {
+    this.filterColumn = header;
+    const rect = (
+      (event.target as HTMLElement).closest('button') as HTMLButtonElement
+    ).getBoundingClientRect();
+    this.filterModal.openAtPosition({
+      x: rect.x + rect.width,
+      y: rect.y + rect.height,
+    });
+  }
+
+  getCurrentColumnFilter() {
+    if (!this.filterColumn) {
+      return;
+    }
+    return this.columnFilters.get(this.filterColumn?.name);
+  }
+
+  onFilterClosed() {
+    this.filterColumn = undefined;
+  }
+
+  intervalFilterChanged(value: RangeValues) {
+    if (!this.filterColumn) {
+      return;
+    }
+    const filter = this.getCurrentColumnFilter();
+    if (!filter) {
+      return;
+    }
+
+    this.addFilter.emit({
+      header: this.filterColumn,
+      value: {
+        ...filter,
+        filterLowerValue: value.lowerValue,
+        filterUpperValue: value.upperValue,
+      } as IntervalFilter,
+    });
+  }
+
+  discreteFilterChanged(value: DiscreteFilterValue) {
+    if (!this.filterColumn) {
+      return;
+    }
+    const filter = this.getCurrentColumnFilter();
+    if (!filter) {
+      return;
+    }
+    const newValues = new Set([...(filter as DiscreteFilter).filterValues]);
+    if (newValues.has(value)) {
+      newValues.delete(value);
+    } else {
+      newValues.add(value);
+    }
+
+    this.addFilter.emit({
+      header: this.filterColumn,
+      value: {
+        ...filter,
+        filterValues: Array.from(newValues),
+      } as DiscreteFilter,
+    });
+  }
+
+  includeUndefinedToggled() {
+    if (!this.filterColumn) {
+      return;
+    }
+    const filter = this.getCurrentColumnFilter();
+    if (!filter) {
+      return;
+    }
+    this.addFilter.emit({
+      header: this.filterColumn,
+      value: {
+        ...filter,
+        includeUndefined: !filter.includeUndefined,
+      },
+    });
+  }
 }
diff --git a/tensorboard/webapp/widgets/data_table/data_table_module.ts b/tensorboard/webapp/widgets/data_table/data_table_module.ts
index 0645133e65e..3ff3b538a85 100644
--- a/tensorboard/webapp/widgets/data_table/data_table_module.ts
+++ b/tensorboard/webapp/widgets/data_table/data_table_module.ts
@@ -24,6 +24,7 @@ import {ContentRowComponent} from './content_row_component';
 import {ColumnSelectorModule} from './column_selector_module';
 import {CustomModalModule} from '../custom_modal/custom_modal_module';
 import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {FilterDialogueModule} from './filter_dialogue_module';
 
 @NgModule({
   declarations: [
@@ -45,6 +46,7 @@ import {MatLegacyButtonModule} from '@angular/material/legacy-button';
     DataTableHeaderModule,
     CustomModalModule,
     ColumnSelectorModule,
+    FilterDialogueModule,
   ],
 })
 export class DataTableModule {}
diff --git a/tensorboard/webapp/widgets/data_table/filter_dialogue.ng.html b/tensorboard/webapp/widgets/data_table/filter_dialogue.ng.html
new file mode 100644
index 00000000000..7efa30de10e
--- /dev/null
+++ b/tensorboard/webapp/widgets/data_table/filter_dialogue.ng.html
@@ -0,0 +1,52 @@
+<!--
+@license
+Copyright 2023 The TensorFlow Authors. All Rights Reserved.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<div class="filter-dialogue">
+  <ng-container *ngIf="filter.type === DomainType.DISCRETE">
+    <div
+      *ngFor="let value of filter.possibleValues; index"
+      mat-menu-item
+      class="filter-menu-checkbox-row"
+      role="menuitemcheckbox"
+      (click)="$event.stopPropagation()"
+    >
+      <mat-checkbox
+        [checked]="filter.filterValues.includes(value)"
+        (change)="discreteFilterChanged.emit(value)"
+        ><span>{{ value }}</span></mat-checkbox
+      >
+    </div>
+  </ng-container>
+
+  <div
+    *ngIf="filter.type === DomainType.INTERVAL"
+    (click)="$event.stopPropagation()"
+    class="range-input-container"
+    disableRipple
+    mat-menu-item
+  >
+    <tb-range-input
+      [min]="filter.minValue"
+      [max]="filter.maxValue"
+      [lowerValue]="filter.filterLowerValue"
+      [upperValue]="filter.filterUpperValue"
+      (rangeValuesChanged)="intervalFilterChanged.emit($event)"
+    ></tb-range-input>
+  </div>
+
+  <mat-checkbox
+    [checked]="filter.includeUndefined"
+    (change)="includeUndefinedToggled.emit()"
+    >Include Undefined</mat-checkbox
+  >
+</div>
diff --git a/tensorboard/webapp/widgets/data_table/filter_dialogue.scss b/tensorboard/webapp/widgets/data_table/filter_dialogue.scss
new file mode 100644
index 00000000000..8f0ae795092
--- /dev/null
+++ b/tensorboard/webapp/widgets/data_table/filter_dialogue.scss
@@ -0,0 +1,33 @@
+/* Copyright 2023 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+@use '@angular/material' as mat;
+@import 'tensorboard/webapp/theme/tb_theme';
+
+.filter-dialogue {
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-color: mat.get-color-from-palette($tb-foreground, border);
+  background-color: mat.get-color-from-palette($tb-background, background);
+
+  @include tb-dark-theme {
+    border-color: mat.get-color-from-palette($tb-dark-foreground, border);
+    background-color: mat.get-color-from-palette(
+      $tb-dark-background,
+      'background'
+    );
+  }
+}
diff --git a/tensorboard/webapp/widgets/data_table/filter_dialogue.ts b/tensorboard/webapp/widgets/data_table/filter_dialogue.ts
new file mode 100644
index 00000000000..81df637e72d
--- /dev/null
+++ b/tensorboard/webapp/widgets/data_table/filter_dialogue.ts
@@ -0,0 +1,39 @@
+/* Copyright 2023 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {
+  DomainType,
+  DiscreteFilter,
+  IntervalFilter,
+  DiscreteFilterValue,
+} from './types';
+import {RangeValues} from '../range_input/types';
+
+@Component({
+  selector: 'tb-data-table-filter',
+  templateUrl: 'filter_dialogue.ng.html',
+  styleUrls: ['filter_dialogue.css'],
+})
+export class FilterDialogue {
+  DomainType = DomainType;
+
+  @Input() filter!: DiscreteFilter | IntervalFilter;
+
+  @Output() discreteFilterChanged = new EventEmitter<DiscreteFilterValue>();
+
+  @Output() intervalFilterChanged = new EventEmitter<RangeValues>();
+
+  @Output() includeUndefinedToggled = new EventEmitter<void>();
+}
diff --git a/tensorboard/webapp/widgets/data_table/filter_dialogue_module.ts b/tensorboard/webapp/widgets/data_table/filter_dialogue_module.ts
new file mode 100644
index 00000000000..0ba1adcb0eb
--- /dev/null
+++ b/tensorboard/webapp/widgets/data_table/filter_dialogue_module.ts
@@ -0,0 +1,35 @@
+/* Copyright 2023 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+
+import {NgModule} from '@angular/core';
+import {FilterDialogue} from './filter_dialogue';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {MatButtonModule} from '@angular/material/button';
+import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
+import {RangeInputModule} from '../range_input/range_input_module';
+
+@NgModule({
+  declarations: [FilterDialogue],
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatLegacyCheckboxModule,
+    FormsModule,
+    RangeInputModule,
+  ],
+  exports: [FilterDialogue],
+})
+export class FilterDialogueModule {}
diff --git a/tensorboard/webapp/widgets/data_table/types.ts b/tensorboard/webapp/widgets/data_table/types.ts
index 393dbb5cab1..13fc63bde96 100644
--- a/tensorboard/webapp/widgets/data_table/types.ts
+++ b/tensorboard/webapp/widgets/data_table/types.ts
@@ -12,7 +12,6 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
 /**
  * This enum defines the columns available in the data table. The
  * ScalarCardComponent must know which piece of data is associated with each
@@ -43,6 +42,44 @@ export enum ColumnHeaderType {
   CUSTOM = 'CUSTOM',
 }
 
+export enum DomainType {
+  DISCRETE,
+  INTERVAL,
+}
+
+export type DiscreteFilterValues = string[] | number[] | boolean[];
+
+export type DiscreteFilterValue = DiscreteFilterValues[number];
+
+export interface DiscreteFilter {
+  type: DomainType.DISCRETE;
+  includeUndefined: boolean;
+  possibleValues: DiscreteFilterValues;
+  // Subset of `possibleValues`
+  filterValues: DiscreteFilterValues;
+}
+
+export interface DiscreteFilterChange {
+  hparamName: string;
+  includeUndefined: boolean;
+  filterValues: DiscreteFilterValues;
+}
+
+export interface IntervalFilter {
+  type: DomainType.INTERVAL;
+  includeUndefined: boolean;
+  minValue: number;
+  maxValue: number;
+  // Filter values have to be in between min and max values (inclusive).
+  filterLowerValue: number;
+  filterUpperValue: number;
+}
+
+export interface FilterAddedEvent {
+  header: ColumnHeader;
+  value: IntervalFilter | DiscreteFilter;
+}
+
 export interface ColumnHeader {
   type: ColumnHeaderType;
   name: string;
@@ -53,6 +90,7 @@ export interface ColumnHeader {
   removable?: boolean;
   sortable?: boolean;
   movable?: boolean;
+  filterable?: boolean;
 }
 
 export enum SortingOrder {