如何使用 MatSort 跳过排序中的最后四行？

Question

我希望当我根据列标题对表格进行排序时，我单击最后四行未排序。

<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>

我希望最后四行保持固定，我该怎么做？该表是一个 Angular Material 组件，并使用 matSort 属性对 dataSource 数组中的表数据进行排序。

Answer 1

将对象数组拆分为两个（拼接）并对第一个执行排序。

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 链接：https://stackblitz.com/edit/cnc-mat-table-custom-sort