How to sort multiple columns using PrimeNG

Question

How can I sort multiple columns while using a p-table, PrimeNG | Angular UI Component Library?

<h3>Multi Sort Columns</h3>
<p-table
  [columns]="cols"
  [value]="cars1"
  [lazy]="lazy"
  [lazyLoadOnInit]="lazyLoadOnInit"
    (onLazyLoad)="loadList($event)"
  [sortMode]="sortMode"
  [multiSortMeta]="multiSortMeta">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

Can there be a default predefined secondary sort column ?

You haven't mentioned customSort() in <p-table> tag. How come you are able to call customSort() in typescript? AND did you find a way to set predefiend secondary sort. Because multiSortMeta sets the sorting just for first time... — meekash55
– meekash55, Commented Jan 31, 2024 at 2:13

Antikhippe · Accepted Answer · 2020-11-30 19:09:51Z

2

Yes, you can define multiple predefined sorts by using multiSortMeta property.

Here is an example:

[multiSortMeta]="[{field: 'quantity', order: -1}, {field: 'price', order: 1}]"

See demo

answered Nov 30, 2020 at 19:09

Antikhippe

6,7132 gold badges31 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

london_utku Over a year ago

Thanks for the great answer, and demo as well.

meekash55 Over a year ago

In my case i want to set secondary sort predefined always, not just first time at the page load. multiSortMeta works only for once here.

Collectives™ on Stack Overflow

How to sort multiple columns using PrimeNG

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related