使用按钮角材料表按列过滤

Question

I want to have a filter button on the column headers whereby I can filter the results by clicking a checkbox, as well as multiple column filtering.

This is what I've tried, the button loads the menu, but when clicked also starts the sorting, and the positioning isn't right:

<table mat-table [dataSource]="source" matSort (contextmenu)="onContextMenu($event)"
 matRipple [matRippleRadius]="'15'"
 [matRippleColor]="'#03a9f4'">

        <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name <button mat-button matSuffix mat-icon-button aria-label="Clear" [matMenuTriggerFor]="menu">
        <mat-icon>filter_list</mat-icon>
      </button>
      <mat-menu #menu>
          <ng-template matMenuContent>
            <div *ngFor="let item of items">
                <mat-checkbox class="mat-menu-item">{{item.name}}</mat-checkbox>  
            </div>
          </ng-template>
        </mat-menu>
    </th>
    <td mat-cell *matCellDef="let row"> {{row.name}} </td>
  </ng-container>

  <!-- Email Column -->
  <ng-container matColumnDef="emailAddress">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Email Address </th>
    <td mat-cell *matCellDef="let row"> {{row.emailAddress}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
  <tr mat-row *matRowDef="let row; columns: columns;"></tr>
</table>

<mat-paginator [length]="source.length" [pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons></mat-paginator>

Here is an example of what I want:

Answer 1

Have you tried adding a click event to your filter button to prevent sorting?

(click)="foo($event)"

foo($event: Event) {
    $event.stopPropagation();
}