Dynamic scrollbar leads to misalignment between table header and row columns

[ghost]

I'm submitting a ... (check one with "x")

[x ] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Please demonstrate your case at stackblitz by using the issue template below. Issues without a test case have much less possibility to be reviewd in detail and assisted.

https://stackblitz.com/edit/github-cc2ast-tzyb9x

Current behavior
Table header entries are not aligned with row columns, when a scrollbar fades in dynamically.

Expected behavior
The entries in the header should also be moved to the right, when it is neccessary to display a scrollbar for the table.

Minimal reproduction of the problem with instructions
1.) Open link above
2.) Click button "click me"

What is the motivation / use case for changing the behavior?
The misalignment leads to user confusion and it looks ugly.

Please tell us about your environment:
MS Windows 10 64 Bit, Node version 8.11.2, NPM version 5.6.0

• Angular version: 7.1.3

• PrimeNG version: 7.0.0
  Could also be reproduced in PrimeNG version 6.1.4 with Angular 6.1.4

• Browser: [Chrome 71.0.3578.80 | Firefox 64.0]

• Language: [TypeScript 3.6]

• Node (for AoT issues): node --version = 8.11.2

[JacobSiegle]

Similar issue to what is described in #6560 where the widths effected by the scroll bars are not being continuously calculated.

[filoberlini]

there is a little error in table.ts:

this.scrollBodyViewChild.nativeElement.style.marginBottom = this.domHandler.calculateScrollbarWidth() + 'px';

this piece of code should be instead

this.scrollBodyViewChild.nativeElement.style.paddingBottom = this.domHandler.calculateScrollbarWidth() + 'px';

[n83]

Are you guys planning to fix this?

[yigitfindikli]

This is not an issue. This is about angular change detection. When you pushing item to array then detection not calling. You can use three dots notation instead of push like this;

this.cars = [...this.newCar, ...this.cars];

and there is stackblitz example;
https://stackblitz.com/edit/github-z512z1

[rafa-suagu]

This is not an issue. This is about angular change detection. When you pushing item to array then detection not calling. You can use three dots notation instead of push like this;

this.cars = [...this.newCar, ...this.cars];

and there is stackblitz example;
https://stackblitz.com/edit/github-z512z1

@yigitfindikli is exactly the same as I said here: #6236 , but you forced a detectChanges (instead apply one spread operator) that breaks the performance if you have a huge number of elements inside of every cell (editions for example)