Material table reactjs 中的嵌套行 expand/collapse
Material table nested rows expand/collapse in reactjs
我有一个 react-chartjs 与 material-table 集成，在这里找到它link:
https://codesandbox.io/s/elastic-brook-okkce?file=/src/Dashboard.jsx
您可能会看到，单击任何栏时，都会填充 table。
table 中的值是从后端响应中获取的（我没有在这里编写相同的代码，但它在我的 PC 中正常工作）。 Material-table 接受 "data" 道具，该道具具有分配给该道具的对象 ("chartData")，该道具存储图表加载时来自后端的响应。
我需要两件事：
应该有一个动作（带有箭头 down/arrow 向上图标）来为每个父行字段呈现嵌套的子行，对于每个父行字段，我需要它 "id" 字段从后端获取子行对象数组。
（例如：https://stackblitz.com/edit/angular-material-expandable-table-rows?file=app%2Ftable%2Ftable.component.html 但这是在 angular 中实现的）
单击每一行（父行或子行）时，我只需要 console.log 该行的 "id" 字段，我尝试通过以下方式实现:
onRowClick={(evt, selectedRow) =>
console.log("ID of selected row:", selectedRow.id)
}
但我也希望子行具有相同的功能。
我是新手，所以问这个问题可能会感到困惑，我希望它能让你理解问题，请进一步澄清。
您可以在 material-table 中显示子数据，方法是设置关系数据的数据集，其中将提供 id 和 parentId。 here is an example
要获取点击行的选定 ID，您可以使用 onSelectionChange
我有一个 react-chartjs 与 material-table 集成，在这里找到它link: https://codesandbox.io/s/elastic-brook-okkce?file=/src/Dashboard.jsx
您可能会看到，单击任何栏时，都会填充 table。 table 中的值是从后端响应中获取的（我没有在这里编写相同的代码，但它在我的 PC 中正常工作）。 Material-table 接受 "data" 道具，该道具具有分配给该道具的对象 ("chartData")，该道具存储图表加载时来自后端的响应。
我需要两件事：
应该有一个动作（带有箭头 down/arrow 向上图标）来为每个父行字段呈现嵌套的子行，对于每个父行字段，我需要它 "id" 字段从后端获取子行对象数组。 （例如：https://stackblitz.com/edit/angular-material-expandable-table-rows?file=app%2Ftable%2Ftable.component.html 但这是在 angular 中实现的）
单击每一行（父行或子行）时，我只需要 console.log 该行的 "id" 字段，我尝试通过以下方式实现:
onRowClick={(evt, selectedRow) => console.log("ID of selected row:", selectedRow.id) } 但我也希望子行具有相同的功能。
我是新手，所以问这个问题可能会感到困惑，我希望它能让你理解问题，请进一步澄清。
您可以在 material-table 中显示子数据，方法是设置关系数据的数据集，其中将提供 id 和 parentId。 here is an example
要获取点击行的选定 ID，您可以使用 onSelectionChange