如何展开 MUI 数据表中的单元格以显示其他内容？

Question

我希望用户能够单击 MUI 数据表中的一行，以便他们可以看到其他内容。当前的renderExpandableRow 函数具有正确的样式，但我不想要新行。我希望第一列中的单元格显示其他数据。有没有办法做到这一点？

注意：我还需要可以展开全部/全部折叠的按钮，因此我需要一个足够灵活的解决方案来做到这一点。

Answer 1

我找到了问题的解决方案。

我使用customBodyRender 将第一列的内容设为按钮。具有可扩展内容的列成为第二列。此列有一个 customBodyRender 和一个 Collapse 组件。我将数据对象的所有 id 以及它们是否被扩展都存储在组件的状态中。单击 Button 时，我的组件的状态会更新，这反过来会改变 Collapse 组件是否打开。

我还在表格选项中使用customToolbar 生成了一个全部展开/全部折叠按钮，它只是将所有行的状态设置为展开/折叠。