I want that when I sort the table depending on the column header I click the last four rows are not sorted. table image
<table mat-table [dataSource]="dataSourceMD" matSort (matSortChange)="getRowMaximoTable('dataSourceMD', 'indexMaximoMD')" 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="Filtro" 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>
I want the last four rows to stay fixed, how can I do it? The table is an Angular Material component and uses the matSort attribute to sort the table data from the dataSource array.
Split the array of objects into two(splice) and perform the sort on the first.
const toBeSorted = [...data];
let unsorted: any[] = [];
if(toBeSorted.length >= 4) {
unsorted = toBeSorted.splice(-4);
}
const sorted = toBeSorted.sort((a, b) => {
//sort logic
});
this.sortedData = [...toBeSorted, ...unsorted];
StackBlitz Link: https://stackblitz.com/edit/cnc-mat-table-custom-sort