PrimeNg <p-table> sorting

8
votes

I am using primeNg <p-table>. I want to implement sorting of data. What I did is below

sort.HTML

<p-table [columns]="cols" [value]="documents">
    <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-doc>
        <tr>
            <td>
                {{doc.sName}}
            </td>

        <td>
                {{doc.sYear}}
            </td>
        <td>
                {{doc.sAge}}
            </td>
        <td>
                {{doc.sColor}}
            </td>        
        </tr>
    </ng-template>
</p-table>

sort.ts

this.cols = [
            { field: 'name', header: 'Name' },
            { field: 'year', header: 'Year' },
            { field: 'age', header: 'Age' },
            { field: 'color', header: 'Color' }
        ];

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

this.documents=[{
"sName":"Jhon",
"sYear":"1994",
"sAge":"20",
"sColor":"Red"
},
{
"sName":"Sam",
"sYear":"1996",
"sAge":"25",
"sColor":"Red"
},
{
"sName":"Anna",
"sYear":"1991",
"sAge":"21",
"sColor":"Green"
},
{
"sName":"Jhon",
"sYear":"1999",
"sAge":"25",
"sColor":"Blue"
},
{
"sName":"Betty",
"sYear":"1993",
"sAge":"35",
"sColor":"Red"
}]
}

As of now only Name field is getting sorted, how can I implement sorting in other columns as well? I used [pSortableColumn] but columns are not getting sorted, I am missing out of somepoint. Can you please guide me where I am wrong?

PS: I cannot used <p-dataTable>.

3
angularprimengprimeng-datatable
First thing you need to change your data because in your documents array all object values are same. – Parth Savadiya
@pArthsavadiya corrected my post. Still sorting does not work. – Anna
could you please create stackblitz.com/edit/primeng – Parth Savadiya
@pArthsavadiya sorry cannot login to stackblitz from my organisation. – Anna

3 Answers

16
votes

For Sorting with Turbo table / p-table with fixed column try below code

                <p-table #dt [value]="data">
                <ng-template pTemplate="header">
                    <tr>
                        <th [pSortableColumn]="'Name'">Name
                            <p-sortIcon [field]="'Name'"></p-sortIcon>
                        </th>
                        <th [pSortableColumn]="'Age'">Age
                            <p-sortIcon [field]="'Age'"></p-sortIcon>
                        </th>
                        <th [pSortableColumn]="'Height'">Height
                            <p-sortIcon [field]="'Height'"></p-sortIcon>
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-col>
                    <tr>
                        <td>{{col.Name}}</td>
                        <td>{{col.Age}}</td>
                        <td>{{col.Height}}</td>
                    </tr>
                </ng-template>
            </p-table>
8
votes

if I got your question right, you are not asking to be able to sort multiple columns at the same time, but simply sorting is not working. In your code the problem is that you are specifying in the header of the table the following columns field to sort to:

[pSortableColumn]="col.field"

and these fields are defined as:

this.cols = [
            { field: 'name', header: 'Name' },    
            { field: 'year', header: 'Year' },
            { field: 'age', header: 'Age' },
            { field: 'color', header: 'Color' }
        ];

BUT your data is arriving with different names:

this.documents=[{
          "sName":"Jhon",
          "sYear":"1994",
          "sAge":"20",
          "sColor":"Red"
},
[...]

"name" != "sName" so your table is not capable to sort the data. In fact I'm surprised you say that the column "name" is sortable.

Just change the definition and the code will be working.

In any case, to allow also multi column sorting, I suggest to change the code as:

<p-table [columns]="cols" [value]="documents" sortMode="multiple">
    <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-doc let-columns="columns">
        <tr>
            <td *ngFor="let col of columns">
                {{doc[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

It is also more light and no change in the ts file is required, even if you take data from a web service since from the html file point of view you are always passing a "documents" object.

1
votes

You need to enable multi mode for sorting using sortMode="multiple" like this -

<p-table [columns]="cols" [value]="documents" sortMode="multiple">

Default sorting is executed on a single column, in order to enable multiple field sorting, set sortMode property to "multiple" and use metakey when clicking on another column.

For more information refer to documentation -