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

Posted 2023-02-22

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

【英文标题】：How Do I Expand A Cell in MUI-Datatables to display additional content?

【发布时间】：2020-05-24 00:47:53

【问题描述】：

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

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

【问题讨论】：

你能指定这应该是什么样子吗？你点击一个列，你希望数据显示在哪里？

【参考方案1】：

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

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

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