primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
10.57k stars 4.61k forks source link

Component: Table Virtual Scroll does not correctly work with Row Expansion #16438

Open jackiems82 opened 1 month ago

jackiems82 commented 1 month ago

Describe the bug

Combining Virtual Scroll with Row Expansion does not always seem to work. When the content of the expanded area is quite high, you cannot scroll to the end of the table when there are only a few rows. When there are more rows (e.g. 100) You can correctly scroll to the end, but while scrolling down from the top you will encounter a point where the scroll jumps ahead a couple of rows more than it should. Probably due to swapping out the rows in the DOM. I need to use lazy loading as there can be quite a number of rows to display. Also the expandable area can have a different height per row.

Here is a stackblitz that shows this: https://stackblitz.com/edit/stackblitz-starters-s7bkee

Environment

Windows 10

Reproducer

No response

Angular version

18.0.0

PrimeNG version

17.18.10

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.15.1

Browser(s)

No response

Steps to reproduce the behavior

First scenario:

  1. Expand the first row and scroll to the end with either mouse wheel or by dragging the scroller. => The scroll area jumps up everytime you reach the bottom.

Second scenario:

  1. In app.component.ts, line 25, change the array length from 10 to 100.
  2. Expand the first row and scroll down. => Around when row with id 11 comes into view, when scrolling further the view will jump several rows down (for me it where 5) when usually it only scrolls around 1 row when using the mouse wheel.

Expected behavior

I would expect that the scrolling always works without jumping back up or moving too fast ahead, possibly skipping rows that cannot be seen in this case.

github-actions[bot] commented 5 hours ago

Thanks a lot for this issue! PrimeNG team's roadmap is busy, but community feedback is crucial in prioritization. The more upvotes help ensure this fix can be addressed quickly or the related PR can be merged soon.

github-actions[bot] commented 5 hours ago

Due to PrimeNG team's busy roadmap, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. :sparkles: Thank you for your contribution! :sparkles: