Primeng: TurboTable - Odd sort behavior without extra single quotes on [pSortableColumn] and [field]

[bias-keenly]

There is no guarantee in receiving a response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeNG PRO Support where support is provided within 4 business hours

I'm submitting a ... (check one with "x")

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior
Instead of iterating over columns like the sort example I would like to manually create my headers and sort-icon. Logically, I would think the below would work with the field name encased in a single set of double quotes. When set like this I get the sort headers and can click, however it does not sort by the field or column specified, instead it sorts only a few entries by an unknown method.

<tr>
  <th [pSortableColumn]="name">
    Name
    <p-sortIcon [field]="name"></p-sortIcon>
  </th>
  <th [pSortableColumn]="name_display">
    Display Name
    <p-sortIcon [field]="name_display"></p-sortIcon>
  </th>
</tr>

Only adding an extra set of single quotes around the [pSortableColumn] and [field] values will resolve the issue and sorting works correctly.

<tr>
  <th [pSortableColumn]="'name'">
    Name
    <p-sortIcon [field]="'name'"></p-sortIcon>
  </th>
  <th [pSortableColumn]="'name_display'">
    Display Name
    <p-sortIcon [field]="'name_display'"></p-sortIcon>
  </th>
</tr>

Expected behavior
Ability to specify the [pSortableColumn] and [field] values without extra single quotes. IE:

<tr>
  <th [pSortableColumn]="name">
    Name
    <p-sortIcon [field]="name"></p-sortIcon>
  </th>
  <th [pSortableColumn]="name_display">
    Display Name
    <p-sortIcon [field]="name_display"></p-sortIcon>
  </th>
</tr>

What is the motivation / use case for changing the behavior?
Confusing code formatting. Undocumented need to add single quotes around the value if not coming from column loop or dictionary.

At minimum can this be documented in documentation if the behavior will not be changed?

• Angular version: 5.2.0

• PrimeNG version: 5.2.0-RC1

• Browser: [ all ]

[patriknil90]

This works for me:

<th pSortableColumn="trueId">
    ID
    <p-sortIcon field="trueId"></p-sortIcon>
</th>

The onSort EventEmitter gets triggered 3 times when sorting though.

[jw61]

I had this exact same problem, and it had me confused for a while until I worked out what I had done wrong. The current behaviour is actually normal/correct Angular data binding. If you put square brackets around the property, then it will treat the contents of the double quotes as an expression to be evaluated. In the case of [field]="name", it evaluates name as an expression, looking for a component property called name in order to use its value. If your component does not have a property called name, the sorting will fail. [field]="'name'" on the other hand supplies a simple JavaScript string in single quotes as the expression, so this will work. field="name" sets the field property directly without a binding, so the literal contents of the double quotes will be used to set the property without any evaluation.

[cagataycivici]

Behavior is correct due to Angular syntax.

[santuroy123]

Thanks @jw61

[slmmm]

This fixed my issues - big thanks! :-)

[claudiuconstantin]

Great explanation @jw61, thanks!