Angular Material mat-table Row Grouping

Leaving aside the libraries that provide row grouping for their particular tables, I am trying to implement such a feature on Angular Material 2 mat-table which does not come with such a feature.

Items to populate the table:

export class BasketItem{    public id: number;    public position: number;    public quantity: number;    public groupId: number;} 

Grouping rows that have same groupId property in the following table

<mat-table class="mat-elevation-z8" [dataSource]="dataSource" multiTemplateDataRows matSort matSortActive="position" matSortDirection="asc" matSortDisableClear ><!-- Position Column -->  <ng-container matColumnDef="position"><mat-header-cell *matHeaderCellDef mat-sort-header><b>Position</b></mat-header-cell><mat-cell *matCellDef="let basketItem">{{basketItem.position}}</mat-cell></ng-container><!-- Quantity Column --><ng-container matColumnDef="quantity"><mat-header-cell *matHeaderCellDef><b>Quantity</b></mat-header-cell><mat-cell *matCellDef="let basketItem">{{basketItem.quantity}}</mat-cell></ng-container><!-- GroupId Column -->  <ng-container matColumnDef="position"><mat-header-cell *matHeaderCellDef mat-sort-header><b>GroupId </b></mat-header-cell><mat-cell *matCellDef="let basketItem">{{basketItem.GroupId }}</mat-cell></ng-container><mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row><mat-row *matRowDef="let basketItem; columns: displayedColumns;" (click)="onSelect(basketItem)"></mat-row></mat-table>

Any ideas on how the row grouping could be approached?