I have been trying to make this sorting work for a time now, I gave up. This is something from requests.component.ts that may help
_holidayRequests = new MatTableDataSource<HolidayRequests>();
@ViewChild(MatSort, {static:true}) sort: MatSort;
ngAfterInit(){
this._holidayRequestsService.getHolidayRequests().subscribe(
(results) =>
{
this._holidayRequests = new MatTableDataSource(results);
this._holidayRequests.sort = this.sort;
}
)
}
And the HTML table it is supposed to be displayed in
<div class="column column-12">
<table mat-table [dataSource]="_holidayRequests" matSort class="mat-elevation-z8" style="text-align: center;">
<ng-container matColumnDef="name">
<th style="width: 5%; text-align: center;" mat-header-cell *matHeaderCellDef mat-sort-header=""> Name</th>
<td mat-cell *matCellDef="let request"> {{ request.id }} <!-- {{request.employee.firstName}} {{request.employee.lastName}} --> </td>
</ng-container>
<ng-container matColumnDef="date">
<th style="width: 5%; text-align: center;" mat-header-cell *matHeaderCellDef> Duration of holiday leave
</th>
<td mat-cell *matCellDef="let request"> {{ request.starting_date }} - {{ request.ending_date }} </td>
</ng-container>
<ng-container matColumnDef="status">
<th style="width: 5%; text-align: center;" mat-header-cell *matHeaderCellDef>Status</th>
<td mat-cell *matCellDef="let request"
[ngStyle]="{'background-color': request.Status=='Denied' ? '#caceca' : (request.Status=='Approved' ? '#c3ffc3' : 'white')}">
<div>
{{request.Status === "Pending" ? null : request.Status}}
<div class="approve-deny-option"
[ngStyle]="{'display': request.Status=='Pending' ? 'flex' : 'none'}">
<button class="approve-button" (click)="onApprove(request)">A</button>
<button class="deny-button" (click)="openDialog(request)">D</button>
</div>
</div>
</td>
</ng-container>
<ng-container matColumnDef="view">
<th style="width: 5%" mat-header-cell *matHeaderCellDef> </th>
<td mat-cell *matCellDef="let request">
<button class="add-view-button" mat-button (click)="view(request.id)">View</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
Simply whichever tutorial I tried it was no progress at all. The data from _holidayrequests is supposed to be displayed in the table, and on the click of the column header, it is supposed to sort, like in Angular material, asc and desc, and default.
