paginated p-table not sorting when the data loaded dynamically

This is the code for the p-table pagination and sort. Pagination works perfectly but sorting don't seem to work. Each page's data is dynamically populated through an api call, hence the rest of the data isn't available without trigering the onPage event. Only the number of rows defined will be shown.

<p-table *ngIf="showItemTable"
#dt
[value]="itemList"
dataKey="id"
[rowHover]="true"
[rows]="5"
[paginator]=“true”
[filterDelay]="0"
[globalFilterFields]="['id’,’type']"
[rowsPerPageOptions]="[5,10]"
[loading]="isLoading"
[showLoader]="false"
[lazy]="true"
(onPage)="paginate($event)"
[totalRecords]="totalRecords"
[resizableColumns]="true"
[autoLayout]="true"
title=“Items"
role="table"
>


Sorting applied here. The data that is shown on the table should be sorted by column 'Type'.

<ng-template pTemplate="header">
<tr>
<th pSortableColumn="type">
Type
<p-sortIcon field="type"></p-sortIcon>
</th>
<th>ID</th>
<th>Status</th>
<th>Name</th>
</tr>
</ng-template>



Table body. No changes here.

<ng-template pTemplate="body" let-item>
<tr>
<td>
<div class="item-id">{{ item?.type}} </div>
</td>
<td>
<div class="item-id">{{ item?.id}} </div>
</td>
<td>
<div class="item-id">{{ item?.status}} </div>
</td>
<td>
<div class="item-id">{{ item?.name}} </div>
</td>
</tr>
</ng-template>
</p-table>


I tried adding a custom sort (https://stackblitz.com/edit/primeng-tablesort-demo?file=README.md) but still can't get it to work even though with pagination, this stackblitz example seem to work. (although it moves across the pages when sorting).

Continue reading...