Scrolling not smooth on touch devices (Mobile and Tablets)

[carlospence]

I was using react-fluid-table and needed infinite scrolling but wasn't implemented in react-fluid-table and I got to know about react-base-table and was really happy about its rich features, so I replaced the fluid-table with base-table in one of my component. I noticed that on desktop or laptop devices with mouse, the scrolling is smooth but on touch devices like my phone (Android) and windows tablet, the scrolling is not smooth. It looks draggy and the total items are just 200 rows. I now put both fluid-table and base-table in the component for comparison. fluid-table is quite very smooth when scrolling while base-table drags as if each row is been forced to move. I removed AutoResizer and still the same, used estimatedRowHeight, still the same.

I really want to use base-table because of its feature rich but the smooth scrolling will definitely make me reconsider other options like implement the infinite loading on react-fluid-table.

I recorded the screen of my app using react-fluid-table vs react-base-table.

App Screen recorder

[nihgwu]

That's interesting regarding both are using react-window, but TBH BaseTable is not designed for mobile/tablet, and I think in your use case a list would be enough, no need to be a table

[carlospence]

Yes, in my use case a list could be enough, on bigger screen, I use more columns and on mobile, I collapse the information into two columns, so instead of using multiple component, I decided to use one react-window based table component. So I hide some columns on mobile view and change the renderer. That way, I don't have to maintain different code and library for different views. Note, the first column has a checkbox underneath, ontouch or hover, the letter Avatar changes to checkbox.

I already have a page that I used List for mobile view and Grid for desktop view and I don't think I like the maintenance process of the codes.

Hope, there is something that can be done to optimized for mobile/tablet in the nearest future. Am already implementing infinite loading for react-fluid-table.