reactjs 材料表滚动条在表页更改时不重置

k7fdbhmy 于 2023-03-08 发布在 React

关注(0)|答案(1)|浏览(154)

当我在材料表中上下滚动，然后换页时，垂直滚动条没有重置到表格的顶部。相反，滚动条保持在换页前的位置。这会引起使用我的表格的用户的混淆。
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); // this is the key!
    }}
    actions={[...]}
    components={{
        Toolbar: (props) => <CustomToolbarComponent {...props} />,
    }}
/>

reactjs

来源：https://stackoverflow.com/questions/75626628/material-table-scroll-bar-does-not-reset-on-table-page-change

1条答案

按热度按时间

wlsrxk511#

我发现您可以使用tableRef和onChangePage处理程序的组合来完成此操作：

import React, { useRef } from 'react';

function MyComponent() {
  const tableRef = useRef();
  
  const columns = []; // your columns

  return (
    <MaterialTable
      tableRef={tableRef}
      columns={columns}
      data={[]}
      title="My Title"
      options={{ maxBodyHeight: '70vh' }}
      onChangePage={() => {
        tableRef.current.tableContainerDiv.current.scroll(0, 0); // this is the key!
      }}
    />
  );
}

赞(0）回复(0）举报 2023-03-08

我来回答

reactjs 材料表滚动条在表页更改时不重置

1条答案

相关问题

热门标签

最新问答