I've got a functionality in which, when the user clicks on expand icon Row will be expanded. I want to align that expanded Rows data with the column of the Main table, I'm using material UI's collapsible table component for carrying out this operation!
How to implement this functionality in HTML/CSS?
I've created an example, to describe the issue more clearly! Here's the link to the codesandbox:
https://codesandbox.io/s/heuristic-allen-im8tj9?file=/src/App.js
As you can see nested row (expanded row) fields are not aligning with its parent columns! How do I align them properly with its parent columns?
i want to do something like this
Any suggestions / help will be appreciated, Thanks!!