-1

I'm using angular material and mat-table to display records in table format. But I want to merge row cells and display data like shown in below image. (record 5,6,7) Can someone pls let me know how we can achieve this ?

enter image description here

Ajinkya More
  • 19
  • 1
  • 9
  • in the docs, in [examples](https://material.angular.io/components/table/examples), you have a "Table with multiple header and footer rows". If you want to colspan to a row, check this [SO](https://stackoverflow.com/questions/72909407/apply-colspan-on-specific-column-on-a-dynamic-table-using-mat-table/72935712#72935712) – Eliseo Apr 18 '23 at 11:24

1 Answers1

1
 <ng-container cdkColumnDef="position">
  <cdk-header-cell *cdkHeaderCellDef> header</cdk-header-cell>
  <cdk-cell *cdkCellDef="let element"> {{ element }} </cdk-cell>
  <cdk-footer-cell cdk-footer-cell *cdkFooterCellDef [attr.colspan]="dataSource.length"> </cdk-footer-cell>
</ng-container>

<ng-container cdkColumnDef="column2+">
  <cdk-header-cell *cdkHeaderCellDef> header</cdk-header-cell>
  <cdk-cell *cdkCellDef="let element"> {{ element }} </cdk-cell>
  <cdk-footer-cell cdk-footer-cell *cdkFooterCellDef style="display:none"> </cdk-footer-cell>
</ng-container>

<tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>

For each footer-row, you need to add one footer-cell with attr.colspan = dataSource.lenght to the first matColumnDef and the footer-cells with display:none to the rest of matColumnDefs. For the others merged rows and columns, just do the same, add attr.colspan or attr.rowspan to the displayed cells and add display:none for the hided cells in each matColumnDef

Minh Erratic
  • 48
  • 4