Primeng: p-table: cannot resize column with the new VirtualScroll on primeng 9.1.0

[jacqueslareau]

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)
https://stackblitz.com/edit/github-yjs23x

Current behavior
Crashes with error:
Error in /turbo_modules/[email protected]/bundles/primeng-table.umd.js (1314:73)
Cannot read property 'offsetWidth' of null

Expected behavior
Should be able to resize columns

Minimal reproduction of the problem with instructions
Resize a column

What is the motivation / use case for changing the behavior?
Being able to resize a column with the new VirtualScroll refactor.

Please tell us about your environment:
Windows 10

• Angular version: 5.X
  9.1.9

• PrimeNG version: 5.X
  9.1.0

• 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 ]
  Tested on Chrome Version 83.0.4103.61 (Official Build) beta (64-bit)

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

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

[rauchcor]

I have the exact same issue!

[AzatKhalilov]

The same is for me. If set virtualScroll = true that in "fit" mode I haven't any error and column in "header" template is resized but in body template isn't changed size. In "expand" mode I have exception "Cannot read property 'offsetWidth' of null". If set virtualScroll = false all works very well.

After debug I've found that maybe problem is in file table.ts in expression
let scrollableBodyTable = DomHandler.findSingle(scrollableView, '.ui-table-scrollable-body table');
This code doesn't find body and scrollableBodyTable is null

[AzatKhalilov]

After extra investigation I found that for virtual scrolling isn't set class ui-table-scrollable-body! Because code doesn't work. After set this class all work good

[pav0999]

After extra investigation I found that for virtual scrolling isn't set class ui-table-scrollable-body! Because code doesn't work. After set this class all work good

Could you please provide working stackblitz? I'm setting ui-table-scrollable-body class for body template, but nothing happens.

[AzatKhalilov]

After extra investigation I found that for virtual scrolling isn't set class ui-table-scrollable-body! Because code doesn't work. After set this class all work good

Could you please provide working stackblitz? I'm setting ui-table-scrollable-body class for body template, but nothing happens.

Sorry I can't. You shouldn't set this class to body template. You should set this class to cdk-virtual-scroll-viewport. This component has class ui-table-virtual-scrollable-body. If you add class ui-table-scrollable-body that all works . "cdk-virtual-scroll-viewport" tag is internal in component p-table. So I 've made the next! In ngAfterInit I've found cdk-virtual-scroll-viewport and added class manually using Document. It's temporary decision for me.

[pav0999]

Working example with horizontal scroll, virtual scrolling and resizable columns
Thanks to AzatKhalilov

[m11t]

This is still a bug in Version 10.0.3.
The workaround has to be adapted from

ngAfterViewInit(): void {
    const viewportScrollable = document.getElementsByTagName('cdk-virtual-scroll-viewport');
    viewportScrollable[0].classList.add('ui-table-scrollable-body');
}

to

ngAfterViewInit(): void {
    const viewportScrollable = document.getElementsByTagName('cdk-virtual-scroll-viewport');
    viewportScrollable[0].classList.add('p-datatable-scrollable-body');
}

in order for it to still work.

[AzatKhalilov]

This is still a bug in Version 10.0.3.
The workaround has to be adapted from

ngAfterViewInit(): void {
    const viewportScrollable = document.getElementsByTagName('cdk-virtual-scroll-viewport');
    viewportScrollable[0].classList.add('ui-table-scrollable-body');
}

to

ngAfterViewInit(): void {
    const viewportScrollable = document.getElementsByTagName('cdk-virtual-scroll-viewport');
    viewportScrollable[0].classList.add('p-datatable-scrollable-body');
}

in order for it to still work.

Yes! Because they renamed a lot of classes

[yigitfindikli]

Unable to replicate with PrimeNG 11.0.0-rc.1, if the issue persists please create a new ticket with a test case reproducing the issue e.g. stackblitz or a github repo and it will be reviewed by our team once again.