Material-Table切换页面时垂直滚动条未重置的解决问询

使用Material-Table时，切换分页后垂直滚动条会停留在之前的位置，容易造成用户困惑。官方文档仅提供了doubleHorizontalScroll用于调整水平滚动条尺寸，未提及垂直滚动条重置的配置项，可通过以下方法解决：

实现步骤 #

• 创建表格引用：通过useRef获取Material-Table的实例引用
• 在分页切换事件中调用滚动容器的scroll方法，将滚动位置重置到顶部

完整代码示例 #

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

const YourTableComponent = () => {
  const tableRef = useRef(null);
  // 假设data、columns、tableIcons、CustomToolbarComponent已定义

  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={() => {
        // 核心代码：重置滚动条到顶部
        tableRef.current.tableContainerDiv.current.scroll(0, 0);
      }}
      actions={[]} 
      components={{
        Toolbar: (props) => <CustomToolbarComponent {...props} />,
      }}
    />
  );
};

export default YourTableComponent;

原理说明 #

Material-Table内部通过tableContainerDiv这个ref对象管理表格的滚动容器，直接调用该容器的scroll(0, 0)方法，即可将垂直滚动条快速定位到顶部。

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