How to sort the data in a loop

I am displaying the mat table inside a loop. The records are displaying correct and sorting arrows are also getting displayed. I've used MatSort but it is not working. Can anyone help me out where I am getting wrong.

Here is my code: HTML:

<div *ngFor="let rc of filteredSizeCode; let i = index" class="table-responsive table-content">
<h3 class="text-primary mt-1 mb-3">Unit Type : {{rc.unitTypeSizeConcat[0]}}</h3>
<table mat-table [dataSource]="datasource" matSort class="mat-elevation-z8" matSortDisableClear>
<ng-container matColumnDef="unitRateType">
<th class="centered-sorted-header" mat-header-cell *matHeaderCellDef mat-sort-header>Unit Rate Filter</th>
<td mat-cell *matCellDef="let row; let i=index">{{row.list.unitRateType}}</td>
</ng-container>
<ng-container matColumnDef="rateChangeType">
<th class="centered-sorted-header" mat-header-cell *matHeaderCellDef mat-sort-header>Rate Change Type</th>
<td mat-cell *matCellDef="let row; let i=index">{{row.list.rateChangeType}}</td>
</ng-container>
<ng-container matColumnDef="effectiveDate">
<th class="centered-sorted-header" mat-header-cell *matHeaderCellDef mat-sort-header>Effective Date</th>
<td mat-cell *matCellDef="let row; let i=index">{{row.list.effectiveDate | date: 'MM-dd-yyyy'}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>


TS:

displayedColumns = [
'unitRateType',
'rateChangeType',
'effectiveDate'
];
@ViewChild(MatSort) sort: MatSort;
datasource: MatTableDataSource<any[]>[] = [];

ngOnInit(){
this.filteredSizeCode.forEach((size: any) => {
let data: any[] = size.list.map((x: any) => ({ ...size, list: x }));
console.log(data);
this.datasource.push(new MatTableDataSource(data));

});
this.datasource[0].sortingDataAccessor = (item: any, property) => {
console.log(item);
switch (property) {
case 'noticeDays':
return item.list.noticeDays;
case 'unitRateType':
return item.list.unitRateType;
case 'effectiveDate':
return item.list.effectiveDate;
default: return item[property];
}
}
this.datasource[0].sort = this.sort;
}

Continue reading...