How to make sort arrows in angular mat-table always visible?

Question

The goal is to make sorting arrows of angular mat-table always visible (e.g. they have always opacity set to 0.54).

I tried adding some css code to my .css file for this component. It made all arrows visible (I set opacity to 0.54), but in this case all arrows stay with this opacity always, even if an arrow was clicked (normally the opacity will set to 1 if the arrow was clicked).

The code I added to my .css file:

::ng-deep .mat-sort-header-arrow.ng-trigger.ng-trigger-arrowPosition {
  opacity: 0.54 !important;
}

I want that arrows are always displayed with the Opacity 0.54. The rest behavior of the arrows should remain unchanged. In the case where a column is unsorted, e.g., the arrow is in an undefined state, the arrow should be an up arrow and have the opacity 0.54. If I click on the arrow, it should have the opacity set to 1. If I cancel the sorting, the arrow should have the opacity 0.54 again.

There is an example here: https://stackblitz.com/edit/angular-isxoc5. All arrows are displayed as I want. But if you click an arrow, it still have the opacity 0.54, not 1.

Answer 1

Just as Ervin commented but using ng-deep

::ng-deep .mat-sort-header-container:not(.mat-sort-header-sorted) .mat-sort-header-arrow {
  opacity: 0.54 !important;
  transform: translateY(0px) !important;
}

This doesn't remove the animations on the arrows on hover enter and hover exit though.

Answer 2

In mat-table insert [@.disabled]

<mat-table [@.disabled]="true">

Add this in scss

::ng-deep .mat-sort-header-arrow {
    transform: none !important;
    opacity: 1 !important;
}

Answer 3

An arrow when click applies a sorting to it, it can either be a ascending sort or a descending sort - no such thing as sort being cancelled... No matter how many times we click on a column heading, some (asc or dsc) sorting will be applied and hence we should see the arrow with opacity: 1. To do this, we keep track of each click and apply the boldArrow class to th. Styling for opacity:1 is done when in reference to this class

relevant TS:

@Component({
  selector: 'table-sorting-example',
  styleUrls: ['table-sorting-example.css'],
  templateUrl: 'table-sorting-example.html',
})
export class TableSortingExample implements OnInit {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);
  sortedStatus: boolean[] = [];

  @ViewChild(MatSort) sort: MatSort;

  ngOnInit() {
    this.sortedStatus = [false, false, false, false];
    this.dataSource.sort = this.sort;
  }

  sortedStyler(columnNumber) {
    console.log("sortedStyler with", columnNumber);
    if (this.sortedStatus[columnNumber] == true) {
      //this.sortedStatus[columnNumber] = false;
    } else {
      this.sortedStatus[columnNumber] = true;
      for (var i = 0; i < this.sortedStatus.length; i++) {
        if (i != columnNumber) { this.sortedStatus[i] = false; }
      }
    }
  }

}

relevant HTML:

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef mat-sort-header (click)='sortedStyler(0)' [ngClass]="sortedStatus[0] === true ? 'boldArrow' : ''"> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header (click)='sortedStyler(1)' [ngClass]="sortedStatus[1] === true ? 'boldArrow' : ''">  Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef mat-sort-header (click)='sortedStyler(2)' [ngClass]="sortedStatus[2] === true ? 'boldArrow' : ''">  Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef mat-sort-header (click)='sortedStyler(3)' [ngClass]="sortedStatus[3] === true ? 'boldArrow' : ''">  Symbol </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

relevant css:

::ng-deep .boldArrow .mat-sort-header-arrow.ng-trigger.ng-trigger-arrowPosition {
  opacity: 1 !important; 
}

working stackblitz here