使用react-table v7创建嵌套表

Question

提前感谢您的帮助。

我试图解决的问题是使用react-table v7创建一个表，并在该表中使用展开并显示另一个表，其中包含与图像中附加的第一个选择相关的数据。

这是图像的codesandbox示例，我想做同样的事情，但使用最新版本的react-table，我尝试使用子组件，但这些只向我显示数据，而不是它们具有的标题，因此我无法执行排序、子表内搜索

我尝试在子组件内渲染反应表的另一个实例，但看起来它始终保留在第一列中：

有谁有一个看起来像参考图像中的示例可以帮助我吗？

Answer 1

因为react-table v7是无头的，所以你可以通过多种方式来解决这个问题。至少，您需要一种方法来控制打开哪一行，并让该行将其内容呈现为子行。我分叉了react-table v7基本表示例作为示例。以下是我所做的基本更改，您可以将其应用到您自己的用例中：

• 为了控制打开哪一行，false创建了一个名为“open”的状态变量，它对应于正在显示其内容（或者如果没有）的行的 ID。有无数种方法可以实现这种逻辑，而且也不一定需要由父 Table 组件控制。例如，如果您的行本身就是组件，那么它们可以跟踪自己的“打开”状态。
• 然后，子组件被添加为父表的子组件，父表将其作为名为“children”的 prop 传递给父组件。然后，根据上面的“打开”状态变量，将其渲染在自己的行中。在这里，它纯粹被渲染为{children}但更复杂的用例可以使用React.cloneElement或类似的，如果您将数据从父组件向下传递到表的子组件。