Multicolumn sort without having two columns (or more) highlighted with PrimeNG

Question

I can sort multiple columns while using a p-table with PrimeNG as following :

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

 

<h3>Multi Sort Columns</h3>
<p-table
  [columns]="cols"
  [value]="cars1"
  [lazy]="lazy"
  [lazyLoadOnInit]="lazyLoadOnInit"
    (onLazyLoad)="loadList($event)"
  [sortMode]="sortMode"
  [multiSortMeta]="[{field: 'quantity', order: -1}, {field: 'price', order: 1}]">
    <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>

Yet, having two columns highlighted by default can be confusing. How can I have a default sort for two columns, yet only highlight the primary column?

Answer 1

Imagine you want to sort your data by quantity and price but only show quantity indicator in the table.

First, sort your data returned by your service by price:

this.productService.getProductsSmall().then(data => {
  this.products2 = data.sort((a, b) => a.price - b.price);
});

or if you want the reverse order:

this.productService.getProductsSmall().then(data => {
  this.products2 = data.sort((a, b) => b.price - a.price);
});

Then, replace

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

with

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

to show only quantity indicator.

It should to what you need.

See demo