title: Angular Material Table rowspan columns based on dataSource object array property size
body: <p>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.</p>
  
  <p>This is how far (short?) I've got:</p>
  
  <p><a href="https://stackblitz.com/edit/angular-wudscb" rel="noreferrer">https://stackblitz.com/edit/angular-wudscb</a></p>
  
  <p>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.</p>
  
  <pre><code>...
  ===============================================
  ||     ||            ||            ||  row1  ||
  ||  1  ||  Hydrogen  ||   1.0079   ||========||
  ||     ||            ||            ||  row2  ||
  ===============================================
  ||     ||            ||            ||  row1  ||
  ||     ||            ||            ||========||
  ||  2  ||   Helium   ||   4.0026   ||  row2  ||
  ||     ||            ||            ||========||
  ||     ||            ||            ||  row3  ||
  ===============================================
  ||     ||            ||            ||  row1  ||
  ||  3  ||  Lithium   ||   6.941    ||========||
  ||     ||            ||            ||  row2  ||
  ===============================================
  ...
  </code></pre>
  
  <p>An example using other metadata format can be found in:</p>
  
  <p><a href="https://stackblitz.com/edit/angular-lnahlh" rel="noreferrer">https://stackblitz.com/edit/angular-lnahlh</a></p>
  
  <p>Following my Stackblitz (the first link), my questions are:</p>
  
  <p>Am I too far of achieving this rowspan shim/hack?</p>
  
  <p>How do I loop the rows based on the lenght of the row['descriptions'] size?</p>
  
  <p>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?</p>
  
  <p>I'm trying to find a generic solution for the community.</p>