title: How to groupBy rows in Mat-Table
body: <p>I have <code>mat-Table</code> with <code>filters</code> and i want to group the table by one of the <code>columns</code>.</p>
  
  <p>I want to make it a collapsible row that just shows how much you have of "that" kind and you can press it to see every single <code>row</code> inside that group. </p>
  
  <p>I will share my HTML(that's a snippet not the whole HTML : </p>
  
  <pre><code>&lt;mat-checkbox  class="CheckBoxClass" value="clientType" [(ngModel)]="isChecked  " disabled (change)="updateFilter('LQOCH_SHM_LOEZI_QTSR', clientType)" &gt;{{clientType}}&lt;/mat-checkbox&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;mat-checkbox  class="CheckBoxClass" value="contSize" [(ngModel)]="isChecked" disabled (change)="updateFilter('AORKH_MCOLH', contSize)" &gt;{{contSize}}&lt;/mat-checkbox&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;mat-checkbox  class="CheckBoxClass" value="storageType" [(ngModel)]="isChecked" disabled (change)="updateFilter('TAOR_QTSR_EBRI', storageType)" &gt;{{storageType}}&lt;/mat-checkbox&gt;
  &lt;/div&gt;
  
  
    &lt;!-- Container Table --&gt;
    &lt;div&gt;
      &lt;mat-table [dataSource]="dataSource"  [hidden]="!show"  &gt;
        &lt;!-- Location  --&gt;
        &lt;ng-container matColumnDef="AITOR"&gt;
          &lt;mat-header-cell *matHeaderCellDef&gt; Location
  
          &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let container"&gt; {{container.AITOR}} &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
            &lt;!-- Type  --&gt;
            &lt;ng-container matColumnDef="SOG_MCOLH"&gt;
              &lt;mat-header-cell *matHeaderCellDef &gt; Container Type&lt;/mat-header-cell&gt;
              &lt;mat-cell *matCellDef="let container"&gt; {{container.SOG_MCOLH}}&lt;/mat-cell&gt;
  </code></pre>
  
  <p>This is my component <code>NgOnInit</code> : </p>
  
  <pre><code> ngOnInit() {
      this.marinService.getAllContainers().subscribe((result) =&gt; {
       //Data
        this.dataSource = new MatTableDataSource(result);
        //Paginator
        this.dataSource.paginator = this.paginator;
        this.dataSource.filterPredicate = ((data: Container, filter: string): boolean =&gt; {
          const filterValues = JSON.parse(filter);
          let conditions = true;
          for (let filterKey in filterValues) {
            if (filterKey === 'SOG_MCOLH' || filterKey === 'LQOCH_SHM_LOEZI_QTSR' || filterKey === 'AORKH_MCOLH' || filterKey === 'TAOR_QTSR_EBRI') {
                conditions = conditions &amp;&amp; data[filterKey].trim().toLowerCase().indexOf(filterValues[filterKey]) !== -1;
            }
            else if (filterValues[filterKey].length) {
              conditions = conditions &amp;&amp; filterValues[filterKey].includes(data[filterKey].trim().toLowerCase());
            }
          }
          return conditions;
        });
        }
        )}
  </code></pre>
  
  <p>Basically what I want to achieve is a row that collapse and shows how many rows it has and you can press on it to open the rows. </p>