Unable to use colspan in angular material table

Question

Is it possible to use colspan in angular material table or is there any other way that I can achieve colspan in any other way?

I have tried [attr.colspan] but result is not proper. As soon as I added [attr.colspan] it applies colspan but moves symbols to a new unknown column.

you can look at https://stackoverflow.com/questions/55701270/how-colspan-and-row-span-added-to-material-table-header-angular-7 — Caro, Mar 03 '20 at 09:01
Does this answer your question? [How colSpan and row Span added to material table Header Angular 7?](https://stackoverflow.com/questions/55701270/how-colspan-and-row-span-added-to-material-table-header-angular-7) — ajorquera, Mar 03 '20 at 09:33
no, I don't want it on header. I want colspan on row. It won't help in my scenario. — pooja, Mar 03 '20 at 09:37
@pooja why do you use use colspan here? why don't you just create a column with Symbol? — BELLIL, Mar 03 '20 at 09:55

score 2 · Answer 1 · answered Mar 03 '20 at 09:02

2

You can use [attr.colspan] this is an example

    <table mat-table [dataSource]="dataSource" multiTemplateDataRows>
    <ng-container matColumnDef="column">
      <th mat-header-cell *matHeaderCellDef [attr.colspan]="3">Column</th>
    </ng-container>
    </table>

answered Mar 03 '20 at 09:02

BELLIL

739
10
23

I have already try [attr.colspan] but not get proper result. I have added image in my post. Please have a look. – pooja Mar 03 '20 at 09:12
if you have no proper result it means that something else in your code prevent your rules to be applied, could you please create a stackblitz of your code? – BELLIL Mar 03 '20 at 09:46
hi, stackblitz link https://stackblitz.com/edit/angular-wwg2uj?file=src%2Findex.html. – pooja Mar 03 '20 at 10:09
I only want 9 postion "Weight" option to be apply for colspan. – pooja Mar 03 '20 at 10:11

Wessel · Answer 2 · 2020-03-03T09:02:55.280

You can not use colspan with material tables. You can hower set the [matColumnDef] to define what columns need to be displayed. Or [attr.colspan] is an attribute you can use on mat-table. Although I haven't tried it myself.

Column definition for the mat-table. Defines a set of cells available for a table column.

Angular Material Table API

If you really want to use colspan you can read THIS thread where it is explained how you can use colspan with CdkTable.

Unable to use colspan in angular material table

2 Answers2