Material Table with Pagination and Rowspan not working

Question

I'm facing an issue in paginating a material table with rowspan. The rowspan attribute binding works fine on its own. But when I introduced pagination it leads to repetition of the values. For example, the data for id=5

{ id: 5, name: 'Boron', weight: 10.811, descriptions: ['row1'] },

And the output looks like

Is there any way I can avoid this?

Please find the stackblitz link here https://stackblitz.com/edit/angular-wudscb-9us1us?file=app%2Fapp.component.html

Answer 1

you can use the mat-paginator as component (not add the this.dataSource.paginator = this.paginator; else use the events and properties of the mat-paginator

But I suggest that really you show the table "as is". The only is "formatted" the last cell

  <ng-container matColumnDef="descriptions">
    <th mat-header-cell *matHeaderCellDef>Descriptions</th>
    <td mat-cell class="description-cell" *matCellDef="let data" >
      <div class="inner-cell" *ngFor="let desc of data.descriptions;let last=last" 
           [class.no-border]="last" >
        {{ desc }}
      </div>
    </td>
  </ng-container>

And ajust the .css

td.mat-cell.description-cell{
  padding:0!important
}
.inner-cell{
padding-top: 14px !important;
padding-left: 16px !important;
padding-bottom: 14px !important;

border-bottom:1px solid rgba(0,0,0,.12);
}
.no-border{
  border-bottom:none
}

You can see in this stackblitz. See that it's used directly dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA); (you needn't trasnform your data