Unable to sort data in Angular mat-table when grouping results

I followed This video to create a grouped view in my Material table, but I am unable to sort the results. What I would like to have is:

**YEAR**
All activities during Spring
All activities during Summer
All activities during Autumn
All activities during Winter
**YEAR**
All activities during Spring
All activities during Summer
All activities during Autumn
All activities during Winter


I assign an activitySeasonID for each season captured (Spring is 1, Summer 2, etc) and then sort the table on activitySeasonID.

Unfortunately, the group does not have an id, so it is putting all of those entries at the top instead of having a group, sorting all the entries under it, the next group, etc.

HTML

<mat-table #table [dataSource]="dataSource" matSort>

<ng-container matColumnDef="activitySeasonID">
<mat-header-cell *matHeaderCellDef class="bold" mat-sort-header></mat-header-cell>
<mat-cell *matCellDef="let activity" class="field-text"> {{ activity?.activitySeasonID }} </mat-cell>
</ng-container>

<ng-container matColumnDef="activitySeason">
<mat-header-cell *matHeaderCellDef class="bold"> Season </mat-header-cell>
<mat-cell *matCellDef="let activity" class="field-text" [ngStyle]="{'color':seasonColour(activity.activitySeason)}"> {{ activity?.activitySeason }} </mat-cell>
</ng-container>

<ng-container matColumnDef="character">
<mat-header-cell *matHeaderCellDef class="bold"> Character </mat-header-cell>
<mat-cell *matCellDef="let activity" class="field-text"> {{ activity?.character }} </mat-cell>
</ng-container>

<ng-container matColumnDef="activity">
<mat-header-cell *matHeaderCellDef class="bold"> Activity </mat-header-cell>
<mat-cell *matCellDef="let activity" class="field-text"> {{ activity?.activity }} </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" mat-row-group></mat-row>

<ng-container matColumnDef="groupHeader">
<mat-cell *matCellDef="let groupBy" class="bold" style="color: #ffffff; background-color: #011f43">{{groupBy.activityYear}}</mat-cell>
</ng-container>
<mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup"></mat-row>

</mat-table>


TS

const groupBy = function (xs, key) {
return xs.reduce(function (rv, x) {
(rv[x[key]] = rv[x[key]] || []).push(x);
return rv;
}, {});
}

export class CovenantActivitiesComponent implements OnInit {

@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
displayedColumns = ['activitySeason', 'character', 'activity'];
dataSource: MatTableDataSource<CovenantActivities>;
activityData = [];

....constructor, lots of other non-relevant code

ngOnInit(): void {
this.covenantDataService.getCovenantSeasonalActivites(this.covID).subscribe(data => {
let tempdatasource = []
this.activityData = groupBy(data, 'activityYear');

Object.keys(this.activityData).forEach(key => {
tempdatasource.push({activityYear: key, isGroupBy: true });
let values = this.activityData[key];
values.forEach((element) => {tempdatasource.push(element);});
});

this.dataSource = new MatTableDataSource<CovenantActivities>(tempdatasource)
this.sort.sort(({ id: 'activitySeasonID', start: 'asc'}) as MatSortable);
this.dataSource.sort = this.sort;
});
}

isGroup (index, item): boolean {
return item.isGroupBy;
}


Correct grouping but unsorted:


This is what happens when I add sorting:

Sample of what is returned in my datasource:

0: {activityYear: '1220', isGroupBy: true}
1: {activityYear: '1220', activitySeason: 'Summer', activityID: 'jSJuQXp2OchWDXlKAWTS', activity: 'wefsdfsdfsdfsfs', character: 'Britta', …}
2: {activityYear: '1222', isGroupBy: true}
3: {activitySeasonID: 4, activity: 'f fsdf sdfds fsdf sdfsdfs', activitySeason: 'Winter', activityYear: '1222', character: 'Theren', …}
4: {activityYear: '1229', isGroupBy: true}
5: {activity: 'sdfs fsdfsdfsdfsdfsdfsd', activitySeason: 'Winter', activityID: '31nmWjZbix6xlytUXeCA', character: 'Sidorov', activitySeasonID: 4, …}
6: {activity: 'das dasd asd dasd asd asds', character: 'Belisarius', activitySeason: 'Winter', activityID: 'm9AQUecuwhIms7WIslQp', …}
7: {activityYear: '1230', isGroupBy: true}
8: {activity: 'dfs fsdfsdf sdfdsfsdf', activityID: '6X6kAJgakXdfOaXqqN1o', activitySeason: 'Summer', activitySeasonID: 2, activityYear: '1230', …}
9: {activitySeason: 'Spring', activitySeasonID: 1, activity: 'Stuff was done', activityID: 'OMbZzNSqdcuO2uZf9oC6', …}
10: {activityYear: '1230', activityID: 'QTWGNDMzZ01LmTBU1ZaJ', activitySeasonID: 1, character: 'Theren', activitySeason: 'Spring', …}
11: {activityYear: '1233', isGroupBy: true}
12: {activityID: '2WIe1UsWkVHDEQzx9VWp', activitySeason: 'Autumn', activity: ' fsd fsdf sdf sdf sdfsd fsdf', activityYear: '1233', character: 'Theren', …}
13: {activityYear: '1233', character: 'Albertus Magnus', activityID: '3Yfwi7pDDdYjafRBWzc3', activitySeason: 'Summer', activity: 'dsfsd fsdfsdfsdf', …}
14: {activity: 'dfsf fsdfsdfsdfs dsf', activityID: '4EkzaSTwgPAPF7nKU3Sr', activitySeasonID: 2, character: 'Sargon', activityYear: '1233', …}
15: {character: 'Britta', activity: 'sdfdfsdf', activitySeasonID: 3, activitySeason: 'Autumn', activityYear: '1233', …}
16: {activityYear: '1240', isGroupBy: true}
17: {activity: 'sdfsdf dsfsdf sdfsd', activityID: 'ck2bhNb2E1Sgo71RZniJ', activitySeason: 'Summer', character: 'Sargon', activitySeasonID: 2, …}

Continue reading...