Scroll position resetting to 0 on re-render

Using v6.8.0

This is someone else pen, but it works as an example: https://codepen.io/Kamilius/pen/LpObwW?editors=0010

Scroll half way. Change someone’s name that’s visible in the viewport. Table re-renders and scroll position resets to 0.

If I have a dynamically created table, with a lot of records, while I’m viewing this table, a new record is created, the scroll position is reset to 0. I’d then need to scroll back down to my previous position.

React by default doesn’t change the scroll position. This must be a custom function in react-table is there any way to override/disable this behavior? So upon updating the table with a new record I’m not forced to scroll to my previous position?

[SelaO]

@pourmesomecode We managed to fix this, we overrode the body component with a function at first, but when we changed it to be a component it fixed it.

i.e:

<ReactTable
          data={data}
          TbodyComponent={BodyComponent}
....

class BodyComponent extends Component {
  render() {
    return (
      <myDiv>
        {ReactTableUtils.makeTemplateComponent('rt-tbody', 'Tbody')(this.props)}
      </myDiv>
    )
  }
}

[hatton]

Came here after running into this issue in 6.7.0. In my case, if React-Table becomes invisible (e.g. in a tabbed interface) and then visible again, it retains the selected row, but fails to retain the scroll position. I worked around this way for now (typescript):

  private scrollSelectedIntoView() {
    const table = document.getElementsByClassName("ReactTable")[0];
    table
      .getElementsByClassName("rt-tr selected")[0]
      .scrollIntoView({ block: "nearest" });
  }

<ReactTable
    ....
       onFetchData={() => this.scrollSelectedIntoView()}

This may well be an abuse of the onFetchData event, happy to hear of a better way.