Data table inside of an expandable data table in Angular Material

Question

I have made an expandable data table and I want to show another data table inside of the expanded row. This is my expanded row template:

<ng-template #tpl let-element>
<div class="mat-row detail-row">
    <mat-table #table1 [dataSource]="element.details" matSort>

        <ng-container matColumnDef="taste">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Taste </mat-header-cell>
            <mat-cell *matCellDef="let detail"> {{detail.taste}} </mat-cell>
        </ng-container>
        <ng-container matColumnDef="water">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Water </mat-header-cell>
            <mat-cell *matCellDef="let detail"> {{detail.water}} </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="detailsColumns; sticky: true"></mat-header-row>
        <mat-row *matRowDef="let row; columns: detailsColumns;" matRipple class="element-row">
        </mat-row>
    </mat-table>
</div>

When clicked on an row of Outer Table the Inner table works fine but it doesn't show any data inside.

How to make it work?

Answer 1

Ok, this solution works fine, the problem was in my CSS.