PrimeNG TurboTable sort icon not visible with default sorting enabled

Question

When default sorting is enabled on PrimeNG's TurboTable sort icon is not visible with initial load, column header is styled as it's used and data is sorted properly. Sort icon appears when i manually click on header to sort again.

html:

<p-table [columns]="columns" [value]="users" sortField="name" sortOrder="1">
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns" [pSortableColumn]="col.field">
        {{col.header}}
        <p-sortIcon [field]="col.field"></p-sortIcon>
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-user let-columns="columns">
    // body ...
  </ng-template>
</p-table>

component:

    this.columns = [
      {field: 'name', header: 'Name'},
      {field: 'email', header: 'email'}
    ]

Is there any way to show sort icon on default sorted column?

Answer 1

If you bind the sortOrder property like this...

[sortOrder]="1"

...the value will be treated as a number rather than a string. Sometimes it's difficult to know if the string will be coerced back into a number within the PrimeNG code.

I recommend using the [brackets] for all Angular template property bindings. Otherwise, the type will be treated as a string, which may lead to bugs.

This is especially problematic with booleans, so I always recommend this syntax:

[doSomething]="false"

And if a string is actually needed, this syntax will do the trick:

[myProp]="'myString'"