title: custom filter in mat-table
body: <p>I'm using mat-table. It has a filter which works fine with doc example:</p>
  
  <p>From <a href="https://material.angular.io/components/table/overview" rel="noreferrer">https://material.angular.io/components/table/overview</a>, the original code is:</p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;div class="example-header"&gt;
         &lt;mat-form-field&gt;
           &lt;input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"&gt;
         &lt;/mat-form-field&gt;
     &lt;/div&gt;
  
     &lt;mat-table #table [dataSource]="dataSource"&gt;
        &lt;!-- the rest of the code --&gt;
     &lt;/mat-table&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>    export class TableFilteringExample {
       displayedColumns = ['position', 'name', 'weight', 'symbol'];
       dataSource = new MatTableDataSource(ELEMENT_DATA);
  
       applyFilter(filterValue: string) {
         filterValue = filterValue.trim(); // Remove whitespace
         filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
         this.dataSource.filter = filterValue;
       }
      }
      const ELEMENT_DATA: Element[] = [
       {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
       {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
       {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
       {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
       {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'}
      ]; 
  </code></pre>
  
  <p>With this implementation, when filter, it filter for any column.</p>
  
  <p>Now I'm trying to change the filter because I want is filter just for "name" column, so I'm trying to rewrite the filter and assign to filterData.</p>
  
  <pre class="lang-js prettyprint-override"><code>      applyFilter(filterValue: string) {
          filterValue = filterValue.trim(); // Remove whitespace
          filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
         this.dataSource.filteredData = this.filterByEmail(filterValue); 
          console.log(this.dataSource.filteredData); //value is what I want.
      }
  
      filterByName(filter: string): any {
        const dataFiltered = this.data.filter(function(item){
           return item.name.indexOf(filter) &gt; -1
         })
          return dataFiltered;
      }
  </code></pre>
  
  <p>In console, I can see this.dataSource.filteredData has the data I want to print, but table is not reload.</p>
  
  <p>What are I'm missing?</p>