无法正确对数据分组，

Question

我有一个Mat表，根据执行日期将其数据分组。 我遵循了stackblitz上的示例。

我的代码中的问题是，首先显示数据，然后显示标签。 图像附在下面：

我希望标签执行日期位于顶部，然后显示相应的行。

HTML代码：-

<table mat-table [dataSource]="jobExecutionList" multiTemplateDataRows>
        <!-- Label Column -->
        <ng-container matColumnDef="label">
            <th mat-header-cell *matHeaderCellDef>Label</th>
            <td mat-cell *matCellDef="let element">
                {{ element.label }}
            </td>
        </ng-container>

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

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

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

        <tr
            mat-header-row
            *matHeaderRowDef="displayedColumns; sticky: true"
        ></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>

        <!-- Group header -->
        <ng-container matColumnDef="groupHeader">
            <td colspan="999" mat-cell *matCellDef="let groupBy">
                <strong
                    >Execution Date
                    {{ groupBy.executionDate | date: 'yyyy-MM-dd' }}
                </strong>
            </td>
        </ng-container>

        <tr
            mat-row
            *matRowDef="let row; columns: ['groupHeader']; when: isGroup"
        ></tr>
    </table>

打字稿代码：-

displayedColumns = [
    'label',
    'previousTimePeriod',
    'afterTimePeriod',
    'status'
];

//isGroup(index, item): boolean{
// return item.isGroupBy;
// }
export interface Element {
id: number;
label: string;
executionDate: string;
previousTimePeriod: string;
afterTimePeriod: string;
status: string;
jobId: string;
executionId: string;
}
export interface GroupBy {
initial: string;
isGroupBy: boolean;
}

我特意评论了isGroup函数，因为如果使用它，那么我将无法查看执行日期标签，并且它看起来像一张普通表。