Angular Material表格能否添加列筛选器？求相关实现方案

Angular Material官方确实没有内置现成的列筛选组件，但完全可以基于现有组件（如mat-menu、mat-input、mat-select等）自定义实现类似的列筛选功能，以下是具体实现方案：

1. 表头添加筛选触发菜单 #

在表格的表头单元格中嵌入筛选触发按钮，点击后弹出包含筛选控件的菜单：

<ng-container matColumnDef="productName">
  <th mat-header-cell *matHeaderCellDef>
    产品名称
    <button mat-icon-button [matMenuTriggerFor]="productFilterMenu">
      <mat-icon>filter_list</mat-icon>
    </button>
    <mat-menu #productFilterMenu="matMenu">
      <div class="filter-panel">
        <mat-form-field appearance="fill">
          <input matInput placeholder="搜索产品名" [(ngModel)]="productNameFilter">
        </mat-form-field>
        <div class="filter-actions">
          <button mat-button (click)="applyFilters()">应用</button>
          <button mat-button (click)="clearFilter('productName')">清除</button>
        </div>
      </div>
    </mat-menu>
  </th>
  <td mat-cell *matCellDef="let item">{{item.productName}}</td>
</ng-container>

2. 实现筛选逻辑 #

通过MatTableDataSource的filterPredicate自定义筛选规则，维护各列的筛选条件：

import { MatTableDataSource } from '@angular/material/table';

// 定义数据类型
interface Product {
  productName: string;
  category: string;
  price: number;
}

dataSource = new MatTableDataSource<Product>(yourProductList);
productNameFilter = '';
categoryFilter = '';

ngOnInit() {
  // 自定义筛选逻辑
  this.dataSource.filterPredicate = (data: Product, filter: string) => {
    const filters = JSON.parse(filter);
    let matches = true;
    
    // 产品名称筛选
    if (filters.productName) {
      matches = matches && data.productName.toLowerCase().includes(filters.productName.toLowerCase());
    }
    // 分类筛选（可扩展其他列）
    if (filters.category) {
      matches = matches && data.category === filters.category;
    }
    
    return matches;
  };
}

// 应用筛选
applyFilters() {
  const filterObj = {
    productName: this.productNameFilter,
    category: this.categoryFilter
  };
  this.dataSource.filter = JSON.stringify(filterObj);
}

// 清除指定列筛选
clearFilter(column: string) {
  if (column === 'productName') this.productNameFilter = '';
  if (column === 'category') this.categoryFilter = '';
  this.applyFilters();
}

3. 样式优化（可选） #

给筛选菜单添加基础样式，提升交互体验：

.filter-panel {
  padding: 16px;
  min-width: 280px;
}

.filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

如果需要更复杂的筛选（比如下拉多选、日期范围），只需将mat-input替换为mat-select（带多选）、mat-date-range-input等Angular Material组件，同时调整filterPredicate中的判断逻辑即可。

内容的提问来源于stack exchange，提问作者DragusPatrick