带有react窗口的react表 v7 固定列

IT技术 css reactjs react-table react-window
2022-07-05 01:06:34

我有一张带有 react-table v7 的表。已使用 react-window 进行虚拟化。现在表格的最后一列已修复,但我无法修复表格的最后一列。React-window 的内部元素overflow: auto最终不会让列变得粘稠。

这是重现问题的链接。

我正在尝试围绕这些方面取得一些成就。

如果您看到问题链接,我希望将最后一行固定在某个位置,并使其余行保持水平滚动。

3个回答

对于粘性标题,您应该按照 react-window 所说的那样实现innerElementTypeprops。

但是对于粘性列,可能更标准的方法是使用另一个网格或列表,并像这样同步它们的滚动位置。

你也可以使用react-base-table来实现整个侧面的粘性行和列。

我遇到了这个完全相同的问题。我想出了一个解决方案:

  1. 将 className 添加到 <FixedSizeList className={styles.fixedList} ...>
  2. 添加 css 以覆盖滚动: .fixedList { overflow: unset !important; }

一旦我这样做了,它就允许我的粘性列再次“粘性”。我希望这对你也有帮助。

粘性列和行可以通过使用提供的innerElementType属性来实现FixedSizeListreact-window

这是一个工作示例:

https://codesandbox.io/s/dazzling-field-48x39?file=/src/App.tsx