How do I Group By my rows in angular mat-table

Question

I have a detailed mat-table with expanded rows. I want to group my rows based on Execution Date. I am referencing this Stackblitz where they have grouped the data according to Alphabetical order.

Main thing that I cannot understand is Where should I place my group header code that is there in stackblitz that I am referencing.

In my case I have detailed mat-table and I am unable to understand where to place the code and how to group my columns based on Execution Date. Can someone help me figure out how to group by in Detailed Mat-table.

Code for HTML:-

<div class="main-content">
<div class="card">
    <div class="card-header">
        <h5 class="title">Job Execution Stats</h5>
    </div>

    <div class="table-filter">
        <mat-form-field>
            <span matSuffix> <i class="material-icons">search</i> </span>

            <input
                type="search"
                matInput
                (keyup)="applyFilter($event.target.value)"
                placeholder="Filter"
            />
        </mat-form-field>
    </div>
    <div class="table-filter">
        <mat-form-field>
            <mat-select placeholder="Select Current Time Period">
                <mat-option *ngFor="let food of foods" [value]="food.value">
                    {{ food.viewValue }}
                </mat-option>
            </mat-select>
        </mat-form-field>
        &nbsp; &nbsp;
        <mat-form-field>
            <mat-select placeholder="Select Previos Time Period">
                <mat-option *ngFor="let food of foods" [value]="food.value">
                    {{ food.viewValue }}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </div>
    <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>
        <tr
            mat-row
            *matRowDef="let row; columns: ['expandedDetail']"
            class="example-detail-row"
        ></tr>
    </table>
</div>

Code for TypeScript:-

export class JobExecutionScreenComponent implements OnInit {

columnsToDisplay = [
    'executionDate',
    'previousTimePeriod',
    'afterTimePeriod'
];
columnsToDisplay2 = [
    'id',
    'lable',
    'executionDate',
    'previousTimePeriod',
    'afterTimePeriod',
    'status'
];
expandedElement: Element | null;
 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;
        });
}

Answer 1

mat-table不支持Mater-Detail情况，您可以使用ngx-nested-data-table https://github.com/daniele-zurico/ngx-nested-data-table