PrimeNG table header misaligned with scrollbar when adding rows dynamically

I have used p-table in angular to display data and used scrollbar with fixed height as "300px"

<p-table [columns]="myCols" [value]="myList" [scrollable]="true" scrollHeight="300px" [responsive]="true">

Here, I am adding rows to the table dynamically which creates scrollbar at runtime and at that time the header becomes misaligned.

So it only has scrollbar on body.

If it has scrollbar at page load then it works fine but has issue when we have scrollbar at runtime.

Here is the stackblitz for the same issue (click 'clone' button to add rows to table dynamically)

Solution

I have fixed it.

Just needed to make use of spread operator (...)

Need to add below line at the end of the clone event.

this.cars = [...this.cars];