I'm building a table that is gonna display tabular data in multiple groups. The Table will have a main table header that shows what each table cell is. It will also consist of expandable groups which will hold all the tabular data.

Using Material UI, I've looked at the example at https://v4.mui.com/components/tables/#collapsible-table

What they do, is wrap a Collapse component inside a TableCell component. The problem is that at this point, the code inside Collapse has "lost connection" with the parent table structure, as it actually lives within a single table cell. I've tried multiple things, also tried creating a new table within the Collapsecomponent. This does for obvious reasons not work, as everything is created within said table cell.

How can I go about splitting a table into multiple groups, where each group is expandable/collapsible and consist of tabular data, structured after the main table?

I've created a quick mock at https://codesandbox.io/s/material-demo-forked-s3cqv?file=/demo.tsx You can imagine there would be multiple groups following the group in the mock. As you can see, the data doesn't line up with the main table header.

Is this actually accomplishable with Material UI components?

Thank you for reading.
Best regards
Stephan Bakkelund Valois