Datatable: VirtualScroller is not smooth and fails to reach bottom of table

[raymolla7]

Describe the bug

Just a simple DataTable with resizable columns and virtual scroll.

There are a few issues in PrimeReact V9 that did not exist in V8.

With the description column set to width of 4rem:
- Expected: The description column has width of 4rem and the text is truncated
- Actual: The column width is expanded to the largest text

When scrolling the table:
- Expected: The column widths stay the same
- Actual: The columns widths shift and change size'

EDIT: The above two have been solved by applying CSS tablelayout to "fixed'

When scrolling to the bottom of the table:

• Expected: Scrolling is smooth
• Actual: Scrolling is janky and does not reach bottom

Reproducer

https://codesandbox.io/s/primereact-table-issues-s8wgkg?file=/src/App.js:486-501

PrimeReact version

9.6.0

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

See the codesandbox link above

Expected behavior

No response

[melloware]

Can you check #4078 especially the section on autoLayout. I think you need to use "fixed" to make it work like v8 used to

[raymolla7]

@melloware Thanks for the tip, I just added "fixed" and it solved the first two issues! I just updated the codesandbox:

https://codesandbox.io/s/primereact-table-issues-s8wgkg?file=/src/App.js

However the third issue still persists, the virtual scroller is quite janky and fails at the bottom of the scroll. This third issue may have also existed in V8.

[melloware]

Awesome. Do you mind searching for other virtual scroller issues I feel like this may have been reported already?

[raymolla7]

There is a similar issue #2854

But the flickering in my Repo appears more Janky/Severe, and mine you can't scroll to the bottom, but the repo in that one you can scroll to the bottom.

[raymolla7]

I also just tried the workaround @ttongsul offered in #2854

https://codesandbox.io/s/primereact-virtual-scroll-with-workaround-5hjncp?file=/src/App.js

It appears to help a bit! But still experiencing significant jank and I am still unable to scroll to the bottom.

[melloware]

Ok then yep sounds like it is still broken

[irv075]

Still an issue in 10.5.0, is there any progress on this?

[celestialvigor]

What is strange is that primereact, primevue, and primeng all have the same issue with their DataTable, and it appears when the itemSize value is smaller than 46 (not sure how much smaller, but try a value in the 20s). It seems to be an approach-based problem.