ReactTable 组件中的固定列

Question

当我们得到一个页面较小的水平列时，我们可以修复一列吗？

例如，我们可以修复列firstName在此例子。

干杯！！

Answer 1

不使用react-table或任何npm依赖项固定列只能通过react应用程序中的css技巧来实现。

在这里找到完整的代码

步骤1：将数据集划分为固定列和可滚动列

步骤 2：将两张桌子并排放置，使其看起来像一张桌子

第 3 步：用一个 div 将两者包裹起来，并使用固定宽度，为第二个提供固定宽度或响应宽度，并设置overflow-x:scroll; 以便它保持水平滚动，而第一个表格列将不可滚动

Answer 2

react-table 不支持固定列，问题是打开Sticky columns。但是已经实现了解决方法，您可以找到源github或npm 包（来自线程Sticky columns 的链接）。 在线演示。感谢纪尧姆茉莉。

Answer 3

由于 v7react-table最近发布并且是完全重写，react-table-hoc-fixed-columns与它不兼容。如果您使用的是 <7 版本，请参阅上面@Alex 的答案。

对于react-tablev7，您可以使用同一作者的react-table-sticky 。