javascript - 材质 UI 表。如何将可扩展表与父表对齐

Question

我正在构建一个表格，它将在多个组中显示表格数据。表格将有一个主表格标题，显示每个表格单元格是什么。它还将由可扩展的组组成，这些组将保存所有表格数据。

使用 Material UI，我查看了https://v4.mui.com/components/tables/#collapsible-table上的示例

他们所做的是将组件包装Collapse在TableCell组件中。问题是此时，里面的代码Collapse与父表结构“失去了联系”，因为它实际上存在于单个表格单元格中。我尝试了多种方法，还尝试在Collapse组件中创建一个新表。由于明显的原因，这确实不起作用，因为所有内容都是在所述表格单元格中创建的。

如何将一个表拆分为多个组，其中每个组都是可扩展/可折叠的，并且由表格数据组成，在主表之后结构化？

我在https://codesandbox.io/s/material-demo-forked-s3cqv?file=/demo.tsx创建了一个快速模拟， 您可以想象模拟中的组后面会有多个组。如您所见，数据与主表标题不一致。

这实际上可以通过 Material UI 组件实现吗？

感谢您的阅读。
最好的问候
Stephan Bakkelund Valois

标签： javascriptreactjsmaterial-ui