Whenever I scroll up or down in my Material-Table, and then switch pages, the vertical scroll bar doesn't reset to the top of the table. Instead, it stays where it was before changing the page, causing confusion for users.
The only mention of scroll bar-related properties in the Material-Table documentation is doubleHorizontalScroll, which simply doubles the size of the horizontal scroll bar.
Is there any way to reset the vertical scroll bar when the page changes?
This is the code for my table:
<MaterialTable
data={data}
columns={columns}
icons={tableIcons}
options={{
columnsButton: true,
pageSize: 25,
pageSizeOptions: [5, 10, 15, 25, 50, 100],
padding: "dense",
filtering: true,
doubleHorizontalScroll: true,
maxBodyHeight: "45rem",
searchFieldStyle: {...},
headerStyle: {...},
rowStyle: (data, index) => {...},
}}
// I attempted to use this solution from a previous question, but it resulted in an error.
// onChangePage={() => {
// tableRef.current.tableContainerDiv.current.scroll(0, 0);
// }}
actions={[...]}
components={{
Toolbar: (props) => <CustomToolbarComponent {...props} />,
}}
/>
https://codesandbox.io/s/elated-sinoussi-y29trc?fontsize=14&hidenavigation=1&theme=dark