When I click on a column header to sort the table, a function should trigger and update the data. However, the data is not updating as expected. Below is the code for the function and the table:
<table mat-table #table [dataSource]="dataSourceMD" matSort (matSortChange)="getRowMaximoTable($event)" matTableExporter #exporter="matTableExporter" #sortMD="matSort" class="tr_table">
<ng-container *ngFor="let disCol of displayedColumnsMD; let colIndex = index"
matColumnDef="{{disCol}}" [sticky]="isIn(disCol)">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
<div [innerHTML]="displayedColumnsNamesMD[colIndex]"></div>
</th>
<td mat-cell *matCellDef="let element" [style.background-color]="element[disCol+'Color']" [style.color]="element[disCol+'Texto']">
<div *ngIf="element[disCol]" [innerHTML]="element[disCol]"></div>
<div *ngIf="!element[disCol] && !isIn(disCol)" [innerHTML]="'-'"></div>
</td>
</ng-container>
<ng-container *ngFor="let filCol of displayedFilterColumnMD; let colIndexF = index"
matColumnDef="{{filCol}}" [sticky]="colIndexF<3">
<th mat-header-cell *matHeaderCellDef [style.text-align]="center" [attr.colspan]="1">
<mat-form-field class="columnas" floatLabel='never'>
<input matInput placeholder="Filter" type="text"
[(ngModel)]='filterTableMD[displayedColumnsMD[colIndexF]]'
name="displayedColumnsMD[colIndexF]"
(keyup)="hanlerOnChangeFilter($event, 'MD',displayedColumnsMD[colIndexF])">
<button mat-button *ngIf="filterTableMD[displayedColumnsMD[colIndexF]]"
(click)="handlerClearFilterField('MD',displayedColumnsMD[colIndexF])" matSuffix
mat-icon-button aria-label="Clear">
<mat-icon class="material-icons-outlined">close</mat-icon>
</button>
</mat-form-field>
</th>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsMD; sticky: true"></tr>
<tr mat-header-row *matHeaderRowDef="displayedFilterColumnMD"></tr>
<tr mat-row [ngClass]="{ 'maximo-row': i == indexMaximoMD }" *matRowDef="let row; columns: displayedColumnsMD; let i = index"></tr>
</table>
Function Code:
getRowMaximoTable(event?: MatSort) {
let originalArrayData = [ ...this.dataSourceMD.data ];
const valuesToSort = originalArrayData.slice(0, -4);
const fixedValues = originalArrayData.slice(-4);
const sortedArray = this.dataSourceMD.sortData(valuesToSort, this.dataSourceMD.sort);
this.dataSourceMD.data = [...sortedArray, ...fixedValues];
}
I am trying to ensure that the data updates correctly when clicking on a column header.