reactjs - React-Table - 如何在 Material-UI 表中将 useResizeColumns 与粘性标题结合起来

Question

在 React-Table 的最新版本 (7.5.x) 中，有没有办法在不破坏 Material-UI 表的“Sticky Header”属性的情况下将调整大小的列添加到 Material-UI 表？

一方面，添加“useFlexLayout”或“useBlockLayout”会破坏“Sticky Header”，另一方面，如果没有“useFlexLayout”或“useBlockLayout”，列调整大小将无法正常工作......

在代码框示例中，设置了useBlockLayout&useResizeColumns而stickyHeader忽略了 。一旦useBlockLayout&useResizeColumns被注释掉， stickyHeader就会再次工作。

Answer 1

这是我在codesandbox上的解决方案。我希望这是你需要的。

我为元素添加了一些内联样式：

<MaUTable
  ...
  style={{ display: "flex", flexDirection: "column" }}
>
<TableHead
    style={{
      position: "sticky",
      top: 0,
      alignSelf: "flex-start",
      zIndex: 1
    }}
  >
...
<TableBody style={{ position: "relative", zIndex: 0 }}>