Bug: p-table virtual scroll width changes on too long data

[draco2007]

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

https://stackblitz.com/edit/primeng-tablevirtualscroll-demo-dan7xb

Current behavior
If we use virtual scrolling and some few records have too much data inside the whole table changes the size of the columns if the long cells come into view.

Expected behavior
The table should keep its calculated width for all columns.
It is not possible for us to use a fixed width, as we use the table in a full configurable frontend and self layouting tables is a must have.

Minimal reproduction of the problem with instructions
Look at the stackblitz. Make the browser with the table quite small (see the gif) and scroll down until some large data comes.
I have added some large text for the first column at a probability of 2%.

If you make the browser part small enough you see the width of the columns "wobble" while scrolling.

What is the motivation / use case for changing the behavior?
We can't control which data comes to the frontend and unexpected long texts should not break the view.

This is a direct consequence of the display: flex thing for the table. While solving some issues with frozen rows/columns it makes MASSIVE problems on all areas. There are 2 or 3 major issues open with the current implementation.
We can't upgrade to PrimeNG 13 with these issues open.

I would find it better if you give as the old table (with real display: table) back and make the new table experimental, as it obviously is...
In my humble opinion display: flex is in no case suitable for a table.

Please tell us about your environment:
Windows 10, all browsers

• Angular version: 13.3.3

• PrimeNG version: 13.3.3

• Browser: all

• Language: all

[cetincakiroglu]

Hi,

As you mentioned, this happens because flex. Since the td's are flex element you need to give max-width to prevent this happening. This is not a bug, it's natural behaviour of flexbox. Here is the refactored and working version of your example. First one is refactored.

https://stackblitz.com/edit/primeng-tablevirtualscroll-demo-qvnmqw?file=src%2Fapp%2Fapp.component.html

Regards

[draco2007]

Thank you for the possible solution. I will try this.

So I now have to use flex-grow, flex-shrink, flex-base, min-width and max-width to define the size of the columns instead of just using colgroups. And this on all tds and ths.

I am not really happy with this solution.

I postet a longer description of my/our problem with the flex-table in the forums. (Still waiting for the approval, I will post the link later)

Kindest regards
Draco

[draco2007]

I thought a bit and tested something, which is a requirement for us.

https://stackblitz.com/edit/primeng-tablevirtualscroll-demo-abmmkj?file=src/app/app.component.html

One column has a fixed width in px and the other two columns have should use 50% of the remaining space, without getting bigger if the data is too long.

Do you have an idea for this? It is not possible to know how big the table has to be, so we can't work with px for max-width.
The col-groups solve this problem with ease...

[PranKe01]

When I see it correct, the only difference in @cetincakiroglu fix is to set a max-width, right?

What about tables with resizable columns? Here we dont know the maximum possible width. If we would set it to 100px for example, but the text is 300px wide, it would not show the complete text... And even if we would set it to 100px - when that column is on the right side of the table and one resizes it to 20px, the table again would show the scrollbars!

So please reopen this issue or provide a fix for resizable column tables.

[PranKe01]

I could fix it, by setting the width of ".p-datatable table" to 100%.