React-table: Rows/Page changes do not scroll list to top.

[aldensc]

What version of React-Table are you using?

Your bug may already be fixed in the latest release. Run yarn upgrade react-table!
6.7.4

What bug are you experiencing, or what feature are you proposing?

When using a scrollable list with fixed headers and paging, changing the page or the rows/page does not scroll the list to the top. I believe it should. We worked around this by doing the scrollTop within onFetchData. Horizontal scrolling should (and does) get maintained.

Use https://codesandbox.io/s/X6npLXPRW (by clicking the "Fork" button) to reproduce the issue.

This issue can be seen using the react-table example...https://react-table.js.org/#/story/fixed-header-w-vertical-scroll

What are the steps to reproduce the issue?

1. Increase rows to 20.
2. Scroll to the bottom.
3. Click Next to advance to the next page (or change rows to 25).
4. Vertical scroll position is still at the bottom (should probably go to the top).

Regards,
Scott Alden (IQVIA)
scott.[email protected]

[melkayam92]

I Also have this problem.

@aldensc For a workaround i added to ReactTable props:
onPageChange={() => {
document.getElementsByClassName('rt-tbody')[0].scrollTop = 0;
}}

[tannerlinsley]

Since this is a question of implementation we invite you to continue the conversation in the react tools slack organization. Thanks! https://react-chat-signup.herokuapp.com/

[erick2014]

well it worked for me but If I do something like document.getElementsByClassName('rt-tbody')[1].scrollTo(0,0)

[farhantahir]

Any solution to this apart from following:

document.getElementsByClassName('rt-tbody')[0].scrollTop = 0;