Невозможно сгруппировать мою таблицу по полю Group (string)

Question

У меня есть одна таблица, которая показывает мои данные, которые я могу получить из базы данных с помощью запроса Get (int id) в C #.Я получаю детали одной Среды, после этого я должен увидеть группу конфигов, например: Группа 1: некоторые данные , Группа 2: некоторые данные . Короче говоря, мне нужно сгруппировать мои configItems по полю "group". Эти данные должны быть похожи на таблицу.

ConfigItem:

export class ConfigItem {
    id: number;
    name: string;
    productName: string;
    group: string;
    key: string;
    value: string;
    environmentTrs: EnvironmentTrs;
}

Моя таблица:

<table mat-table [dataSource]="configList" class="mat-elevation-z8" style="width: 80%">  
                <ng-container matColumnDef="ProductName">
                  <th mat-header-cell *matHeaderCellDef> ProductName </th>
                  <td mat-cell *matCellDef="let config">{{config.productName}}</td>
                </ng-container>        
                <ng-container matColumnDef="Key">
                  <th mat-header-cell *matHeaderCellDef> Key </th>
                  <td mat-cell *matCellDef="let config"><b>{{config.key}}</b></td>
                </ng-container>  
                <ng-container matColumnDef="Value">
                    <th mat-header-cell *matHeaderCellDef> Value </th>
                    <td mat-cell *matCellDef="let config">{{config.value}}</td>
                </ng-container>    
                <ng-container matColumnDef="Group">
                    <th mat-header-cell *matHeaderCellDef> Group </th>
                    <td mat-cell *matCellDef="let config">{{config.group}}</td>
                </ng-container> 
                <ng-container matColumnDef="Actions">
                    <th mat-header-cell *matHeaderCellDef></th>
                    <td mat-cell *matCellDef="let host">                    
                        <button (click)="onEditKey(config.id)" mat-button color="primary">Edit</button>             
                    </td>              
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </table>

Как это должно выглядеть:

введите описание изображения здесь