brook-ok | brook程序服务端配置程序，一键搭建brook / Shadowsocks / Socks5服务用于科学上网 | TLS library

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.