We have table setup like below. Before you click the plus table looks like
Once you click on the plus next to any row, it opens up like this
So as you can imagine if the user opens up too many tables page looks cluttered. Also as you see it's not entirely possible to not have entire new table and line up fields because not all columns are identical.
What would be best way of displaying this kind of tabular data without getting user experience hard?
I tend to do master/detail pairings. In this case a card with the highlights and a detail table that is populated based on selection.
In order to aide in readability/reduce friction between competing column headers, I tend to use horizontal columns in nested tables, like this: https://datatables.net/examples/api/row_details.html
If your nested data is more than a few rows, though, I recommend creating a navigable "drill-down" system, wherein clicking a row opens an entirely new table view, like this: https://support.klipfolio.com/hc/en-us/community/posts/115004673274-Drill-Down-Tables-from-Basic-to-Advanced
Expand only one row with details if you think is too cluttered, collapse the other opened rows (the developer will know how to do this, but check here), but in my opinion, the expected behavior is to see the details for all the row you expand and you don't close.
