Sort not working for nested dynamic columns in table

[taruntadikonda]

Describe the bug

Sort is not working if there is nested object structure for the dynamic columns for the table.

Environment

Its a angular project with angular version 18.0.6 and primeng 17.18.3

Reproducer

https://stackblitz.com/edit/github-p4yago?file=src%2Fapp%2Fapp.component.html

Angular version

18.0.6

PrimeNG version

17.18.3

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

22.4.0

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[maruthumj]

@taruntadikonda you are using the pSortableColumn property wrongly in the example. I have made some changes to your code and it is working as expected now. I'm pasting the changed code below. please let me know if you have any doubts.

app.component.html

<p-table [columns]="fields" [value]="data"> <ng-template pTemplate="header" let-columns> <tr> <th *ngFor="let col of columns" [pSortableColumn]="col.field"> {{ col.header }}<p-sortIcon [field]="col.feild"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-rowData let-columns="columns"> <tr> <td *ngFor="let col of columns; let i = index"> {{ rowData[col.field] }} </td> </tr> </ng-template> </p-table>

app.component.ts

`import { Component } from '@angular/core';

@component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
fields = [
{
field: 'id',
header: 'a',
},
{
field: 'metric',
header: 'b',
},
];
data = [
{
id: '12456',
metric: 5,
},
{
id: '74424',
metric: 10,
},
{
id: '4877',
metric: 15,
},
];
}`

[taruntadikonda]

@maruthumj there is nothing wrong in the example code that was provided. The data you have provided is not nested JSON. You can try with a nested JSON data.

[maruthumj]

@maruthumj there is nothing wrong in the example code that was provided. The data you have provided is not nested JSON. You can try with a nested JSON data.

You need to mention the key values of table row data to the "field" value of psortablecolumn property. But in your code you are passing different values to the field property. Please go through the code which I have commented above

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding!
Best Regards,