Primeng: Turbotable sorting does not work

Created on 18 Jan 2018  路  5Comments  路  Source: primefaces/primeng

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

When I try to add sorting to my table sorting does not seem to work

Minimal reproduction of the problem with instructions
[rows]="10" [paginator]="true" [rowsPerPageOptions]="[5,10,20,50,100]">

<ng-template pTemplate="caption">
    <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
    <input type="text" pInputText size="50" placeholder="Global Filter" (input)="dt.filterGlobal($event.target.value, 'contains')"
        style="width:auto">
</ng-template>

<ng-template pTemplate="header">
    <tr>
        <th [pSortableColumn]="Name">Client</th>
        <th [pSortableColumn]="Amount">Amount</th>
    </tr>
</ng-template>

<ng-template pTemplate="body" let-item>
    <tr>
        <td>{{item.Name}}</td>
        <td>{{item.Amount | numberOverride:'1.2-2':'-'}}</td>                        
    </tr>
</ng-template>

<ng-template pTemplate="footer" let-item>
    <tr>
        <td>Totals</td>
        <td>{{totalsService.Amount}}</td>                        
    </tr>
</ng-template>

Most helpful comment

Try surrounding the value of pSortableColumn with an extra set of single quotes like below.

<th [pSortableColumn]="'Name'">Client</th>
<th [pSortableColumn]="'Amount'">Amount</th>

All 5 comments

Try surrounding the value of pSortableColumn with an extra set of single quotes like below.

<th [pSortableColumn]="'Name'">Client</th>
<th [pSortableColumn]="'Amount'">Amount</th>

@bias-keenly Thanks

@bias-keenly, Thanks, it worked! But, may we know the reason why?!

@KrishnaPuppala, that's a natural Angular behavior. When you use a property surrounded by square brackets it expects a variable, not value. By using quotes it makes it string value.

You can also just use the attribute without the brackets like so:
<th pSortableColumn="Name">Client</th>

Was this page helpful?
0 / 5 - 0 ratings