Autodesk / react-base-table

A react table component to display large datasets with high performance and flexibility
https://autodesk.github.io/react-base-table/
MIT License
1.5k stars 164 forks source link

Severe scroll lag #425

Open carielis opened 1 year ago

carielis commented 1 year ago

https://github.com/Autodesk/react-base-table/assets/60296759/e398f59f-5cd7-4fae-9a73-c03d6d00126d

I don’t know what went wrong, but on macOS the lags look even worse, it’s also impossible to use on an office computer

carielis commented 1 year ago

on macOS

https://github.com/Autodesk/react-base-table/assets/60296759/7d5ed105-8514-4d0e-9712-984fbce700a2

Uregek commented 1 year ago

i am facing the same problem ^

jellycattime commented 1 year ago

fix this please

xiaoxudoo commented 1 year ago

Set same row height maybe result good performance~

carielis commented 1 year ago

Set same row height maybe result good performance~

xiaoxudoo commented 1 year ago

Set same row height maybe result good performance~

  • A little better, but not even close with react-window + sticky

yes, you can read the issue reply which write by the repo author: https://github.com/Autodesk/react-base-table/issues/3#issuecomment-894867194

which mentions: Thanks for the abandonment of IE(the only reason I used three tables to achieve frozen columns), those features could be accomplished in a super simple way and much better performance(using position: sticky)

I think the scroll lag is caused by using three table for fixed column. so maybe we can fixed it by using position: sticky; I'd like to try it...

carielis commented 1 year ago

Set same row height maybe result good performance~

  • A little better, but not even close with react-window + sticky

yes, you can read the issue reply which write by the repo author: #3 (comment)

which mentions: Thanks for the abandonment of IE(the only reason I used three tables to achieve frozen columns), those features could be accomplished in a super simple way and much better performance(using position: sticky)

I think the scroll lag is caused by using three table for fixed column. so maybe we can fixed it by using position: sticky; I'd like to try it...

Do you happen to know the fork in which this is implemented?

carielis commented 1 year ago

We defeated vertical scrolling by making sticky

https://github.com/Autodesk/react-base-table/assets/60296759/11b8b813-0064-4d3c-869d-47635614eb64

, but we don’t yet understand how to defeat headers

lmcgit1 commented 10 months ago

@carielis How can sticky solve it?

lmcgit1 commented 10 months ago

@xiaoxudoo Do you happen to know the fork in which this is implemented?

carielis commented 9 months ago

@carielis How can sticky solve it?

We disabled fixedColumn and simply wrote our own solution, noting that column virtualization is missing from the react-base-table library