Dynamic column sorting in angular primeNg

I am rendering the table using angular primeNg based on a condition. All the headers and values are coming dynamically. The table data is getting displayed properly. However the sorting is not working. I have used [pSortableColumn]="header". I can see the icons are moving upwords and downwards but the values are sorted. Attaching the code and data for reference.


getColumnHeaders(dataList: any[]): string[] {
if (dataList.length > 0) {
return Object.keys(dataList[0]);
} else {
return [];
}
}

<div class="card-tablelist mb-3" *ngFor="let singleObject of Data; index as i">
<div *ngIf="singleObject.DashboardDto.alertType!='Hybrid'">
<p-card class="alert-cardslist"
*ngIf="singleObject.DashboardDto as singleKey">
<ng-template pTemplate="header">
<div class="p-d-flex ">
<div class="globelSearch p-p-2 ml-3 mt-2">
<h3 class="mr-5 mb-0">{{singleKey.subCategoryName}} >
{{singleKey.keyNameDescription}}</h3>
</div>
<div class="p-field mb-0 mt-3">
<p-chip
label="High Alert : {{(alertSeverityMap && alertSeverityMap.get(singleKey.keyNameId))? alertSeverityMap.get(singleKey.keyNameId).highAlertCount : 0 }}"
styleClass="mr-2 custion-alertchips highalert-bell"></p-chip>
<p-chip
label="Low Alert : {{(alertSeverityMap && alertSeverityMap.get(singleKey.keyNameId))? alertSeverityMap.get(singleKey.keyNameId).lowAlertCount : 0 }}"
styleClass="mr-2 custion-alertchips low-bell"></p-chip>
<p-chip
label="Critical : {{(alertSeverityMap && alertSeverityMap.get(singleKey.keyNameId))? alertSeverityMap.get(singleKey.keyNameId).criticalAlertCount : 0 }}"
styleClass=" custion-alertchips flagalert-bell"></p-chip>
</div>
</div>
</ng-template>
<ng-template pTemplate="content">
<div class="grid-data">
<p-table #dt1 [value]="singleKey.dataList" styleClass="p-datatable-gridlines"
[tableStyle]="{'min-width': '50rem'}" [sortable]="true">
<ng-template pTemplate="header">
<tr>
<th
*ngFor="let header of getColumnHeaders(singleKey.dataList)" [pSortableColumn]="header">
{{header}} <p-sortIcon [field]="header"></p-sortIcon> </th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-data>
<tr>
<td [ngClass]="{'text-left': data[header].alignment==='Left', 'text-right':data[header].alignment==='Right'}"
*ngFor="let header of getColumnHeaders(singleKey.dataList)">
{{data[header].value}}
</td>
</tr>
</ng-template>
</p-table>
</div>
</ng-template>
</p-card>
</div>
</div>

DashboardDto :{
"companyName": "ABC Company Limited",
"alertType": "Standard",
"alertTypeComputed": "High",
"isCriticalAlert": 1,
"dataList": [
{
"Company Name": {
"value": ABC Company Limited",
"alignment": "Left"
},
"Unit": {
"value": "Lakh",
"alignment": "Left"
},
"Ratio": {
"value": "0",
"alignment": "Right"
},
"Period Ends on": {
"value": "31-Mar-2025",
"alignment": "Left"
}
},
{
"Company Name": {
"value": "ABC Company Limited",
"alignment": "Left"
},
"Unit": {
"value": "Crore",
"alignment": "Left"
},
"Ratio": {
"value": "0",
"alignment": "Right"
},
"Period Ends on": {
"value": "31-Mar-2024",
"alignment": "Left"
}
},
{
"Company Name": {
"value": "ABC Company Limited",
"alignment": "Left"
},
"Unit": {
"value": "Lakh",
"alignment": "Left"
},
"Ratio": {
"value": "1",
"alignment": "Right"
},
"Period Ends on": {
"value": "31-Mar-2023",
"alignment": "Left"
}
}
]
}


I am new to angular looking for suggestions. Thanks in advance.

Continue reading...