如何在Angular Mat-Table中的每一列上使用下拉菜单和文本框实现过滤器？

Question

Reference table我需要在mat-table的每一列中实现过滤器。使用搜索文本框或下拉菜单进行过滤。我需要在表格标题下方显示文本框/下拉列表。

我已经在mat-table中实现了排序和分页，并且这些必须在最终输出中存在。

<div class="mat-elevation-z8">
   <table mat-table [dataSource]="dataSourceClusters" matSort #clusterSorting class="table table--highlight table--hover">
      <ng-container matColumnDef="cluster" sticky>
         <th mat-header-cell *matHeaderCellDef mat-sort-header="dc_name">Cluster</th>
         <td mat-cell *matCellDef="let element"> {{ element.dc_name }} </td>
      </ng-container>
      <ng-container matColumnDef="owner">
         <th mat-header-cell *matHeaderCellDef mat-sort-header="Tag_Cluster_Owner"> Owner </th>
         <td mat-cell *matCellDef="let element"> {{ element.Tag_Cluster_Owner }} </td>
      </ng-container>
   </table>
   <mat-paginator #clusterPages [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>

要求是 （i）在标题下方有一个文本框/下拉菜单，但是当我在和之间添加一个时，在屏幕上看不到它 （ii）在文本框/下拉菜单中过滤按列数据