带有react-window的React table v7固定列

Question

我有一张带有react-table v7的桌子。使用react-window进行虚拟化。现在表的最后一列已修复，但我无法修复表的最后一列。 React-window 的内部元素有

overflow: auto

，它最终不会让列变得粘性。

这是重现问题的链接。

我正在努力围绕这些线实现一些目标。

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

Answer 1

对于粘性标题，您应该实现 innerElementType 属性，如反应窗口所说，如 this。

但是对于粘性列，也许更标准的方法是使用旁边的另一个网格或列表并同步它们的滚动位置，如this一个。

您还可以使用 react-base-table 实现整个侧粘行和列。

Answer 2

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

1. 添加一个类名到
2. 添加 css 来覆盖滚动： .fixedList { Overflow: unset !important; }

一旦我这样做了，它就可以让我的粘性列再次变得“粘性”。我希望这也能帮助你。

Answer 3

粘列和行可以通过使用

innerElementType

提供的

FixedSizeList

的

react-window

属性来实现。

这是一个工作示例：

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

Answer 4

嗨，我创建了这个可重用的反应组件

• 它仅使用带有自定义粘性列实现的react-window
• 我有很多列，所以我也需要列虚拟化

https://codesandbox.io/s/react-window-sticky-grid-forked-kkcf2z?file=/src/CustomVirtualGrid.js