Primeng p-table sorting is not sorting data-CodePudding

I'm creating some p-table and I tried to add sorting but it's not working. Sorting icon is visible, animation of icon works, data in table is rendering but it is not sorting on header click. I found Primeng documentation and I think I did everything that I should. I've tried a few solutions that I've found in internet but nothing helped me.

my cols in ts file:

Data is beeing fetched from API as array of objects (array example below - there is more data in real data array of course):

const products = [
      {
        id: "1",
        node: {
          index: "0",
          name: "Some product name",
          price: 20.4,
          discount: 0,
          grossPrice: 24.8,
          count: 5,
          info: "Some info"
        }

      }
    ]

my html file:

        <p-table [columns]="cols" [value]="products" sortMode="multiple">
          <ng-template pTemplate="header" let-columns>
            <tr >
              <th *ngFor="let col of columns" [class]="col.class" [pSortableColumn]="col.field" [width]="col.width">
                {{ col.header }}
                <ng-container *ngIf="col.field !== 'info' && col.field !== 'add'">
                  <p-sortIcon [field]="col.field"></p-sortIcon>
                </ng-container>
              </th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-product let-columns="columns">
            <tr >
                <td *ngFor="let col of columns">
                  <ng-container *ngIf="col.field !== 'add'">
                    {{product.node[col.field]}}
                  </ng-container>
                </td>
            </tr>
          </ng-template>
        </p-table>

CodePudding user response：

After about hour of trying to find a solution finally I've found it. The problem is with getting field from object. It is a bit strange for me but works. If product object is inside a key (node here) of array object it doesn't work so I've changed it.

Example below that doesn't work:

const products = [
      {
        id: "1",
        node: {
          index: "0",
          name: "Some product name",
          price: 20.4,
          discount: 0,
          grossPrice: 24.8,
          count: 5,
          info: "Some info"
        }
      }
    ]

<ng-container *ngIf="col.field !== 'addCart'">
  {{product.node[col.field]}}
</ng-container>

Example below that works:

const products = [
      {
        index: "0",
        name: "Some product name",
        price: 20.4,
        discount: 0,
        grossPrice: 24.8,
        count: 5,
        info: "Some info"
      }
  ]

<ng-container *ngIf="col.field !== 'add'">
  {{product[col.field]}}
</ng-container>