How to create a mat-table with a checkbox and a label in the same column?

I'm using Angular Material and I would like my first column to have a checkbox as well as the value of my name-property. I dont need this column to be sticky. I appreciate any ideas for this.

Under the following link you can find my stackblitz example:

I have tried to add a row span which did not work out.

1 Answer

First of all I made a working example on stackblitz:

Stackblitz-Example

I basically made the following changes to bring select and name in the same column:

The modified part of the TS-File:

displayedColumns: string[] = ['selectAndName', 'position', 'weight', 'symbol']; 

The modified part of the HTML-File:

<ng-container matColumnDef="selectAndName"> <th mat-header-cell *matHeaderCellDef> <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()" [indeterminate]="selection.hasValue() && !isAllSelected()" > </mat-checkbox> Select and name </th> <td mat-cell *matCellDef="let element"> <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(element) : null" [checked]="selection.isSelected(element)" > </mat-checkbox> {{element.name}} </td> </ng-container>