Multiple mat-table with MatSort within the same component

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>