title: How to create a nested mat-table in a table with expandable rows using angular material
body: <p>I have the below data </p>
  
  <pre class="lang-js prettyprint-override"><code>[
      {
          "_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"
      }
  ]
  </code></pre>
  
  <p>Here if <code>"info.dependent": "parent"</code> then it is nested and if <code>"info.dependent": "no_parent"</code> then it does not have a child. I tried to create a dynamic table but I am stuck on how to make it collapsible/expandable with a nested table. 
  Here is my code on <a href="https://stackblitz.com/edit/angular-cvjqop" rel="noreferrer">stackblitz</a>.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-table class=" mat-elevation-z8" [dataSource]="dataSource"&gt;
  
      &lt;ng-container [matColumnDef]="col" *ngFor="let col of displayedColumns"&gt;
          &lt;mat-header-cell *matHeaderCellDef&gt; {{ col }} &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let element"&gt; {{ element[col] }} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef="let row;columns:displayedColumns"&gt;&lt;/mat-row&gt;
  
  &lt;/mat-table&gt;
  </code></pre>
  
  <p><strong>.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>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);
  }
  </code></pre>
  
  <p><strong>Required format</strong> :--> 
  <strong><a href="https://i.stack.imgur.com/VIkTt.png" rel="noreferrer"><img src="https://i.stack.imgur.com/VIkTt.png" alt="nested table"></a></strong></p>
  
  <p>The nested format is like below</p>
  
  <blockquote>
    <p>row 1 -->    _id ,subdomain,domain,info.dependent</p>
  </blockquote>
  
  <p>When we click on that particular row, then it has to expand and display the nested data in a table with the column names and row data.</p>
  
  <pre class="lang-js prettyprint-override"><code>"nested": [
      {
          "domain": "aircraft",
          "_id": "c1859902",
          "info.mimetype": "image/jpeg",
          "info.dependent": "c9d5ab1a",
          "part_id": "c1859902",
          "subdomain": "tail"
      }
  ]
  </code></pre>