Material table nested rows expand/collapse in reactjs

天涯浪子 提交于 2020-06-17 09:34:10

问题


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

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.

I needed two things:

  1. 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 )

  2. 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 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.


回答1:


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

For getting selected id for clicked row, you can use onSelectionChange

Here is the complete code. Please check this code sandbox



来源:https://stackoverflow.com/questions/62212960/material-table-nested-rows-expand-collapse-in-reactjs

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!