Why doesn't the [frozenColumns] feature in PrimeNG work with dynamic columns?

I am using this feature to freeze some columns in the table but these features are not applied and not working properly.

// html Code

<p-table [value]="products" [columns]="colsProd" [frozenColumns]="frozenCols" [scrollable]="true"
scrollHeight="400px" [scrollable]="true" dataKey="loadId" [tableStyle]="{'min-width': '50rem'}">

<ng-template pTemplate="frozenheader">
<tr>
<th *ngFor="let col of frozenCols">{{ col.header }}</th>
</tr>
</ng-template>

<ng-template pTemplate="frozenbody" let-rowData>
<tr>
<td *ngFor="let col of frozenCols">{{ rowData[col.field] }}</td>
</tr>
</ng-template>

<ng-template pTemplate="header">
<tr>
<th *ngFor="let col of colsProd">{{ col.header }}</th>
</tr>
</ng-template>

<ng-template pTemplate="body" let-rowData>
<tr>
<td *ngFor="let col of colsProd">{{ rowData[col.field] }}</td>
</tr>
</ng-template>

</p-table>


// typeScript Code

frozenCols: any[] = [
{ field: 'load', header: 'Load' },
];

colsProd: any[] = [
{ field: 'customer', header: 'Customer' },
{ field: 'loadStatus', header: 'Load Status' },
{ field: 'changeStatus', header: 'Change Status' },
{ field: 'driver', header: 'Driver' },
{ field: 'container', header: 'Container' },
{ field: 'reference', header: 'Reference' },
{ field: 'nextAddress', header: 'Next Address' },
]

products: any[] = [
{
load: 'load1',
customer: 'customer1',
loadStatus: 'loadStatus1',
changeStatus: 'changeStatus1',
driver: 'driver1',
container: 'container1',
reference: 'reference1',
nextAddress: 'nextAddress1',
},
];

Continue reading...