web-dev-qa-db-fra.com

Comment régler la largeur de la colonne mat-table en angulaire?

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

 enter image description here

Image-2

 enter image description here

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>

htmlcssangularangular-material
2
DDD

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

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

3
Prashant Pimpale

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.

0
Simon_Weaver