Primeng: p-table columns resize is not working when "Scrollable" set to true, results in error "Uncaught Scrollable tables require a colgroup to support resizable columns"

[balajimk]

I have tge following p-table definition and the column resize fails with error "Uncaught Scrollable tables require a colgroup to support resizable columns"

Issue https://github.com/primefaces/primeng/issues/4940 seems closer but not helping.

[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 fork the plunkr below and create a case demonstrating your bug report. Issues without a plunkr have much less possibility to be reviewed.

http://plnkr.co/edit/oesPyp6sqrUVuH1TUV8i?p=preview

Current behavior
Column resize isn't working at all. Refer the plnkr example.

Expected behavior
Column resize should work fine.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Please tell us about your environment:
Windows 10 64bit, Visual Code, npm 5.6.0, angular webpack dev server

• Angular version: 5.0.0

• PrimeNG version: 5.2.4

• Browser: [Chrome 66.0.3359.117 (Official Build) (64-bit)]
  

  • Language: TypeScript 2.8.1

[Dragsaw]

@balajimk, it's specified in documentation:

Note: Scrollable tables require a column group to support resizing.

You need to add a template like this:

<ng-template pTemplate="colgroup" let-columns>
    <colgroup>
         <col *ngFor="let col of columns" [style.width]="col.width">
    </colgroup>
</ng-template>

Please refer to "Scrollable with Variable Width" example on this page.

[balajimk]

@Dragsaw, Ah! I missed it. Thanks a lot.

[eliadeini]

@Dragsaw, I have the same problem and tried your solution. I got the following error on FireFox:
"TypeError: col is undefined"

Chrome gives me the following error for the same issue:
"zone.js:192 Uncaught TypeError: Cannot read property 'nextElementSibling' of undefined
at Table.push../node_modules/primeng/components/table/table.js.Table.resizeColGroup (table.js:1115)
at Table.push../node_modules/primeng/components/table/table.js.Table.onColumnResizeEnd (table.js:1054)
at ResizableColumn.push../node_modules/primeng/components/table/table.js.ResizableColumn.onDocumentMouseUp (table.js:2247)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:496)
at invokeTask (zone.js:1540)"

[Dragsaw]

@eliadeini, try updating primeng package to the latest version.

[eliadeini]

Thanks @Dragsaw ,
I tried that but still get the same error.
My PrimeNg is on version 6.0.1:

"primeicons": "^1.0.0-beta.7",
"primeng": "^6.0.1",
"rxjs": "^6.2.2",

[eliadeini]

Hi,
I found the issue: The let-columns in the first row was redundant.

It worked in this way:

<ng-template pTemplate="colgroup">
    <colgroup>
         <col *ngFor="let col of columns" [style.width]="col.width">
    </colgroup>
</ng-template>

[eliadeini]

Great! You are welcome!

Sent from Mailhttps://go.microsoft.com/fwlink/?LinkId=550986 for Windows 10

[tburger]

@Dragsaw Thank you VERY much!!

[danbord]

@eliadeini thank you so much, struggled to find the problem. Its fixed now!