petyosi / react-virtuoso

The most powerful virtual list component for React
https://virtuoso.dev
MIT License
5.26k stars 301 forks source link

[BUG] TableVirtuoso with MUI table components seems to have a problem with ScrollSeekPlaceholder (React 18.2) #925

Closed wawel37 closed 1 year ago

wawel37 commented 1 year ago

Describe the bug When provided TableVirtusoso with MUI Table components like Table, TableHead, TableRow and TableBody, the ScrollSeekPlaceholder component, which consists of mui TableRow and TableCells, seems not to be working as intended. When scrolling our table, we are sill getting a lot of empty white space, then the placeholder flickers quickly, and the intended content shows up. The problem is, that still most of the time, the user sees some white empty space, which would indicate that the placeholder isn't working as intended. We've also tried to set proper overscan and increaseViewportBy values, but we've been still getting no improvements.

Reproduction Any VirtuosoTable with MUI components and ScrollSeekPlaceholder.

To Reproduce Steps to reproduce the behavior:

  1. Create a table like in the point above (at least 20 columns, ~300 records)
  2. Scroll down and up.

Expected behavior We can barely see the empty space, and most of the time the placeholder is present

Screenshots We would rather not share screenshots of our project

Desktop (please complete the following information):

Additional context It might be helpful, we've used this configuration for our table:

scrollSeekConfiguration={{
  enter: (velocity) => Math.abs(velocity) > 50,
  exit: (velocity) => Math.abs(velocity) < 30,
}}
petyosi commented 1 year ago

Please follow the template of the issue and showcase your problem in a sandbox. I can't guess on what goes on in your environment.

I will reopen this issue once you do so.

alex-nb commented 1 year ago

@wawel37 Hi! Did you find out what was the problem?