3

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?

dnk
  • 109
  • 1
  • 8
  • 3
    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 May 25 '19 at 22:46
  • Or try adding the sortMode property binding. – Dale Harris May 25 '19 at 22:46
  • @DaleHarris [sortOrder]="1" worked, thanks! – dnk May 27 '19 at 10:28
  • 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 May 27 '19 at 16:21

1 Answers1

4

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'"
Dale Harris
  • 550
  • 4
  • 14