How can I set the default sort order on the primeng datatable?

Question

I am using the prime-ng dataTable component to display a list of users. I would like this list to be sorted by the first column descending by default and have the dataTable display the first column as sorted.

 <p-dataTable [value]="webUserSummaryList" [rows]="10"  reorderableColumns="true">
    <p-column field="userName" header="Username" [filter]="true" [sortable]="true"></p-column>
    <p-column field="emailAddress" header="Email" [filter]="true" [sortable]="true"></p-column>
    <p-column field="firstName" header="First Name" [filter]="true" [sortable]="true"></p-column>
    <p-column field="lastName" header="Last Name" [filter]="true" filterMatchMode="contains" [sortable]="true"></p-column>
</p-dataTable>

Edit: I have figured out one way to set the default sort column is to use sortField="userName". However, I still can't get the column to default to descending order.

score 84 · Accepted Answer · edited Oct 10 '19 at 06:30

84

I figured it out. These two attributes should be added:

sortField="userName" [sortOrder]="-1"

The sortField matches the column name and the sortOrder can be either 1 for ascending and -1 for descending.

Here's the working solution:

<p-dataTable [value]="webUserSummaryList" [rows]="10"  reorderableColumns="true" sortField="userName" sortOrder="-1">
<p-column field="userName" header="Username" [filter]="true" [sortable]="true"></p-column>
<p-column field="emailAddress" header="Email" [filter]="true" [sortable]="true"></p-column>
<p-column field="firstName" header="First Name" [filter]="true" [sortable]="true"></p-column>
<p-column field="lastName" header="Last Name" [filter]="true" filterMatchMode="contains" [sortable]="true"></p-column>

edited Oct 10 '19 at 06:30

speti43

2,886
1
20
23

answered May 25 '16 at 23:47

Heather92065

7,333
6
31
39

12

`[sortOrder]="-1"` – sabithpocker Oct 13 '17 at 14:26
Please mark your answer as the answer for this question. – dmoore1181 Nov 20 '18 at 16:28
1

sortOrder="-1" is not working for me, but [sortOrder]="-1" is working – Ramil Aliyev 007 Jun 18 '20 at 14:09
I tried with [sortField]="userName" [sortOrder]="-1" and it's not working. Is there a difference between [] and no [] ? – tryingToLearn Sep 22 '20 at 14:50
1

@tryingToLearn I'm late, but with `[]`, the part in the quotes is interpreted literally (as a number in this case). Without `[]`, it's interpreted as a string (`"-1"`). – Carcigenicate Jan 05 '23 at 22:16

score 6 · Answer 2 · answered Sep 11 '20 at 10:13

If you sort on multiple columns, you can parameter the initial sorting with (working on deprecated DataTable and on the current PrimeNG Table Component):

[multiSortMeta]="[{field: 'state', order: -1}, {field: 'displayName', order: 1}]"

Example with Table component (PrimeNG 7+):

<p-table [value]="products2" sortMode="multiple" [multiSortMeta]="[{field: 'code', order: -1}, {field: 'name', order: 1}, {field: 'category', order: -1}]">
  <ng-template pTemplate="header">
    <tr>
      <th pSortableColumn="code">Code <p-sortIcon field="code"></p-sortIcon></th>
      <th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
      <th pSortableColumn="category">Category <p-sortIcon field="category"></p-sortIcon></th>
      <th pSortableColumn="quantity">Quantity <p-sortIcon field="quantity"></p-sortIcon></th>
      <th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-product>
    <tr>
      <td>{{product.code}}</td>
      <td>{{product.name}}</td>
      <td>{{product.category}}</td>
      <td>{{product.quantity}}</td>
      <td>{{product.price | currency: 'USD'}}</td>
    </tr>
  </ng-template>
</p-table>

Thanks for this. I needed default sorting on multiple sort order. This worked. :) — Sourav, Oct 02 '20 at 19:54

How can I set the default sort order on the primeng datatable?

2 Answers2