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