title: Correctly display in a mat-table a data list grouped with dynamic columns
body: <p>I have a problem that unfortunately I cannot resolve.</p>
  <p>My API returns me a list of data like this:</p>
  <pre><code>[
    {grade: &quot;Grade A&quot;, id: 1, ifsGrade: &quot;A1XX&quot;, ifsType: &quot;01XX&quot;, points: 22, type: &quot;Type_1&quot;},
    {grade: &quot;Grade B&quot;, id: 2, ifsGrade: &quot;B1XX&quot;, ifsType: &quot;02XX&quot;, points: 15, type: &quot;Type_1&quot;},
    {grade: &quot;Grade C&quot;, id: 3, ifsGrade: &quot;C1XX&quot;, ifsType: &quot;03XX&quot;, points: 1,  type: &quot;Type_1&quot;},
    {grade: &quot;Grade A&quot;, id: 4, ifsGrade: &quot;A2XX&quot;, ifsType: &quot;04XX&quot;, points: 23, type: &quot;Type_2&quot;},
    {grade: &quot;Grade B&quot;, id: 5, ifsGrade: &quot;B2XX&quot;, ifsType: &quot;05XX&quot;, points: 26, type: &quot;Type_2&quot;}
  ]
  </code></pre>
  <p>And I group my data by type like this:</p>
  <pre><code>Array.prototype.groupBy = function(k) {
     return this.reduce((acc, item) =&gt; (acc[item[k]] = [...(acc[item[k]] || []), item], acc), {});
  };
  
  var TABLE_DATA = Object.values(API_DATA.groupBy(&quot;type&quot;));
  
  [
    [
      {grade: &quot;Grade A&quot;, id: 1, ifsGrade: &quot;A1XX&quot;, ifsType: &quot;01XX&quot;, points: 22, type: &quot;Type_1&quot;},
      {grade: &quot;Grade B&quot;, id: 2, ifsGrade: &quot;B1XX&quot;, ifsType: &quot;02XX&quot;, points: 15, type: &quot;Type_1&quot;},
      {grade: &quot;Grade C&quot;, id: 3, ifsGrade: &quot;C1XX&quot;, ifsType: &quot;03XX&quot;, points: 1,  type: &quot;Type_1&quot;}
    ],
    [
      {grade: &quot;Grade A&quot;, id: 4, ifsGrade: &quot;A2XX&quot;, ifsType: &quot;04XX&quot;, points: 23, type: &quot;Type_2&quot;},
      {grade: &quot;Grade B&quot;, id: 5, ifsGrade: &quot;B2XX&quot;, ifsType: &quot;05XX&quot;, points: 26, type: &quot;Type_2&quot;}
    ]
  ]
  </code></pre>
  <p>I would like to be able to display the data in a Angular Material mat-table like this:
  <a href="https://i.stack.imgur.com/yvDwk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yvDwk.png" alt="enter image description here" /></a></p>
  <p>So I do have a list for my dataSource but the elements of this list are lists too. So I don't know how to display the items correctly.</p>
  <p>So for the table columns you would need something dynamic like this, but I don't know how:</p>
  <pre><code>&lt;ng-container matColumnDef=&quot;{{column}}&quot; *ngFor=&quot;let column of definedColumns&quot;&gt;
    &lt;th mat-header-cell *matHeaderCellDef&gt; {{column}} &lt;/th&gt;
    &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element[column]}} &lt;/td&gt;
  &lt;/ng-container&gt;
  </code></pre>
  <p><strong>Stackblitz link</strong> <a href="https://stackblitz.com/edit/datasource-mat-table-with-group-by-2" rel="nofollow noreferrer">here</a></p>
  <p>Thanks for your help</p>