How to add checkbox inside material cell and retrieve the combination record using angular8

I need to add checkbox inside the angular material table which is formed by dynamic data. I am explaining my existing code below.

edit.componet.html:

<form [formGroup]="productForm" (submit)="updateProduct($event)" novalidate>

  <div class="col-lg-12 col-md-12 col-sm-12">
        <mat-table #table [dataSource]="dataSource">

        <ng-container *ngFor="let column of size" [cdkColumnDef]="column.columnDef">
             <mat-header-cell *cdkHeaderCellDef></mat-header-cell>
             <mat-cell *cdkCellDef="let row"></mat-cell>
          </ng-container>
             <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
        </mat-table>
   </div>
   <div class="form-footer">      
      <div style="margin-top:2%; margin-bottom: 2%; text-align: center;">
       <button class="btn btn-md btn-primary text-upper" type="submit">Save</button>
                            &nbsp;&nbsp;
      <button class="btn btn-md btn-danger text-upper" type="reset" (click)="resetForm($event)">Reset</button>
         </div>
     </div>
</form>

edit.componet.ts:

size: any = [
    { columnDef: 'position', header: '#',  cell: (element: any) => `${element.position}`},
    { columnDef: 'size1',    header: '28', cell: (element: any) => `${element.size1}`},
    { columnDef: 'size2',   header: '30', cell: (element: any) => `${element.size2}`},
    { columnDef: 'size3',   header: '32', cell: (element: any) => `${element.size3}`},
    { columnDef: 'size4',   header: '34', cell: (element: any) => `${element.size4}`},
    { columnDef: 'size5',   header: '36', cell: (element: any) => `${element.size5}`},
    { columnDef: 'size6',   header: '38', cell: (element: any) => `${element.size6}`}
  ]

  displayedColumns = this.size.map(c => c.columnDef);



  dataSource: any[] = [
    {position: "Black", 28: false, 30: false, 32: false, 34: false, 36: false, 38:false},
    {position: "white", 28: false, 30: false, 32: false, 34: false, 36: false, 38:false},
    {position: "Blue", 28: false, 30: false, 32: false, 34: false, 36: false, 38:false},
    {position: "Grey", 28: false, 30: false, 32: false, 34: false, 36: false, 38:false},
    {position: "Red", 28: false, 30: false, 32: false, 34: false, 36: false, 38:false},
    {position: "Pink", 28: false, 30: false, 32: false, 34: false, 36: false, 38:false}
  ]

The output of the above code is coming like below.

Here inside column headers there are some sizes for each color those are present inside the 1st row. Here I need to add checkbox under each size and after selecting some sizes respective of some colors then the selected combination arrays will be fetched inside the submit function.