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.

screenshot

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?

You might try binding sortOrder like this... [sortOrder]="1", so the value can be treated as a number rather than a string. Sometimes it's difficult to know if the string will be coerced into a number within the PrimeNG code. — Dale Harris
I wasn't sure, so I left a comment instead of an answer. I'll go ahead and post it as an answer in case anybody else needs the info. — Dale Harris

Dale Harris Dale Harris · Accepted Answer · 2019-05-27T16:44:18

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'"

PrimeNG TurboTable sort icon not visible with default sorting enabled

1 Answers