Is there any way I can keep the first column ie a checkbox and second text column in one column. I dont need my column to be sticky. Appreciate any idea for this.

here you can find the stackblitz code https://stackblitz.com/edit/angular-mat-table-checkbox-select-all-lbspiz?file=main.ts

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

CodePudding user response：

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>