angular - Multiple mat-table with MatSort within the same component

Question

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?

I've tried defining the ViewChild with different names, but it didn't work.

@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
<mat-table #hBtable [dataSource]="hBSource" matSort style="min-width: 
740px;">
    <ng-container matColumnDef="domain">
        <mat-header-cell *matHeaderCellDef mat-sort-header> {{'list.domain' | translate}} </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.domain}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="general">
        <mat-header-cell *matHeaderCellDef mat-sort-header> {{'list.general' | translate}} </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.general.gNum}} ({{row.general.gPct | number: '1.1-2'}}%) </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="hBColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: hBColumns;"></mat-row>
 </mat-table>


Table 2
<mat-table #sBSort [dataSource]="sBSource" matSort style="min-width: 1200px;">
      <ng-container matColumnDef="domain">
        <mat-header-cell *matHeaderCellDef mat-sort-header> {{'list.domain' | translate}} </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.domain}} </mat-cell>
      </ng-container>
      <ng-container matColumnDef="general">
        <mat-header-cell *matHeaderCellDef mat-sort-header> {{'list.general' | translate}} </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.general.gNum}} ({{row.general.gPct | number: '1.1-2'}}%) </mat-cell>
      </ng-container>
      <mat-header-row *matHeaderRowDef="sBColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: sBColumns;"></mat-row>
</mat-table>

Answer 1

The fix to this is that after you define your ViewChild reference in the DOM your need to make sure to add the ="matSort" after it.

Steps:

1. Set up MatSort instances in your component and define them in your DataSource dependencies like so:

   @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);
   

2. Define ViewChild References in the DOM and set them equal to matSort (Note: matSort attribute is on the mat-table tag):

   Table 1
   <mat-table #hBSort="matSort" [dataSource]="hBSource" matSort 
     style="min-width: 740px;">
               ***Table Rows and pagination***
   </mat-table>
   
   Table 2
   <mat-table #sBSort="matSort" [dataSource]="sBSource" matSort 
     style="min-width: 1200px;">
               ***Table Rows and pagination***
   </mat-table>