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

Question

我有一个集成了材料表的 react-chartjs ，请在以下链接中找到它： https://codesandbox.io/s/elastic-brook-okkce?file=/src/Dashboard.jsx

您可能会看到，单击任何栏都会填充一个表格。 该表中的值是从后端响应中获取的（这里我没有写相同的代码，但是它在我的PC上正常工作）。该材料表接受“数据”属性，该属性具有分配给该属性的对象（“ chartData”），该对象存储了加载图表时来自后端的响应。

我需要两件事：

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

2. 在单击每一行（父行或子行）时，我只需要console.log该行的“ 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