title: How to insert a row inside another row in an Angular table?
body: <p>I would like to add a row inside another in an Angular table, so that each sector of each area appears individually in each row.</p>
  <p>With the code I'm using I get close to the expected result, but the line isn't complete.</p>
  <pre><code>&lt;table mat-table [dataSource]=&quot;server&quot; class=&quot;mat-elevation-z8&quot;&gt;
  
    &lt;!-- Column Areas --&gt;
      &lt;ng-container matColumnDef=&quot;areas&quot;&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt;Areas&lt;/th&gt;
        &lt;td mat-cell *matCellDef=&quot;let area&quot;&gt;
          &lt;ng-container *ngFor=&quot;let sector of area.sectors&quot;&gt;
            {{ area.name }}
        &lt;td mat-cell&gt;&lt;/td&gt;
          &lt;/ng-container&gt;
        &lt;/td&gt;
      &lt;/ng-container&gt;
  
    &lt;!-- Column Sectors --&gt;
    &lt;ng-container matColumnDef=&quot;sectors&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt;Sectors&lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let area&quot;&gt;
        &lt;ng-container *ngFor=&quot;let sector of area.sectors&quot;&gt;
          * {{ sectors.sectors }} &lt;br /&gt;&lt;br /&gt;
        &lt;/ng-container&gt;
      &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- Column Activities --&gt;
    &lt;ng-container matColumnDef=&quot;activities&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt;Activities&lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let area&quot;&gt;
        &lt;ng-container *ngFor=&quot;let sector of area.sectors&quot;&gt;
          &lt;ng-container *ngFor=&quot;let activity of sector.activities&quot;&gt;
            * {{ activity.activity }} &lt;br /&gt;&lt;br /&gt;
          &lt;/ng-container&gt;
        &lt;/ng-container&gt;
      &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- Column Deadlines --&gt;
    &lt;ng-container matColumnDef=&quot;deadlines&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt;Deadlines&lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let area&quot;&gt;
        &lt;ng-container *ngFor=&quot;let sector of area.sectors&quot;&gt;
          &lt;ng-container *ngFor=&quot;let activity of sector.activities&quot;&gt;
            {{ activity.deadline}} days&lt;br /&gt;&lt;br /&gt;
          &lt;/ng-container&gt;
        &lt;/ng-container&gt;
      &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;tr mat-header-row *matHeaderRowDef=&quot;columns&quot;&gt;&lt;/tr&gt;
    &lt;tr mat-row *matRowDef=&quot;let row; columns: columns;&quot;&gt;&lt;/tr&gt;
  
  &lt;/table&gt;
  </code></pre>
  <p>The result I'm getting is this:</p>
  <p><a href="https://i.stack.imgur.com/luUcX.png" rel="nofollow noreferrer">Current result</a></p>