4

The width of columns(ng-container) inside the mat-table is equally divided. Is there a way I can adjust based my requirements (contents on column). Ex. In below image, checkbox is taking equal width as other columns which is not what I need.

<mat-table #table matSort [dataSource]="dataSource"> 
<!-- Checkbox Column -->
<ng-container matColumnDef="select">  
<mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
                  [checked]="selection.hasValue() && isAllSelected()"
                  [indeterminate]="selection.hasValue() && 
!isAllSelected()">  
<mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
                  [checked]="selection.hasValue() && isAllSelected()"
                  [indeterminate]="selection.hasValue() &&    
 !isAllSelected()">
</mat-checkbox>
</mat-header-cell>
<mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
                  (change)="$event ? selection.toggle(row) : null"
                  [checked]="selection.isSelected(row)">
</mat-checkbox>
</mat-cell>
</ng-container>

<ng-container matColumnDef="paymentcode">
<mat-header-cell *matHeaderCellDef mat-sort-header> Family Code </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.paymentcode}} </mat-cell>
</ng-container>

enter image description here

user741825
  • 89
  • 1
  • 5

1 Answers1

2

Use flex.

'column_name' will be the matColumnDef of the column

.mat-column-'column_name'{
   flex: 0 0 50px;
}

like for select 

.mat-column-select{
   flex: 0 0 50px;
}
Akhi Akl
  • 3,795
  • 1
  • 15
  • 26