Is there a way to expand the table row in an angular-material table when it is clicked, showing multiple sets of rows in the same column as the table? The new rows should share the same column header but not necessarily come from the same data source.
When clicking on a row, I would like to see additional rows expanding below in the same column. Here is an example:
Upon clicking a row, the expanded view should look like this:
If clicked again, the expanded rows should collapse back to the default table view:
If two rows are clicked, the layout should appear like this:
I am working with Angular 8 and TypeScript