unable to create a expandable table row using angular material

i am having a data like below

 [
  {
    "_id": "c9d5ab1a",
    "subdomain": "wing",
    "domain": "aircraft",
    "part_id": "c9d5ab1a",
    "info.mimetype": "application/json",
    "info.dependent": "parent",
    "nested": [
      {
        "domain": "aircraft",
        "_id": "c1859902",
        "info.mimetype": "image/jpeg",
        "info.dependent": "c9d5ab1a",
        "part_id": "c1859902",
        "subdomain": "tail"
      }
    ]
  },
  {
    "_id": "1b0b0a26",
    "subdomain": "fuel",
    "domain": "aircraft",
    "part_id": "1b0b0a26",
    "info.mimetype": "image/jpeg",
    "info.dependent": "no_parent"
  }
]

here if info.dependent": "parent then it is nested and if info.dependent": "no_parent" then it is not having child i tried to created a dynamic table but i am stuck how to make it collapsible/expandable with both rows and columns below is my code and stackblitz

 <mat-table class=" mat-elevation-z8" [dataSource]="dataSource">


        <ng-container [matColumnDef]="col" *ngFor="let col of displayedColumns">
          <mat-header-cell *matHeaderCellDef>  </mat-header-cell>
          <mat-cell *matCellDef="let element">  </mat-cell>

        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns">

        </mat-header-row>
        <mat-row *matRowDef="let row;columns:displayedColumns">

        </mat-row>

  </mat-table>

.ts

public data = [
  {
    "_id": "c9d5ab1a",
    "subdomain": "wing",
    "domain": "aircraft",
    "part_id": "c9d5ab1a",
    "info.mimetype": "application/json",
    "info.dependent": "parent",
    "nested": [
      {
        "domain": "aircraft",
        "_id": "c1859902",
        "info.mimetype": "image/jpeg",
        "info.dependent": "c9d5ab1a",
        "part_id": "c1859902",
        "subdomain": "tail"
      }
    ]
  },
  {
    "_id": "1b0b0a26",
    "subdomain": "fuel",
    "domain": "aircraft",
    "part_id": "1b0b0a26",
    "info.mimetype": "image/jpeg",
    "info.dependent": "no_parent"
  }
];

   dataSource = new MatTableDataSource([]);
  displayedColumns = ['_id','subdomain','domain','part_id','info.mimetype','info.dependent'];
constructor(){
        this.displayedColumns = this.displayedColumns;
        this.dataSource = new MatTableDataSource(this.data);
}

stackblitz : -> https://stackblitz.com/edit/angular-cvjqop

from unable to create a expandable table row using angular material