CODEWITHSUNDEEP
cssangular-materialformattableng-container
user741825
user741825

Reputation: 89

how do I change width of ng-container inside mat-table

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

Upvotes: 4

Views: 9228

Answers (1)

Akhi Akl
Akhi Akl

Reputation: 3931

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;
}

Upvotes: 2

Related Questions