Ici, dans mon tableau de mat, j'ai 6 colonnes quand une colonne n'a pas plus de mots, alors cela ressemble à Image-1, mais quand une colonne a plus de mots, UI ressemble à Image-2, colonne a plus de mots en angulaire 6?
Image-1
Image-2
user.component.html
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="userimage">
<th mat-header-cell *matHeaderCellDef> # </th>
<td mat-cell *matCellDef="let element">
<img src="{{commonUrlObj.commonUrl}}/images/{{element.userimage}}" style="height: 40px;width: 40px;"/>
</td>
</ng-container>
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> Full Name </th>
<td mat-cell *matCellDef="let element"> {{element.username}} ( {{element.usertype}} )</td>
</ng-container>
<ng-container matColumnDef="emailid">
<th mat-header-cell *matHeaderCellDef> EmailId </th>
<td mat-cell *matCellDef="let element"> {{element.emailid}} </td>
</ng-container>
<ng-container matColumnDef="contactno">
<th mat-header-cell *matHeaderCellDef> Contact No. </th>
<td mat-cell *matCellDef="let element"> {{element.contactno}} </td>
</ng-container>
<ng-container matColumnDef="enabled">
<th mat-header-cell *matHeaderCellDef> Enabled </th>
<td mat-cell *matCellDef="let element" style="color: blue">
<ng-container *ngIf="element.enabled == 'true'; else otherss">Enabled</ng-container>
<ng-template #otherss>Disabled</ng-template>
</td>
</ng-container>
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef> Action </th>
<td mat-cell *matCellDef="let element" fxLayoutGap="5px">
<button mat-mini-fab color="primary" routerLink="/base/editUserDetails/{{element.userid}}"><mat-icon>edit</mat-icon></button>
<button mat-mini-fab color="primary" routerLink="/base/viewUserDetails/{{element.userid}}"><mat-icon>pageview</mat-icon></button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20, 50 ,100]" showFirstLastButtons></mat-paginator>
en utilisant CSS, nous pouvons ajuster la largeur de colonne spécifique que je mets dans le code ci-dessous.
user.component.css
table{
width: 100%;
}
.mat-column-username {
Word-wrap: break-Word !important;
white-space: unset !important;
flex: 0 0 28% !important;
width: 28% !important;
overflow-wrap: break-Word;
Word-wrap: break-Word;
Word-break: break-Word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
.mat-column-emailid {
Word-wrap: break-Word !important;
white-space: unset !important;
flex: 0 0 25% !important;
width: 25% !important;
overflow-wrap: break-Word;
Word-wrap: break-Word;
Word-break: break-Word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
.mat-column-contactno {
Word-wrap: break-Word !important;
white-space: unset !important;
flex: 0 0 17% !important;
width: 17% !important;
overflow-wrap: break-Word;
Word-wrap: break-Word;
Word-break: break-Word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
.mat-column-userimage {
Word-wrap: break-Word !important;
white-space: unset !important;
flex: 0 0 8% !important;
width: 8% !important;
overflow-wrap: break-Word;
Word-wrap: break-Word;
Word-break: break-Word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
.mat-column-userActivity {
Word-wrap: break-Word !important;
white-space: unset !important;
flex: 0 0 10% !important;
width: 10% !important;
overflow-wrap: break-Word;
Word-wrap: break-Word;
Word-break: break-Word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
Comme suggéré dans le commentaire, vous pouvez y parvenir avec CSS.
Utilisation:
table {
width: 100%;
table-layout: fixed;
}
th, td {
overflow: hidden;
width: 200px;
text-overflow: Ellipsis;
white-space: nowrap;
}
Voici un exemple StackBlitz avec des exemples de données
Si vous utilisez scss pour vos styles, vous pouvez utiliser un mixin pour générer le code. Vos styles deviendront rapidement incontrôlables si vous mettez toutes les propriétés à chaque fois.
Il s'agit d'un exemple très simple - rien de plus qu'une preuve de concept, vous pouvez l'étendre avec plusieurs propriétés et règles selon vos besoins.
@mixin mat-table-columns($columns)
{
.mat-column-
{
@each $colName, $props in $columns {
$width: map-get($props, 'width');
&#{$colName}
{
flex: $width;
min-width: $width;
@if map-has-key($props, 'color')
{
color: map-get($props, 'color');
}
}
}
}
}
Ensuite, dans votre composant où votre table est définie, procédez comme suit:
@include mat-table-columns((
orderid: (width: 6rem, color: gray),
date: (width: 9rem),
items: (width: 20rem)
));
Cela génère quelque chose comme ceci:
.mat-column-orderid[_ngcontent-c15] {
flex: 6rem;
min-width: 6rem;
color: gray; }
.mat-column-date[_ngcontent-c15] {
flex: 9rem;
min-width: 9rem; }
Dans cette version, width
devient flex: value; min-width: value
.
Pour votre exemple spécifique, vous pouvez ajouter wrap: true
ou quelque chose comme ça en tant que nouveau paramètre.