Even now in version 7.2 of Angular Material, I can't seem to find examples on how to use rowspan on mat-table and keep the component functionality.
This is how far (short?) I've got:
https://stackblitz.com/edit/angular-wudscb
The example in the Stackblitz above is "almost" what I am looking for, but I am not being able to see how to finish it.
...
===============================================
|| || || || row1 ||
|| 1 || Hydrogen || 1.0079 ||========||
|| || || || row2 ||
===============================================
|| || || || row1 ||
|| || || ||========||
|| 2 || Helium || 4.0026 || row2 ||
|| || || ||========||
|| || || || row3 ||
===============================================
|| || || || row1 ||
|| 3 || Lithium || 6.941 ||========||
|| || || || row2 ||
===============================================
...
An example using other metadata format can be found in:
https://stackblitz.com/edit/angular-lnahlh
Following my Stackblitz (the first link), my questions are:
Am I too far of achieving this rowspan shim/hack?
How do I loop the rows based on the lenght of the row['descriptions'] size?
What If I had another array property inside the object? Could I iterate and generate the columns/rows/rowspan with its size, so it would become more generic?
I'm trying to find a generic solution for the community.
Best Answer
Well, it seems that material table has no api documentation for it, I could not find any trick to do this too, But we can twick the our data to support this, as per your second example we can reform the data to new json and we can get our expected result.
Step 1 :
Step 2
this will be as it is as your second stackblitz link.
Step 3
as it is as per your second link
Step 4
Using index to pass down to rowspan and hiding the rows where it doesn't needed
Here is the demo