title: Multiple mat-table with MatSort within the same component
body: <p>I have 2 material 2 tables in the same component with sorting. I cannot find a way to assign the MatSort directive to its own table. I'm only able to use MatSort on the first table and the second table doesn't recognize there is a MatSort on it. Does anyone know how to configure two tables with sorting in the same component?</p>
  
  <p>I've tried defining the ViewChild with different names, but it didn't work.</p>
  
  <pre><code>@ViewChild('hBSort') hBSort: MatSort;
  @ViewChild('sBSort') sBSort: MatSort;
  
  
  this.hBSource = new HBDataSource(this.hBDatabase, this.hBPaginator, 
  this.hBSort);
  this.sBSource = new SBDataSource(this.sBDatabase, this.sBPaginator, 
  this.sBSort);
  
  Table 1
  const displayDataChanges = [
     this.hBPaginator.page,
     this.hBSort.sortChange,
     this._filterChange
  ];
  
  Table 2
  const displayDataChanges = [
     this.sBPaginator.page,
     this.sBSort.sortChange,
     this._filterChange
  ];
  
  Table 1
  &lt;mat-table #hBtable [dataSource]="hBSource" matSort style="min-width: 
  740px;"&gt;
      &lt;ng-container matColumnDef="domain"&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; {{'list.domain' | translate}} &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let row"&gt; {{row.domain}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
      &lt;ng-container matColumnDef="general"&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; {{'list.general' | translate}} &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let row"&gt; {{row.general.gNum}} ({{row.general.gPct | number: '1.1-2'}}%) &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
      &lt;mat-header-row *matHeaderRowDef="hBColumns"&gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef="let row; columns: hBColumns;"&gt;&lt;/mat-row&gt;
   &lt;/mat-table&gt;
  
  
  Table 2
  &lt;mat-table #sBSort [dataSource]="sBSource" matSort style="min-width: 1200px;"&gt;
        &lt;ng-container matColumnDef="domain"&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; {{'list.domain' | translate}} &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let row"&gt; {{row.domain}} &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef="general"&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; {{'list.general' | translate}} &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let row"&gt; {{row.general.gNum}} ({{row.general.gPct | number: '1.1-2'}}%) &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
        &lt;mat-header-row *matHeaderRowDef="sBColumns"&gt;&lt;/mat-header-row&gt;
        &lt;mat-row *matRowDef="let row; columns: sBColumns;"&gt;&lt;/mat-row&gt;
  &lt;/mat-table&gt;
  </code></pre>