javascript - Filtrering per kolumn med knapp angular material tabell

Jag vill ha en filterknapp på kolumnrubrikerna där jag kan filtrera resultaten genom att klicka på en kryssruta, samt filtrering på flera kolumner.

Detta är vad jag har försökt, knappen laddar menyn, men när den klickas startar den också sorteringen, och positioneringen är inte rätt:

<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>

Här är ett exempel på vad jag vill ha:

Svar #1

Har du provat att lägga till ett klick-evenemang på din filterknapp för att förhindra sortering?

(click)="foo($event)"

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

Relaterade artiklar