title: Angular material combine same column values in table and show only single value for multiple rows
body: <p>I have a field called purchase_id which is the same for multiple records. Many records have the same purchase_id. Currently, I am showing the same purchase_id for multiple records, but now I want to combine the cells which have the same purchase_id and show purchase_id only once for the same records
  Thanks in advance
   My code</p>
  
  <pre><code>    &lt;table mat-table [dataSource]="dataSource" matSort matSortActive="serial_no" matSortDirection="desc" class="mat-elevation-z8" &gt;
  
  
        &lt;ng-container matColumnDef="serial_no"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Serial number &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.serial_no}} &lt;/td&gt;
          &lt;td mat-footer-cell *matFooterCellDef&gt; Total  &lt;/td&gt;
  
        &lt;/ng-container&gt;
  
        &lt;ng-container matColumnDef="purchase_id"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Purchase_id &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.purchase_id}} &lt;/td&gt;
          &lt;td mat-footer-cell *matFooterCellDef&gt;  &lt;/td&gt;
  
        &lt;/ng-container&gt;
  
        &lt;ng-container matColumnDef="product_name"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Product Name &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.product_name}} &lt;/td&gt;
          &lt;td mat-footer-cell *matFooterCellDef&gt;  &lt;/td&gt;
  
        &lt;/ng-container&gt;
  
        &lt;ng-container matColumnDef="quantity"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Quantity &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.quantity}} &lt;/td&gt;
          &lt;td mat-footer-cell *matFooterCellDef&gt; {{totalquant}} &lt;/td&gt;
  
  
        &lt;/ng-container&gt;
  
        &lt;ng-container matColumnDef="buyingprice"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Buyingprice &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.buyingprice}} &lt;/td&gt;
          &lt;td mat-footer-cell *matFooterCellDef&gt;{{(totalPrice)}}  &lt;/td&gt;
  
        &lt;/ng-container&gt;
  
  
        &lt;ng-container matColumnDef="vendor_name"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Vendor Name &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.vendor_name}} &lt;/td&gt;
          &lt;td mat-footer-cell *matFooterCellDef&gt;  &lt;/td&gt;
  
        &lt;/ng-container&gt;
  
        &lt;ng-container matColumnDef="date"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Date &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.date}} &lt;/td&gt;
          &lt;td mat-footer-cell *matFooterCellDef&gt;  &lt;/td&gt;
        &lt;/ng-container&gt;
        &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
        &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
        &lt;tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"&gt;&lt;/tr&gt;
      &lt;/table&gt;
      &lt;mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"&gt;&lt;/mat-paginator&gt;
  </code></pre>