I have a large table that I need users to be able to review many items at a glance as they scroll through, and so I’ve enabled pagination and set the number of visible rows to 100. When the user clicks next page, the table renders the next 100 records, however the scrollbar remains at the bottom of the table, and so the user needs to manually scroll up to the top of the table to resume reviewing where they left off.
To improve this UX friction point, I’d love to be able to find a way to auto-scroll the table to the top after navigating forwards/backwards through the pages. Has anyone managed to find a way to do this?
I suspect that it may need to be something implemented in the DataTable component itself. One wrinkle here that I can see is which element needs auto-scrolling. In my case, I’m using fixed_rows to fix the header row, which has the effect of enforcing a vertical scrollbar on the table element, itself – and this is the element that needs to be auto scrolled. Without fixed headers, I think the scrollbar that needs auto-scrolling would be on the whole page’s body element, which may be a thornier one.