React-Table-如何将useResizeColumns与Material-UI表中的粘性标头结合使用

问题描述

在最新版本（7.5.x）的React-Table中，有没有一种方法可以将调整大小的列添加到Material-UI表中而不会破坏Material-UI表的'Sticky Header'属性？

一方面，添加'useFlexLayout'或'useBlockLayout'会破坏'Sticky Header'，另一方面，如果没有'useFlexLayout'或'useBlockLayout'，则无法调整列大小...

在codesandbox示例中，同时设置了useBlockLayout和useResizeColumns，而忽略了stickyHeader。 useBlockLayout和useResizeColumns被注释掉后，stickyHeader再次工作。

解决方法

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

我已经向元素添加了一些内联样式：

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