How to use colspan and ngFor in Angular material 6 table?

Question

I'm using Angular Material to render the table.

Code:

<ng-container matColumnDef="type">
  <th mat-header-cell *matHeaderCellDef> Workout type </th>
  <td mat-cell *matCellDef="let workout"> {{workout.type}} </td>
</ng-container>

<ng-container matColumnDef="set1">
  <th mat-header-cell *matHeaderCellDef> Weight x Reps </th>
  <td mat-cell *matCellDef="let workoutData"> {{workoutData.workoutSessions[0].sets[0].weight}} x {{workoutData.workoutSessions[0].sets[0].repetitions}} </td>
</ng-container>

<ng-container matColumnDef="set2">
  <th mat-header-cell *matHeaderCellDef> Weight x Reps </th>
  <td mat-cell *matCellDef="let workoutData"> {{workoutData.workoutSessions[0].sets[1].weight}} x {{workoutData.workoutSessions[0].sets[1].repetitions}} </td>
</ng-container>

<ng-container matColumnDef="set3">
  <th mat-header-cell *matHeaderCellDef> Weight x Reps </th>
  <td mat-cell *matCellDef="let workoutData"> {{workoutData.workoutSessions[0].sets[2].weight}} x {{workoutData.workoutSessions[0].sets[2].repetitions}} </td>
</ng-container>

<ng-container matColumnDef="set4">
  <th mat-header-cell *matHeaderCellDef> Weight x Reps </th>
  <td mat-cell *matCellDef="let workoutData"> {{workoutData.workoutSessions[0].sets[3].weight}} x {{workoutData.workoutSessions[0].sets[3].repetitions}} </td>
</ng-container>

<ng-container matColumnDef="set5">
  <th mat-header-cell *matHeaderCellDef> Weight x Reps </th>
  <td mat-cell *matCellDef="let workoutData"> {{workoutData.workoutSessions[0].sets[4].weight}} x {{workoutData.workoutSessions[0].sets[4].repetitions}} </td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="workoutTableColumns"></tr>
<tr mat-row *matRowDef="let row; columns: workoutTableColumns;"></tr>

I have 2 questions about this:

1) Is it possible to iterate thru an array using *ngFor in this situation? Now my code looks too messy, want to clean it.

2) Is it possible to use colspan? I didn't find any information that this issue is solved (issue: https://github.com/angular/material2/issues/5888 ).

So, the main quesion is: Is it better to use Angular material table or regular one in this particular situation?

Andris · Answer 1 · 2019-08-01T11:47:04.983

3

I don't like accepted answer, cause it suggest some workaround. Actually colspan is attr. So you can add colspan using [attr.colspan] like [attr.colspan]="columns.length"

    <ng-container matColumnDef="demo">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let item" [attr.colspan]="columns.length - 1">...</td>
    </ng-container>

edited Aug 01 '19 at 11:47

answered Jul 19 '19 at 07:16

Andris

3,895
2
24
27

could you provide any example? – johannesMatevosyan Aug 01 '19 at 07:15
I added example. But there isn't much to write, cause it is just attr. – Andris Aug 01 '19 at 11:47

score 2 · Accepted Answer · answered Jun 26 '18 at 06:07

2

I see no reason why you couldn't do the following:

<ng-container *ngFor="let set of workoutData.workoutSessions[0].sets; let i = index" [matColumnDef]="'set' + i">
  <th mat-header-cell *matHeaderCellDef> Weight x Reps </th>
  <td mat-cell *matCellDef="let set"> {{set.weight}} x {{set.repetitions}} </td>
</ng-container>

Most of it is self explanatory, the main change is to change matColumnDef="setX" to be [matColumnDef]="'set' + i". By adding the square brackets, it causes the value to get evaluated to a string rather than just read 'as is'.

answered Jun 26 '18 at 06:07

Simon K

2,762
1
11
20

what about colspan? – Pradeep Feb 02 '19 at 03:49
4

You cannot use `colspan` with a `MatTable`. If you want to use it then you need to use Material's `CdkTable` as opposed to the `MatTable` which is a fairly different way of writing the table. This gives you a native table and you can use colspan as you would normally. See the following link: https://material.angular.io/cdk/table/overview – Simon K Feb 03 '19 at 21:26
@Simon K disagree, cause for that is angular attrs! – Andris Jul 19 '19 at 07:18
@Andris `colspan` can be set like any old attribute, sure, but it will not have any effect whatsoever on the `MatTable` as `MatTable` doesn't look at that attribute. – Simon K Jul 23 '19 at 01:28

score 0 · Answer 3 · answered Jun 25 '19 at 08:47

I know this is old question though for your 2nd question, yes you can use colspan in matTable. Here is a sample code for mat-header-cell :-

<ng-container matColumnDef="set5">
  <th mat-header-cell *matHeaderCellDef colspan="3"> Weight x Reps </th>
  <td mat-cell *matCellDef="let workoutData"> 
  {{workoutData.workoutSessions[0].sets[4].weight}} x 
 {{workoutData.workoutSessions[0].sets[4].repetitions}} </td>
</ng-container>

How to use colspan and ngFor in Angular material 6 table?

3 Answers3

Linked