Scrollable table may misalign when there is less data then scrollHeight

[jw61]

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)
See my plunk: https://plnkr.co/edit/Y45WRBI6EAEaAfNml7VG?p=preview

Current behavior
Thanks for your previous suggestion to use pTemplate="colgroup" for setting column widths with p-table.

However, with p-table 5.2.0-rc.2, if you set the columns widths as percentages with pTemplate="colgroup", set [scrollable]="true", but set scrollHeight large enough that a scroll bar is not displayed, then the header columns and body columns do not line up because the body is wider than the header.

Expected behavior
If the scroll bar is not displayed, the space on the right of the header should be hidden too, making the columns line up again.

Minimal reproduction of the problem with instructions
See my plunk: https://plnkr.co/edit/Y45WRBI6EAEaAfNml7VG?p=preview

• Create a p-table with four columns and four rows
• Set different columns widths as percentages with a pTemplate="colgroup"
• Set [scrollable]="true"
• Set scrollHeight large enough that a scroll bar is not displayed
• The header and body columns do not line up

What is the motivation / use case for changing the behavior?
A table where the header lines up with the body columns

Please tell us about your environment:
Angular CLI: 1.6.3
Node: 8.9.4
OS: win32 x64
Angular: 5.2.1

• Angular version: 5.2.1

• PrimeNG version: 5.2.0-rc.2

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  Chrome: 63

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  Typescript 2.4.2

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

[garrettld]

I was about to submit an issue for this same thing.

The old DataTable component checked hasVerticalOverflow() before setting the scrollbar width property

primeng/src/app/components/datatable/datatable.ts

Line 423 in 6fbb54b

let scrollBarWidth = this.hasVerticalOverflow() ? this.domHandler.calculateScrollbarWidth() : 0;

but the new TurboTable does not

primeng/src/app/components/table/table.ts

Line 1568 in 6fbb54b

let scrollBarWidth = this.domHandler.calculateScrollbarWidth();

Restoring some kind of check like that should fix this issue. I was able to work around this by checking for vertical overflow myself inside ngOnChanges().

[jw61]

Hi @cagataycivici , thanks for the fix. It works great now!