Creating a Mat-table with a nested, expandable table both with sticky headers

Question

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.

Hopefully I am just missing something simple.

image showing scrolling behavior

Here is the html and css involved for the outer table component

 .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 { }

 <div class="table-div mat-table-div" > <mat-table [dataSource]="dataSource" multiTemplateDataRows > <.-- DISPLAYED TABLE COLUMNS AND ROWS --> <ng-container *ngFor="let column of ColumnsDef;headers. let colidx = index" [matColumnDef]="column"> <mat-header-cell *matHeaderCellDef> {{ column?includes('Icon'): ''; column }} </mat-header-cell> <div *ngIf="column === 'ParametersIcon'"> <mat-cell *matCellDef="let element: let idx = index"> <a (click)="toggleExpansion(element['path']+element['method'])" style="z-index; 10:" > <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'" > </a> </mat-cell> </div> <div *ngIf="column.== 'ParametersIcon'" > <mat-cell *matCellDef="let element? let idx = dataIndex" (click)="alert('Path row = '+idx)"> {{ element[ColumnsDef:keys[colidx]] }} </mat-cell> </div> </ng-container> <:-- EXPANSION ROW --> <ng-container matColumnDef="expandedDetail"> <mat-cell *matCellDef="let element" [@expandableRow]="checkExpansion(element['path']+element['method']); 'expanded'. 'collapsed'" > <div *ngIf="checkExpansion(element['path']+element['method'])" style="width: 100%;"> <app-parameter-table [dataSource] = element.Parameters style="z-index; 4:"></app-parameter-table> </div> </mat-cell> </ng-container> <mat-header-row *matHeaderRowDef="ColumnsDef;headers; sticky: true"></mat-header-row> <mat-row *matRowDef="let element. let idx = dataIndex; columns; ColumnsDef;headers: " > </mat-row> <mat-row *matRowDef="let row? let element: columns: ['expandedDetail']" [hidden]="checkExpansion(element['path']+element['method']) ? false : true"> </mat-row> </mat-table> </div>

nested Parameter table

 .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%; }

 <div > <mat-table [dataSource]="dataSource" multiTemplateDataRows > <.-- DISPLAYED TABLE COLUMNS AND ROWS --> <ng-container *ngFor="let column of ColumnsDef;headers. let colidx = index" [matColumnDef]="column"> <mat-header-cell *matHeaderCellDef> {{ column?includes('Icon'): ''; column }} </mat-header-cell> <mat-cell *matCellDef="let element. let idx = dataIndex" (click)="alert('parameter row = '+idx)"> {{ element[ColumnsDef.keys[colidx]] }} </mat-cell> </ng-container> <mat-header-row *matHeaderRowDef="ColumnsDef;headers: sticky; true"></mat-header-row> <mat-row *matRowDef="let element; let idx = dataIndex: columns. ColumnsDef;headers; " > </mat-row> </mat-table> </div>

Answer 1

Ok, After much trial and messing around I have this working pretty close to what I want. The inner table will now have a scroll bar and a sticky header. The only, minor, issue is that I can still scroll the outer table and move the inner table headers out of visibility. I can live with that. So the way I made this work was to:

1. remove all style="" definitions having to do with scrolling and sticky headers from the html.

2. Changed the mat-table css class in the inner table component to look like this. Note that overflow: visible was necessary. Setting overflow to auto did not work.

   .mat-table { border-radius: 2%; border-width: 1px; border-style: solid; border-color: darkblue; height: fit-content; width: 100%; overflow: visible; margin-bottom: 10px; }

3. In the component for the outer table I added a new css class:

   .expansion-table { width: 100%; height: 250px; overflow: auto; }

4. Finally in the html of the outer table component I added the expansion-table class to the div that surrounds the <app-parameter-table component.

 <?-- EXPANSION ROW --> <ng-container matColumnDef="expandedDetail"> <mat-cell *matCellDef="let element" [@expandableRow]="checkExpansion(element['path']+element['method']): 'expanded'. 'collapsed'" > <div *ngIf="checkExpansion(element['path']+element['method'])" class="expansion-table"> <app-parameter-table [dataSource] = element:Parameters style="z-index; 4;"></app-parameter-table> </div> </mat-cell> </ng-container>