title: Angular Material mat-table Row Grouping
body: <p>Leaving aside the libraries that provide <strong>row grouping</strong> for their particular tables, I am trying to implement such a feature on <a href="https://material.angular.io/components/table/overview" rel="noreferrer">Angular Material 2 mat-table</a> which does not come with such a feature.</p>
  
  <p>Items to populate the table:</p>
  
  <pre><code>export class BasketItem{
      public id: number;
      public position: number;
      public quantity: number;
      public groupId: number;
  } 
  </code></pre>
  
  <blockquote>
    <p>Grouping rows  that have same <strong>groupId</strong> property in the following table</p>
  </blockquote>
  
  <pre><code> &lt;mat-table class="mat-elevation-z8" [dataSource]="dataSource" multiTemplateDataRows matSort matSortActive="position" matSortDirection="asc" matSortDisableClear &gt;
  
        &lt;!-- Position Column --&gt;  
        &lt;ng-container matColumnDef="position"&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;
            &lt;b&gt;Position&lt;/b&gt;
          &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let basketItem"&gt;{{basketItem.position}}&lt;/mat-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;!-- Quantity Column --&gt;
        &lt;ng-container matColumnDef="quantity"&gt;
          &lt;mat-header-cell *matHeaderCellDef&gt;
            &lt;b&gt;Quantity&lt;/b&gt;
          &lt;/mat-header-cell&gt;
           &lt;mat-cell *matCellDef="let basketItem"&gt;{{basketItem.quantity}}&lt;/mat-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;!-- GroupId Column --&gt;  
        &lt;ng-container matColumnDef="position"&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;
            &lt;b&gt;GroupId &lt;/b&gt;
          &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let basketItem"&gt;{{basketItem.GroupId }}&lt;/mat-cell&gt;
        &lt;/ng-container&gt;
  
  
        &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
  
        &lt;mat-row *matRowDef="let basketItem; columns: displayedColumns;" (click)="onSelect(basketItem)"&gt;&lt;/mat-row&gt;
  
      &lt;/mat-table&gt;
  </code></pre>
  
  <p>Any ideas on how the <strong>row grouping</strong> could be approached?</p>