title: Creating a Mat-table with a nested, expandable table both with sticky headers
body: <p>I am building a Mat-table in Angular 9 that has rows with an expandable child table off each row.  The outer table has a sticky header that works.  I want to have the child header also be sticky so it does not scroll out of view.  Ideally it would scroll within the child table, but it would be acceptable to have the entire table scroll while keeping the child table header visible. Here is an image of what is happening.  Note that there is no scroll bar in the child table and the child header is starting to overlap the outer table header.</p>
  <p>Hopefully I am just missing something simple.</p>
  <p><a href="https://i.stack.imgur.com/WoZ6p.png" rel="nofollow noreferrer">image showing scrolling behavior</a></p>
  <p>Here is the html and css involved for the outer table component</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.mat-table {
    border-radius: 2%;
    border-width: 2px;
    border-style: solid;
    border-color: darkblue;
    height: 350px;
    width: 100%;
    overflow: auto;
  }
  
  .mat-header-row {
    background-color: rgb(172, 240, 140);
    margin: .5px;
    border-top-left-radius: 4%;
    border-top-right-radius: 4%;
    border-style: solid;
    border-width: 1px;
    border-color: khaki;
  }
  
  .mat-header-cell {
    flex: 0 0 auto;
    color: black;
    font-size: large;
  }
  
  .mat-row {
    background-color: aliceblue;
    /* color: black; */
    font-size: large;
  }
  
  .mat-cell {
    color: black;
    font-size: large;
  }
  
  .mat-column-ParametersIcon {
    flex: 0 0 8%;
    width: 8%;
  }
  
  .mat-column-Path {
    flex: 0 0 40%;
    width: 40%;
  }
  
  .mat-column-Method {
    flex: 0 0 10%;
    width: 10%;
  }
  
  .mat-column-OperationId {
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="table-div mat-table-div" &gt;
    &lt;mat-table [dataSource]="dataSource" multiTemplateDataRows &gt;
    &lt;!-- DISPLAYED TABLE COLUMNS AND ROWS --&gt;
    &lt;ng-container *ngFor="let column of ColumnsDef.headers; let colidx = index"
                  [matColumnDef]="column"&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt;
        {{ column.includes('Icon') ? '': column }}
      &lt;/mat-header-cell&gt;
      &lt;div *ngIf="column === 'ParametersIcon'"&gt;
        &lt;mat-cell *matCellDef="let element; let idx = index"&gt;
          &lt;a (click)="toggleExpansion(element['path']+element['method'])"
          style="z-index: 10;"
          &gt;
            &lt;img style="align-content: center;" alt="Subjects"
              [src]="checkExpansion(element['path']+element['method']) ?
                              '../../assets/expand_less_black_24dp.svg':
                              '../../assets/expand_more_black_24dp.svg'"
            &gt;
          &lt;/a&gt;
        &lt;/mat-cell&gt;
      &lt;/div&gt;
      &lt;div *ngIf="column !== 'ParametersIcon'" &gt;
        &lt;mat-cell *matCellDef="let element; let idx = dataIndex"
            (click)="alert('Path row = '+idx)"&gt;
          {{ element[ColumnsDef.keys[colidx]] }}
        &lt;/mat-cell&gt;
      &lt;/div&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- EXPANSION ROW --&gt;
    &lt;ng-container matColumnDef="expandedDetail"&gt;
      &lt;mat-cell *matCellDef="let element"
          [@expandableRow]="checkExpansion(element['path']+element['method']) ?
                              'expanded' : 'collapsed'"
      &gt;
        &lt;div *ngIf="checkExpansion(element['path']+element['method'])" style="width: 100%;"&gt;
          &lt;app-parameter-table [dataSource] = element.Parameters style="z-index: 4;"&gt;&lt;/app-parameter-table&gt;
        &lt;/div&gt;
      &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;mat-header-row *matHeaderRowDef="ColumnsDef.headers; sticky: true"&gt;&lt;/mat-header-row&gt;
    &lt;mat-row *matRowDef="let element; let idx = dataIndex; columns: ColumnsDef.headers; "
      &gt;
    &lt;/mat-row&gt;
    &lt;mat-row *matRowDef="let row; let element; columns: ['expandedDetail']"
      [hidden]="checkExpansion(element['path']+element['method']) ? false : true"&gt;
    &lt;/mat-row&gt;
    &lt;/mat-table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>nested Parameter table</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.mat-table {
    border-radius: 2%;
    border-width: 1px;
    border-style: solid;
    border-color: darkblue;
    min-height: 100px;
    max-height: 200px;
    /* height: 350px; */
    width: 100%;
    overflow: auto;
    margin-bottom: 10px;
  }
  
  .mat-header-row {
    background-color: rgb(246, 166, 46);
    margin: .5px;
    border-top-left-radius: 4%;
    border-top-right-radius: 4%;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(246, 166, 46);
  }
  
  .mat-header-cell {
    flex: 0 0 auto;
    color: black;
    font-size: large;
  }
  
  .mat-row {
    background-color: aliceblue;
    font-size: large;
  }
  
  .mat-cell {
    color: black;
    font-size: large;
  }
  
  .mat-column-Name {
    flex: 0 0 30%;
  }
  
  .mat-column-Location {
    flex: 0 0 10%;
  }
  
  .mat-column-Type {
    flex: 0 0 20%;
  }
  
  .mat-column-Schema {
    flex: 0 0 40%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div &gt;
    &lt;mat-table [dataSource]="dataSource" multiTemplateDataRows &gt;
      &lt;!-- DISPLAYED TABLE COLUMNS AND ROWS --&gt;
      &lt;ng-container *ngFor="let column of ColumnsDef.headers; let colidx = index"
                    [matColumnDef]="column"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt;
          {{ column.includes('Icon') ? '': column }}
        &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element; let idx = dataIndex"
            (click)="alert('parameter row = '+idx)"&gt;
          {{ element[ColumnsDef.keys[colidx]] }}
        &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;mat-header-row *matHeaderRowDef="ColumnsDef.headers; sticky: true"&gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef="let element; let idx = dataIndex; columns: ColumnsDef.headers; "
        &gt;
      &lt;/mat-row&gt;
    &lt;/mat-table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>