как изменить ширину ng-контейнера внутри mat-таблицы - PullRequest
0 голосов
/ 29 октября 2018

Ширина столбцов (ng-контейнера) внутри таблицы mat разделена поровну. Есть ли способ, которым я могу настроить на основе моих требований (содержание в столбце). Ex. На изображении ниже флажок принимает ширину, равную ширине других столбцов, что мне не нужно.

<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

1 Ответ

0 голосов
/ 01 ноября 2018

Используйте flex.

'column_name' будет matColumnDef столбца

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

нравится для выбора

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