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 class="ig-table-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 class="ig-table-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>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>