PrimeNG Table Sorting - Only show icons when sorted-CodePudding

I have a pretty standard PrimeNG table that has sortable columns. But by default, the sort icons appear. Is it possible to only show the sort icons when the column has been sorted?

<p-table [value]="rows" styleClass="p-datatable-striped"   responsiveLayout="scroll">
<ng-template pTemplate="header">
    <tr>
        <th pSortableColumn="id">ID<p-sortIcon field="id"></p-sortIcon></th>
        <th pSortableColumn="name">Study Name<p-sortIcon field="name"></p-sortIcon></th>
        <th pSortableColumn="status">Status<p-sortIcon field="status"></p-sortIcon></th>
        <th pSortableColumn="createdOn">Created Date<p-sortIcon field="createdOn"></p-sortIcon></th>
        <th pSortableColumn="updatedOn">Last Updated Date<p-sortIcon field="updatedOn"></p-sortIcon></th>
    </tr>
</ng-template>
<ng-template pTemplate="body" let-row>
    <tr>
        <td>{{row.id}}</td>
        <td>{{row.name}}</td>
        <td>{{row.status}}</td>
        <td>{{row.createdOn | date : 'MM/dd/yyyy'}}</td>
        <td>{{row.updatedOn | date : 'MM/dd/yyyy'}}</td>
    </tr>
</ng-template>

CodePudding user response：

You can use this css. It will hide the sort when it is not applied on a column!

.ui-sortable-column-icon.pi.pi-fw.pi-sort {
  visibility: hidden;
}

forked stackblitz