材料表嵌套行在reactjs中展开/折叠

Question

我有一个集成了 ma​​terial-table 的 react-chartjs，请在此链接中找到它： https://codesandbox.io/s/elastic-brook-okkce?file=/src/Dashboard.jsx

您可能会看到，单击任何条形都会填充一个表格。 该表中的值是从后端响应中获取的（我没有在此处编写相同的代码，但它在我的 PC 中正常工作）。该 Material-table 接受“数据”道具，该道具具有分配给该道具的对象（“chartData”），该道具存储图表加载时来自后端的响应。

我需要两件事：

1. 应该有一个动作（带有向下箭头/向上箭头图标）来为每个父行字段呈现嵌套的子行，对于每个父行字段，我需要它的“id”字段来获取子行对象来自后端的数组。 （例如：https://stackblitz.com/edit/angular-material-expandable-table-rows?file=app%2Ftable%2Ftable.component.html 但这是在 angular 中实现的）

2. 点击每一行（父行或子行）时，我只需要控制台记录该行的“id”字段，我尝试通过以下方式实现：

   onRowClick={(evt, selectedRow) => console.log("选中行ID：", selectedRow.id) } 但我也希望子行具有相同的功能。

我是新来的，所以可能会混淆提出这个问题，我希望它能让你理解这个问题，请进一步澄清。

Answer 1

您可以通过设置将提供 id 和 parentId 的关系数据数据集来显示material-table 中的子数据。 here is an example

要获取点击行的选定ID，您可以使用onSelectionChange

Here is the complete code. Please check this code sandbox