英文:
Material-Table scroll bar does not reset on table page change
问题
当我在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) => {...},
}}
onChangePage={() => {
tableRef.current.tableContainerDiv.current.scroll(0, 0); // 这是关键！
}}
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 confusion with people who are using my table.
The only scroll bar related props in the documentation for Material-Table is doubleHorizontalScroll, which forces the table's horizontal scroll bar to double in size.
Is there any way to reset the vertical scroll bar position when the page is changed?
This is the 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) => {...},
}}
onChangePage={() => {
tableRef.current.tableContainerDiv.current.scroll(0, 0); // this is the key!
}}
actions={[...]}
components={{
Toolbar: (props) => <CustomToolbarComponent {...props} />,
}}
/>
答案1
得分: 1
我发现您可以结合使用tableRef和onChangePage处理程序来实现这个目标：
import React, { useRef } from 'react';
function MyComponent() {
const tableRef = useRef();
const columns = []; // 您的列配置
return (
<MaterialTable
tableRef={tableRef} // <---- 将tableRef与MaterialTable关联起来
columns={columns}
data={[]}
title="My Title"
options={{ maxBodyHeight: '70vh' }}
onChangePage={() => {
tableRef.current.tableContainerDiv.current.scroll(0, 0); // 这是关键部分！
}}
/>
);
}
这段代码演示了如何在React组件中使用tableRef和onChangePage处理程序来实现特定的功能。
英文:
I've discovered you may use a combination of tableRef and the onChangePage handler to do it:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
import React, { useRef } from 'react';
function MyComponent() {
const tableRef = useRef();
const columns = []; // your columns
return (
<MaterialTable
tableRef={tableRef} // <-- associate tableRef with MaterialTable
columns={columns}
data={[]}
title="My Title"
options={{ maxBodyHeight: '70vh' }}
onChangePage={() => {
tableRef.current.tableContainerDiv.current.scroll(0, 0); // this is the key!
}}
/>
);
}
<!-- language: lang-html -->
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论