title: Angular Material Table, multiple filters with each a column
body: <p>I have build a table in Angular Material with a general filter (I have followed the official documentation for that). For the purpose of my project I would like to have different filter for each column of my table. For example a filter for the column &quot;name&quot; and another filter for the column &quot;amount&quot;. How can I achieve this?</p>
  <p>html</p>
  <pre><code>&lt;mat-form-field appearance=&quot;standard&quot; color=&quot;accent&quot;&gt;
    &lt;mat-label&gt;Filter&lt;/mat-label&gt;
    &lt;input matInput (keyup)=&quot;applyFilter($event)&quot; placeholder=&quot;Search&quot; #input&gt;
  &lt;/mat-form-field&gt;
  &lt;table mat-table [dataSource]=&quot;expense&quot; class=&quot;mat-elevation-z8&quot;&gt;
    &lt;ng-container matColumnDef=&quot;name&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; Name &lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.name}} &lt;/td&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef=&quot;amount&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; Amount &lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.amount | currency:'CHF '}} &lt;/td&gt;
    &lt;/ng-container&gt;
    [...]
  &lt;/table&gt;
  </code></pre>
  <p>typescript</p>
  <pre><code>applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
  </code></pre>