I'm currently working on an Angular component that serves the dual purpose of displaying data and receiving data. To achieve this, I created a mat-table with input form fields and used {{element.value}} for regular data display. Each column in the table was assigned a different width according to the following specifications:
.mat-column-v{
width: 32%!important;
}
.mat-column-w{
width: 17%!important;
}
.mat-column-x{
width: 17%!important;
}
.mat-column-y{
width: 17%!important;
}
.mat-column-z{
width: 17%!important;
}
However, there seems to be an issue with setting the column widths when using the input mode. On the other hand, the output mode displays the correct width as shown in this image: https://i.sstatic.net/7tBPf.jpg
In order to maintain privacy, I have obscured the information. In the screenshot provided, the right side shows the input mode with the first column having uneven width distribution, while the left side demonstrates the correctly set width in the output mode.
Code for My Component:
<table mat-table [dataSource]="data">
<!-- v Column -->
<ng-container matColumnDef="v">
<th mat-header-cell *matHeaderCellDef> v </th>
<td mat-cell *matCellDef="let element"> {{element.v}} </td>
</ng-container>
<!-- w Column -->
<ng-container matColumnDef="w">
<th mat-header-cell *matHeaderCellDef> w </th>
<td mat-cell *matCellDef="let element">
<ng-container *ngIf="type == 'input'">
<mat-form-field>
<input matInput [value]="element.w" [(ngModel)]="element.w">
</mat-form-field>
</ng-container>
<ng-container *ngIf="type == 'output'"> {{element.w}} </ng-container>
</td>
</ng-container>
<!-- x Column -->
<ng-container matColumnDef="x">
<th mat-header-cell *matHeaderCellDef> x </th>
<td mat-cell *matCellDef="let element">
<ng-container *ngIf="type == 'input'">
<mat-form-field>
<input matInput [value]="element.x" [(ngModel)]="element.x">
</mat-form-field>
</ng-container>
<ng-container *ngIf="type == 'output'"> {{element.x}} </ng-container>
</td>
</ng-container>
<!-- y Column -->
<ng-container matColumnDef="y">
<th mat-header-cell *matHeaderCellDef> y </th>
<td mat-cell *matCellDef="let element">
<ng-container *ngIf="type == 'input'">
<mat-form-field>
<input matInput [value]="element.y" [(ngModel)]="element.y">
</mat-form-field>
</ng-container>
<ng-container *ngIf="type == 'output'"> {{element.y}} </ng-container>
</td>
</ng-container>
<!-- z Column -->
<ng-container matColumnDef="z">
<th mat-header-cell *matHeaderCellDef> z </th>
<td mat-cell *matCellDef="let element">
<ng-container *ngIf="type == 'input'">
<mat-form-field>
<input matInput [value]="element.z" [(ngModel)]="element.z">
</mat-form-field>
</ng-container>
<ng-container *ngIf="type == 'output'"> {{element.z}} </ng-container>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="heads"></tr>
<tr mat-row *matRowDef="let row; columns: heads;"></tr>
</table>
CSS Code for My Component:
table {
width: 100%;
}
.mat-form-field {
font-size: 14px;
width: 90%;
}
.mat-column-v{
width: 32%!important;
}
.mat-column-w{
width: 17%!important;
}
.mat-column-x{
width: 17%!important;
}
.mat-column-y{
width: 17%!important;
}
.mat-column-z{
width: 17%!important;
}
Is there a way to ensure that the size of the 1st column in the table remains consistent when containing input fields similar to the rest of the columns?