title: Angular Material table with nested data source
body: <p>I am showing the data of my JSON file in the <code>mat-table</code>. The <code>mat-table</code> works fine in showing the rows but I have to show the data inside an array in a row. However, I don't know what would be the best predicate to use. I tried where predicate but it didn't work.</p>
  
  <p>Data:</p>
  
  <pre class="lang-json prettyprint-override"><code>{
    "fname": "Mark",
    "lname": "jhony",
    "parcels": [
      {
        "parcelId": 123,
        "parcelName: "asd",
        "parcelItems": [
          { 
            "itemId": 2,
            "itemName": "perfume"
          },
          { 
            "itemId": 4,
            "itemName": "soap"
          }
        ]
      },
      {
        "parcelId": 144,
        "parcelName": "parcel2",
        "parcelItems": [
          { 
            "itemId": 2,
            "itemName": "headphones"
          },
          { 
            "itemId": 4,
            "itemName": "mouse"
          }
        ]
      }
    ]
  }
  </code></pre>
  
  <p>HTML template:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;table mat-table [dataSource]="dataSource" matSort&gt;
    &lt;ng-container matColumnDef="fname"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Fname &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt; {{element.fname}} &lt;/td&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef="lname"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Lname &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let row"&gt; {{row.lname}} &lt;/td&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef="parcelid"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Parcelid &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt; {{element.parcels[0].parcelId}} &lt;/td&gt;
  
    &lt;/ng-container&gt;
    &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
    &lt;tr mat-row *matRowDef="let row;columns: displayedColumns;"&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here i can access the <code>parcelId</code>, like above <code>element.parcels[0].parcelId</code>. However, I want to make it repeat so the <code>fname</code>, <code>lname</code> and all the parcels of a particular user can be seen in the table</p>