CODEWITHSUNDEEP
angular-materialangular-material-table
pratik jaiswal
pratik jaiswal

Reputation: 2065

Angular material combine same column values in table and show only single value for multiple rows

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

    <table mat-table [dataSource]="dataSource" matSort matSortActive="serial_no" matSortDirection="desc" class="mat-elevation-z8" >


      <ng-container matColumnDef="serial_no">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Serial number </th>
        <td mat-cell *matCellDef="let element"> {{element.serial_no}} </td>
        <td mat-footer-cell *matFooterCellDef> Total  </td>

      </ng-container>

      <ng-container matColumnDef="purchase_id">
        <th mat-header-cell *matHeaderCellDef> Purchase_id </th>
        <td mat-cell *matCellDef="let element"> {{element.purchase_id}} </td>
        <td mat-footer-cell *matFooterCellDef>  </td>

      </ng-container>

      <ng-container matColumnDef="product_name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Product Name </th>
        <td mat-cell *matCellDef="let element"> {{element.product_name}} </td>
        <td mat-footer-cell *matFooterCellDef>  </td>

      </ng-container>

      <ng-container matColumnDef="quantity">
        <th mat-header-cell *matHeaderCellDef> Quantity </th>
        <td mat-cell *matCellDef="let element"> {{element.quantity}} </td>
        <td mat-footer-cell *matFooterCellDef> {{totalquant}} </td>


      </ng-container>

      <ng-container matColumnDef="buyingprice">
        <th mat-header-cell *matHeaderCellDef> Buyingprice </th>
        <td mat-cell *matCellDef="let element"> {{element.buyingprice}} </td>
        <td mat-footer-cell *matFooterCellDef>{{(totalPrice)}}  </td>

      </ng-container>


      <ng-container matColumnDef="vendor_name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Vendor Name </th>
        <td mat-cell *matCellDef="let element"> {{element.vendor_name}} </td>
        <td mat-footer-cell *matFooterCellDef>  </td>

      </ng-container>

      <ng-container matColumnDef="date">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
        <td mat-cell *matCellDef="let element"> {{element.date}} </td>
        <td mat-footer-cell *matFooterCellDef>  </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>
    </table>
    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

Upvotes: 2

Views: 4966

Answers (1)

uminder
uminder

Reputation: 26150

I solved this problem in the open source project Koia using a RowSpanComputer class. Within summary-table.component.html, the computed row spans are then used to define the rowspan attribute of the td element.

[attr.rowspan]="rowSpans[iCol][iRow].span"

The rowspan attribute specifies the number of rows a cell should span. The RowSpanComputer class computes the rowspan for each cell out of the specified table data (array of rows). It basically loops over the rows and increments the rowspan for cells as long as their value remains unchanged. As soon as the value changes, the corresponding rowspan is reset to zero.

Please take a look at this StackBlitz

Upvotes: 4

Related Questions