title: Search in material-table not working with pipe
body: <p>In my material table I use <code>@pipe</code> to get <strong>name</strong> instead of <strong>position</strong> in position row... </p>
  
  <p>I get a <strong>name</strong> from another <strong>JSON</strong> file...</p>
  
  <pre><code>&lt;ng-container matColumnDef="position"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; No. &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; {{element.position | FilterData }} &lt;/mat-cell&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>@Pipe({
    name: 'FilterData'
  })
  export class OrdinalPipe implements PipeTransform {
  
    transform(value: Element): string {
      var data =   ElementTitle.filter(
            ElementTitle =&gt; ElementTitle.position === value);  // ElementTitle is second JSON file
            return  data[0].name; 
    }
  }
  </code></pre>
  
  <p>And now when I try to use <strong>SEARCH BOX</strong> in angular-material table to search by <strong>name</strong> there is no data, but if I enter <strong>position number</strong> I get filtered data properly. </p>
  
  <p>Probably, problem is because <strong>datatables data</strong> is taken from a component but <strong>pipe</strong> change data in html... </p>
  
  <p>How to TELL mat-table to also search by piped data in table? </p>
  
  <p>Here is working example, try to search by the name (Nitrogen, Helium etc...) 
  <a href="https://stackblitz.com/edit/angular-ttg6ux?file=src/app/table-filtering-example.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ttg6ux?file=src/app/table-filtering-example.ts</a></p>
  
  <p>Thnx</p>