Как отфильтровать данные и отобразить их в детальной таблице Mat

Question

У меня есть подробная таблица соответствия, где я хочу отображать данные.На данный момент я могу отображать данные как в основной таблице, так и в подробной таблице.Но я хочу, чтобы строка основной таблицы содержала только 1 строку для конкретной даты, а внутри этой строки она должна содержать другие строки с той же датой.Предположим, у меня есть данные за 9 дней, по 3 записи за каждый день, например, 01 февраля, 02 февраля и 03 февраля, поэтому я хотел бы отобразить только 3 строки в основной таблице, и когда пользователь нажимает на строку 01 февраля, ондолжны увидеть 3 строки внутри подробной таблицы.Точно так же, если он нажмет 02 / Feb, он должен увидеть данные, соответствующие только 02 / Feb.

. Сейчас моя таблица показывает все 9 записей (строк) в основной таблице, и если я нажимаю на строкуиз основной таблицы снова отображается 9 записей.Как я могу отфильтровать данные для отображения в соответствии с моими потребностями?

Код для HTML: -

<table
        mat-table
        [dataSource]="jobExecutionList"
        multiTemplateDataRows
        class="mat-elevation-z8">
        <ng-container
            matColumnDef="{{ column }}"
            *ngFor="let column of columnsToDisplay">
            <th mat-header-cell *matHeaderCellDef>{{ column }}</th>
            <td mat-cell *matCellDef="let element">
                {{ element[column] }}
            </td>
        </ng-container>
        <!-- Expanded Content Column - The detail row is made up of this one 
        column that spans across all columns -->
        <ng-container matColumnDef="expandedDetail">
            <td mat-cell *matCellDef="let element" [attr.colspan]="1">
                <div
                    class="example-element-detail"
                    [@detailExpand]="
                        element == expandedElement
                            ? 'expanded'
                            : 'collapsed'">
                  <table mat-table [dataSource]="jobExecutionList">
                        <!-- Position Column -->
                        <ng-container matColumnDef="id">
                            <th mat-header-cell *matHeaderCellDef>ID</th>
                            <td mat-cell *matCellDef="let element2">
                                {{ element2.id }}
                            </td>
                        </ng-container>
                        <!-- Name Column -->
                        <ng-container matColumnDef="executionDate">
                            <th mat-header-cell *matHeaderCellDef>
                                Execution Date
                            </th>
                            <td mat-cell *matCellDef="let element2">
                                {{
                                    element2.executionDate}}
                                        <!-- | date: 'yyyy-MM-dd' -->

                            </td>
                        </ng-container>
                        <!-- Name Column -->
                        <ng-container matColumnDef="lable">
                            <th mat-header-cell *matHeaderCellDef>
                                Label
                            </th>
                            <td mat-cell *matCellDef="let element2">
                                {{ element2.lable }}
                            </td>
                        </ng-container>

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

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

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

                        <tr
                            mat-header-row
                            *matHeaderRowDef="
                                columnsToDisplay2;
                                sticky: true
                            "
                        ></tr>
                        <tr
                            mat-row
                            *matRowDef="
                                let row2;
                                columns: columnsToDisplay2
                            "
                        ></tr>
                    </table>
                </div>
            </td>
        </ng-container>

        <tr
            mat-header-row
            *matHeaderRowDef="columnsToDisplay; sticky: true"
        ></tr>
        <tr
            mat-row
            *matRowDef="let element; columns: columnsToDisplay"
            class="example-element-row"
            [class.example-expanded-row]="expandedElement === element"
            (click)="
                expandedElement =
                    expandedElement === element ? null : element
            "
        ></tr>
        <!-- Group header -->

        <tr
            mat-row
            *matRowDef="let row; columns: ['expandedDetail']"
            class="example-detail-row"
        ></tr>
    </table>
</div>

Код для машинописного текста: -

ngOnInit() {
    this.rendertable();
}
rendertable() {
    const project = JSON.parse(this.dataService.getObject('project'));
    this.recommendationService
        .getJobList(project.id)
        .subscribe(data => {
            this.jobExecutionList = new MatTableDataSource();
            this.jobExecutionList.data = data;
            this.jobExecutionList.sort = this.sort;
            this.jobExecutionList.paginator = this.paginator;
        });
}
export interface Element {
id: number;
lable: string,
executionDate: string;
previousTimePeriod: string;
afterTimePeriod: string;
status: string;
jobId: string;
executionId: string;
}

Альтернативным решением может быть группировка данных по дате, если кто-то покажет мне, как это сделать.Я довольно новичок в угловых и программирования