英文:
How to reset vertical scroll bar position in Material-Table when pagination is triggered?
问题
在我在Material-Table中向上或向下滚动，然后更改页面时，垂直滚动条不会重置到表格顶部。相反，滚动条仍然保持在更改页面之前的位置。这会导致一些使用表格的人感到困惑。
文档中与滚动条相关的唯一属性是doubleHorizontalScroll，它会强制表格的水平滚动条大小加倍。
是否有一种方法可以在更改页面时重置垂直滚动条？
这是我的表格：
<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) => {...},
}}
actions={[...]}
components={{
Toolbar: (props) => <CustomToolbarComponent {...props} />,
}}
/>
英文:
When I scroll up or down in my Material-Table, and then change page, the vertical scroll bar is not reset to the top of the table. Instead the scroll bar remains where it was before changing page. This is causing some confusion with people who are using the table.
The only scroll bar related props in the documentation for Material-Table is doubleHorizontalScroll, which forces the tables horizontal scroll bar to double in size.
Is there any way to reset the vertical scroll bar when the page is changed?
This is 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 tried using this from a previous question but it results in an error.
// onChangePage={() => {
// tableRef.current.tableContainerDiv.current.scroll(0, 0);
// }}
actions={[...]}
components={{
Toolbar: (props) => <CustomToolbarComponent {...props} />,
}}
/>
答案1
得分: 0
以下是已翻译的内容：
"The following fixed this issue for me.
import React, { useRef } from "react";
const tableRef = useRef();
...
<MaterialTable
tableRef={tableRef}
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) => {...},
}}
onChangePage={() => {
tableRef.current.tableContainerDiv.current.scroll(0, 0);
}}
actions={[...]}
components={{
Toolbar: (props) => <CustomToolbarComponent {...props} />,
}}
/>
`"
<details>
<summary>英文:</summary>
The following fixed this issue for me.
import React, { useRef } from "react";
const tableRef = useRef();
...
<MaterialTable
tableRef={tableRef}
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) => {...},
}}
onChangePage={() => {
tableRef.current.tableContainerDiv.current.scroll(0, 0);
}}
actions={[...]}
components={{
Toolbar: (props) => <CustomToolbarComponent {...props} />,
}}
/>
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论