Primeng Sortable Table specify Sorted Column

Question

i have a PrimeNG Table everything woks as expected. I have implemented sorting.

What i get is the sort Option for every Column in the Table but i want this option only in a specific Column.

Any Advice ?

Thx in Advance

|| Willi ..

<p-table [columns]="wikiCols" [value]="wikiItems" selectionMode="single" [(selection)]="selectedItem">
  <ng-template pTemplate="header">
    <tr>
      <th *ngFor="let col of wikiCols" [pSortableColumn]="col.field" >
        {{col.header}}
        <p-sortIcon [field]="col.field" ariaLabel="Activate to sort" ariaLabelDesc="Activate to sort in descending order" ariaLabelAsc="Activate to sort in ascending order"></p-sortIcon>
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr [pSelectableRow]="rowData">
    <td *ngFor="let col of wikiCols">
      {{rowData[col.field]}}
    </td>
    </tr>
  </ng-template>
</p-table>

Answer 1

From the docs:

A column can be made sortable by adding the pSortableColumn directive whose value is the field to sort against and a sort indicator via p-sortIcon component. For dynamic columns, setting pSortableColumnDisabled property as true disables sorting for that particular column.

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

So I think what you want, is to check if the col.field is the column you want to be sortable. Like

[pSortableColumnDisabled]="col.field === 'whatever'"

Also, as mentioned by Aman Chhabra, put an *ngIf on p-sortIcon

    <p-sortIcon *ngIf="col.field !== 'whatever'" [field]="col.field" ariaLabel="Activate to sort" ariaLabelDesc="Activate to sort in descending order" ariaLabelAsc="Activate to sort in ascending order"></p-sortIcon>

Answer 2

Following worked for me as a charm:

  <ng-template pTemplate="header" let-columns>
        <tr>
          <ng-container *ngFor="let col of columns" >
            <th *ngIf="col.field === 'col1'" [pSortableColumn]="col.field" >{{ col.header }} </th>
            <th  *ngIf="col.field !== 'col1'" >{{ col.header }}</th>
          </ng-container>
        </tr>
 </ng-template>