如何在Material-Table分页触发时重置垂直滚动条位置？

解决思路 #

要实现切换分页时滚动条回到顶部，核心是在分页切换的回调中定位到表格的垂直滚动容器，调用滚动方法将其重置到顶部。之前的报错大概率是因为ref的引用路径不正确，或是未正确初始化ref。

具体实现步骤 #

1. 初始化表格引用：用useRef创建一个引用，绑定到MaterialTable组件上。
2. 修正onChangePage回调：在分页切换时，通过引用找到表格的滚动容器，调用滚动方法重置位置。

完整代码示例 #

import { useRef } from 'react';
import MaterialTable from 'material-table';

// ... 其他导入和组件逻辑

const YourTableComponent = () => {
  // 创建表格引用
  const tableRef = useRef(null);

  return (
    <MaterialTable
      ref={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={() => {
        // 定位滚动容器并重置滚动位置
        if (tableRef.current?.tableContainerDiv?.current) {
          tableRef.current.tableContainerDiv.current.scrollTop = 0;
          // 也可以用scroll方法：tableRef.current.tableContainerDiv.current.scroll(0, 0);
        }
      }}
      actions={[...]}
      components={{
        Toolbar: (props) => <CustomToolbarComponent {...props} />,
      }}
    />
  );
};

export default YourTableComponent;

关键说明 #

• 必须确保tableRef正确绑定到MaterialTable组件，才能访问到内部的tableContainerDiv引用。
• 增加多层可选链判断，避免引用为空时触发报错，提升代码健壮性。
• 如果上述方式无法定位容器，也可以通过DOM类名（比如.MuiTableContainer-root）直接选择，但使用组件ref的方式更可靠。

内容的提问来源于stack exchange，提问作者Ciaran Crowley