Material table nested rows expand/collapse in reactjs

Question

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.

Answer 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