javascript - How to change the direction of arrow in the header of one column in mat-table and rest should be default in ANGULAR

Question

The requirement is, I want to reverse the behavior of mat-sort-header one column only, initial behavior of mat-sort-header is - for the first click on the header it is sorting the column for asc values, for the second click it does for desc values, and for the third click, it removes the sorting. I want it to do desc than asc than remove sorting without changing the direction of the arrow in the header, only in one column. That column holds boolean(true/false) values - so I want first true values on the top (first click) than false values on the top (second click) then no sorting (third click).

Current code scenario -

<table mat-table matSort  [dataSource]="dataSource">
    <ng-container *ngFor="let column of columnDetails" matColumnDef={{column.columnDef}}>

        <ng-container *ngIf="column.columnDef === 'Review'">
            <th mat-header-cell *matHeaderCellDef mat-sort-header **start="desc"** >
                <span class="header-warrants-flag"><i class="{{column.glyphClass}}"></i></span>
            </th>
        </ng-container>

        <td mat-cell *matCellDef="let element" [matTooltip]="element[column.columnDef]" toggleTooltip>
            <ng-container
                //some code
            </ng-container>
            <ng-container *ngIf=" // some code">
                //some code
            </ng-container>
            <ng-container *ngIf="// some code">
                    //some code
            </ng-container>
            <ng-container *ngIf="//some code">
                //some code
            </ng-container>
        </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="columnNames"></tr>
    <tr mat-row *matRowDef="let row; columns: columnNames;"></tr>
</table>

question from:https://stackoverflow.com/questions/65540929/how-to-change-the-direction-of-arrow-in-the-header-of-one-column-in-mat-table-an

Answer 1

Waitting for answers