title: How to add filter row inside material table?
body: <p>I'm using angular material table and I try to use filter option. In documentation I find filter <a href="https://stackblitz.com/angular/gkbpynnajyo" rel="nofollow noreferrer">example</a> but for my case I need to add textInputs after each headers. How can I do it ?
  My example</p>
  
  <pre><code>&lt;table mat-table [dataSource]="dataSource" class="mat-elevation-z8"&gt;
  
    &lt;!-- Id Column --&gt;
    &lt;ng-container matColumnDef="id"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; ID&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt; {{element.id}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- Name Column --&gt;
    &lt;ng-container matColumnDef="name"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; Name &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt; {{element.name}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
  
    &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
    &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
  &lt;/table&gt; 
  </code></pre>
  
  <p>I need table like this. <a href="https://i.stack.imgur.com/IK8EY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IK8EY.png" alt="material filter columns"></a> </p>