Angular Material table with nested data source

Question

I am showing the data of my JSON file in the mat-table. The mat-table 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.

Data:

{
  "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"
        }
      ]
    }
  ]
}

HTML template:

<table mat-table [dataSource]="dataSource" matSort>
  <ng-container matColumnDef="fname">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Fname </th>
    <td mat-cell *matCellDef="let element"> {{element.fname}} </td>
  </ng-container>
  <ng-container matColumnDef="lname">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Lname </th>
    <td mat-cell *matCellDef="let row"> {{row.lname}} </td>
  </ng-container>
  <ng-container matColumnDef="parcelid">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Parcelid </th>
    <td mat-cell *matCellDef="let element"> {{element.parcels[0].parcelId}} </td>

  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row;columns: displayedColumns;"></tr>
</table>

Here i can access the parcelId, like above element.parcels[0].parcelId. However, I want to make it repeat so the fname, lname and all the parcels of a particular user can be seen in the table

Answer 1

The easiest way i found is to rearrange the array and make it accordingly to the table. This way i also able to achieve sorting and filter too in table .

Answer 2

If you know the number of parcels beforehand, and it is a fixed number, you could use ngFor in the HTML template and a for-loop when fetching data, before setting the data source, to fill in the correct number and names of displayed columns. If you don't have this information, you could always use ngFor in the template alone, listing all the data in a cell like this: https://stackblitz.com/edit/nested-table-data

  <ng-container matColumnDef="parcels">
<mat-header-cell *matHeaderCellDef> Parcels </mat-header-cell>
<mat-cell *matCellDef="let element">
    <div class="parcels">
      <ng-container  *ngFor="let parcel of element.parcels">
        <div class="parcel">
          <ul>
            <li>ID: {{parcel.parcelId}}</li>
            <li>Name: {{parcel.parcelName}}</li>
          </ul>
          <ul>
          <li *ngFor="let item of parcel.parcelItems">
            <span>{{item.itemId}}: {{item.itemName}}</span>
          </li>
        </ul>
        </div>
      </ng-container>
    </div>
</mat-cell>