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

【问题标题】：React-Table - How to combine useResizeColumns with sticky Header in Material-UI tableReact-Table - 如何在 Material-UI 表中将 useResizeColumns 与粘性标题结合起来
【发布时间】：2020-12-18 21:56:42
【问题描述】：

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

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

在codesandbox 示例中，useBlockLayout 和 useResizeColumns 均已设置，stickyHeader 被忽略。一旦 useBlockLayout 和 useResizeColumns 被注释掉，stickyHeader 就会再次工作。

【问题讨论】：

标签： reactjs material-ui react-table react-table-v7

【解决方案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 }}>

【讨论】：

感谢您的回答。不幸的是，在您的代码框中，表格标题不会与表格一起调整大小（尝试使表格更宽）