PrimgNg: column sorting

Question

I am using <p-table> and I have to implement sorting to its headers. I am doing as below:

HTML

<p-table [value]="documents">
        <ng-template pTemplate="header">
            <tr>
                <th [pSortableColumn]="">
                    File Name
                    <p-sortIcon [field]=""></p-sortIcon>
                </th>
               <th [pSortableColumn]="">
                    File Type
                    <p-sortIcon [field]=""></p-sortIcon>
                </th>
               <th [pSortableColumn]="">
                    File Date
                    <p-sortIcon [field]=""></p-sortIcon>
                </th>
            </tr>
        </ng-template>
    <ng-template pTemplate="body" let-doc>
        <tr>
            <td>
                {{doc.sName}}
            </td>

        <td>
                {{doc.sType}}
            </td>
        <td>
                {{doc.sDate}}
            </td>                
        </tr>
    </ng-template>
</p-table>

TS

ngOnInit(){
    //made a service call and got data for

this.documents=[{
   "sName":"Book",
   "sType":"PDF",
   "sDate":"20"
   },
   {
   "sName":"Book",
   "sType":"PDF",
   "sDate":"20"
   },
   {
   "sName":"Cook Book",
   "sType":"Text",
   "sDate":"20"
   },
   {
   "sName":"Book",
   "sType":"PDF",
   "sDate":"25-04"
   },
   {
   "sName":"File",
   "sType":"PDF",
   "sDate":"02-01"
   }]
}

I did used [pSortableColumn] and [field] in my code but I am not getting what value to pass to sort that particular field. The data is popping up correctly its only the sorting which I am missing on. Please guide me how to achieve the sorting of columns. Thanks

I cannot used <p-dataTable>

score 10 · Accepted Answer · answered Jun 28 '18 at 12:41

10

Replace

<th [pSortableColumn]="">
    File Name
    <p-sortIcon [field]=""></p-sortIcon>
</th>

with

<th [pSortableColumn]="'sName'">
    File Name
    <p-sortIcon [field]=""></p-sortIcon>
</th>

in order do sort by sName for instance.

answered Jun 28 '18 at 12:41

Antikhippe

6,316
2
28
43

Could you explain the purpose of the single quotes? – Kevin Eldurson Jul 22 '22 at 10:48
1

It is used to directly transmit the string value of the property. – Antikhippe Jul 25 '22 at 20:31

score 3 · Answer 2 · answered Mar 22 '19 at 13:00

3

Just adding additional info to accepted answer from @Antikhippe, if some one needs it.

With the code example from accepted answer, the p-sort icon was not changing.

So using following code works.

<p-sortIcon [field]="'sName'"></p-sortIcon>

answered Mar 22 '19 at 13:00

Kishor Prakash

8,011
12
61
92

PrimgNg: column sorting

2 Answers2