PrimeNg <p-table> sorting

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>

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.

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 -

• https://primefaces.org/primeng/#/table