Can I display another table inside mat-expanded row?

Question

I have a mat-table with an expanded row. If I click on a row it expands and displays a hardcoded string. I would like to display another table inside the expanded row. Is it possible? Alternatively, is there any other technique or method to achieve what I am trying to do. I am trying to display List of executed Jobs for a given time period. On main row, I want to show only time period something like 01-01-2017 TO 01-05-2017 and when a user clicks on that row it will expand and display a list of jobs with other details like date, time, user, status etc.. will be displayed

Code for HTML :-

      <mat-table [dataSource]="jobExecutionStat">
        <!-- Id Column -->
        <ng-container matColumnDef="position">
            <mat-header-cell *matHeaderCellDef>
                Serial Number
            </mat-header-cell>
            <mat-cell *matCellDef="let element; let i = index"
                >{{ i + 1 }}
            </mat-cell>
        </ng-container>
        <!-- Execution Date Column -->
        <ng-container matColumnDef="executionDate">
            <mat-header-cell *matHeaderCellDef>
                Execution Date
            </mat-header-cell>
            <mat-cell *matCellDef="let element"
                >{{ element.executionDate | date: 'yyyy-MM-dd' }}
            </mat-cell>
        </ng-container>

        <!-- After Time Period Column -->
        <ng-container matColumnDef="afterTimePeriod">
            <mat-header-cell *matHeaderCellDef>
                Current Time Period
            </mat-header-cell>
            <mat-cell *matCellDef="let element"
                >{{ element.afterTimePeriod }}
            </mat-cell>
        </ng-container>

        <!-- Previous Time Period Column -->
        <ng-container matColumnDef="previousTimePeriod">
            <mat-header-cell *matHeaderCellDef>
                Previous Time Period
            </mat-header-cell>
            <mat-cell *matCellDef="let element"
                >{{ element.previousTimePeriod }}
            </mat-cell>
        </ng-container>
        <!-- Status Column -->
        <ng-container matColumnDef="status">
            <mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
            <mat-cell *matCellDef="let element"
                >{{ element.status }}
            </mat-cell>
        </ng-container>

        <!--  Code for Stop and Re-Run Buttons -->
        <ng-container matColumnDef="actions">
            <mat-header-cell *matHeaderCellDef> </mat-header-cell>
            <mat-cell *matCellDef="let element; let index = index">
                <button
                    *ngIf="index === 0"
                    mat-icon-button
                    (click)="stop_exec_job(element)"
                    matTooltip="Stop Executing the Job"
                    [disabled]="
                        element.status == 'SUCCESS' ||
                        element.status == 'FINISH' ||
                        element.status == 'CANCELLED'
                    "
                >
                    <!-- Edit icon for row -->
                    <i class="material-icons" style="color:red"> stop </i>
                </button>
                <!-- Delete icon for row -->
                <button
                    *ngIf="index === 0"
                    mat-icon-button
                    (click)="re_run_job(element)"
                    matTooltip="Re-Run the Job"
                    [disabled]="
                        element.status == 'RUNNING' ||
                        element.status == 'Pending'
                    "
                >
                    <i class="material-icons" style="color:green">
                        cached
                    </i>
                </button>
            </mat-cell>
        </ng-container>
        <!-- Code for Spinner -->
        <ng-container matColumnDef="spinner">
            <mat-header-cell *matHeaderCellDef> </mat-header-cell>
            <mat-cell *matCellDef="let element">
                <div
                    *ngIf="
                        element.status == 'Running';
                        else doNotShowSpinner
                    "
                >
                    <mat-spinner
                        mode="indeterminate"
                        [diameter]="20"
                    ></mat-spinner>
                </div>
                <ng-template #doNotShowSpinner> </ng-template>
            </mat-cell>
        </ng-container>
        <!-- Expanded Content Column - The detail row is made up of this one column -->
        <ng-container matColumnDef="expandedDetail">
            <mat-cell *matCellDef="let detail">
                Sample Text
            </mat-cell>
        </ng-container>

        <mat-header-row
            *matHeaderRowDef="jobExecStatDisplayedColumns"
        ></mat-header-row>
        <mat-row
            *matRowDef="let row; columns: jobExecStatDisplayedColumns"
            matRipple
            class="element-row"
            [class.expanded]="expandedElement == row"
            (click)="
                expandedElement === row
                    ? (expandedElement = null)
                    : (expandedElement = row)
            "
        >
        </mat-row>
        <mat-row
            *matRowDef="
                let row;
                columns: ['expandedDetail'];
                when: isExpansionDetailRow
            "
            [@detailExpand]="
                row.element == expandedElement ? 'expanded' : 'collapsed'
            "
            style="overflow: hidden"
        >
        </mat-row>
    </mat-table>

Answer 1

Yes you can, check out this stackblitz.

Just add another mat-table like you normally would, including a datasource, column definitions etc.

On important thing to note is that you need to make sure your table in the expanded row spans all columns (unless you don't want it to). Set the attr.colspan attribute of the detail row to the number of columns you want to span, usually you can just take the length of your displayedColumns array to span all columns.