材质表嵌套行在reactjs中展开/折叠 [英] Material table nested rows expand/collapse in reactjs
问题描述
我有一个集成了材料表的 react-chartjs ，请在以下链接中找到它: https://codesandbox.io/s/elastic-brook -okkce?file =/src/Dashboard.jsx
I am having a react-chartjs with material-table integrated, find it in this link: https://codesandbox.io/s/elastic-brook-okkce?file=/src/Dashboard.jsx
您可能会看到，单击任何栏都会填充一个表格. 该表中的值是从后端响应中获取的(这里我没有写同样的代码，但是它在我的PC上正常工作).该材料表接受数据"属性，该属性具有分配给该属性的对象("chartData")，该对象存储了加载图表时来自后端的响应.
As you may see that on the click of any bar, a table is populated. The values in that table are fetched from the backend response (I've not written the code for the same here, but it is working in my PC properly). That Material-table takes in the "data" prop having an object("chartData") assigned to that prop that stored the response from the backend when the chart was loaded.
我需要两件事:
-
应该有一个动作(带有向下箭头/向上箭头的图标)来为每个父行字段呈现嵌套的子行，对于每个父行字段，我都需要它的"id"字段来获取子行对象后端的数组. (例如: https://stackblitz.com/edit/angular-material-expandable-table-rows?file=app%2Ftable%2Ftable.component.html ，但这是在angular中实现的)
There should be an action (with arrow down/arrow up icon) to render nested child rows for every parent row field, and for every parent row field, I need it's "id" field to fetch child rows object array from the backend. (For example:https://stackblitz.com/edit/angular-material-expandable-table-rows?file=app%2Ftable%2Ftable.component.html but this is implemented in angular )
在单击每一行(父行或子行)时，我只需要console.log该行的"id"字段，我尝试通过以下方式实现此目的:
On click of every row (either parent row or child row), I just need to console.log the "id" field of that row, I tried to implement this by:
onRowClick = {(evt，selectedRow)=> console.log(所选行的ID:"，selectedRow.id) } 但是我也希望子行具有相同的功能.
onRowClick={(evt, selectedRow) => console.log("ID of selected row:", selectedRow.id) } But I want the same functionality for child rows as well.
我是新来的反应者，所以可能会很困惑地问这个问题，希望它使您理解了这个问题，请要求进一步澄清.
I am new to react so might have confused asking the question, I hope it made you understood the problem, please ask for further clarification.
推荐答案
您可以通过设置将提供id和parentId的关系数据的数据集来显示material-table中的子数据. 这是一个示例
You can show child data in material-table by setting dataset of relational data where id and parentId will be provided. here is an example
要获取点击行的选定ID，可以使用onSelectionChange
For getting selected id for clicked row, you can use onSelectionChange
这篇关于材质表嵌套行在reactjs中展开/折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
