web-dev-qa-db-fra.com

md-table - Comment mettre à jour la largeur de la colonne

J'ai commencé à utiliser la table md pour mon projet et je veux une largeur de colonne fixe. Actuellement, toutes les colonnes sont divisées en tailles égales.

Où puis-je obtenir la documentation sur les dimensions de la table de données?

https://material.angular.io/components/table/overview

angular
41
Vinutha Kumar

Lorsque Material crée la table, il applique automatiquement deux noms de classe que vous pouvez utiliser pour styliser chaque colonne . Dans l'exemple ci-dessous, les styles sont nommés mat-column-userId et cdk-column-userId.

<ng-container cdkColumnDef="userId">
  <md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
  <md-cell *cdkCellDef="let row"> {{row.id}} </md-cell>
</ng-container>

Maintenant, vous pouvez utiliser ces noms en css:

.mat-column-userId {
  flex: 0 0 100px;
}

Similaire à La réponse de Rahul Patil , mais vous n'avez pas besoin d'ajouter une autre classe à vos définitions de colonne.

85
jymdman

À l'heure actuelle, il n'a pas encore été exposé au niveau de l'API. Cependant, vous pouvez y arriver en utilisant quelque chose de similaire à ceci 

<ng-container cdkColumnDef="userId" >
  <md-header-cell *cdkHeaderCellDef [ngClass]="'customWidthClass'"> ID </md-header-cell>
  <md-cell *cdkCellDef="let row" [ngClass]="'customWidthClass'"> {{row.id}} </md-cell>
</ng-container>

En css, vous devez ajouter cette classe personnalisée - 

.customWidthClass{
   flex: 0 0 75px;
}

N'hésitez pas à entrer dans la logique pour ajouter une classe ou une largeur personnalisée ici. Il appliquera une largeur personnalisée pour la colonne.

Puisque md-table utilise flex, nous devons donner une largeur fixe de manière flexible. Cela explique simplement - 

0 = ne pousse pas (raccourci pour flex-grow)

0 = ne rétrécit pas (raccourci pour flex-shrink)

75px = début à 75px (raccourci pour flex-base)

Plunkr ici - https://plnkr.co/edit/v7ww6DhJ6zCaPyQhPRE8?p=preview

39
Rahul Patil

Si vous utilisez angular/flex-layout dans votre projet, vous pouvez définir la colonne avec en ajoutant fxFlex directive à mat-header-cell et mat-cell:

 <ng-container matColumnDef="name" >
      <mat-header-cell fxFlex="100px" *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
      <mat-cell  fxFlex="100px" *matCellDef="let row;" (click)="rowClick(row)">{{row.Name}}</mat-cell>
 </ng-container>

Sinon, vous pouvez ajouter du CSS personnalisé pour obtenir le même résultat:

.mat-column-name{
    flex: 0 0 100px;
}
25
Uliana Pavelko

Vérifiez ceci: https://github.com/angular/material2/issues/5808

Puisque material2 utilise flex layout, vous pouvez simplement définir fxFlex="40" (ou la valeur souhaitée pour fxFlex) sur md-cell et md-header-cell. 

18
Carlos E. Venegas

J'ai trouvé une combinaison des réponses de jymdman et de Rahul Patil qui fonctionne le mieux pour moi:

.mat-column-userId {
  flex: 0 0 75px;
}

De plus, si vous avez une colonne "principale" que vous souhaitez occuper toujours avec un certain espace sur différents périphériques, je trouve très facile d’adopter ce qui suit pour définir la largeur du conteneur disponible de manière plus réactive (cela force les colonnes restantes à utiliser uniformément l'espace restant):

.mat-column-userName {
  flex: 0 0 60%;
}
11
Hans

La documentation du matériau Angular utilise 

.mat-column-userId {
    max-width: 40px;
}

pour son composant de table pour changer la largeur de la colonne. Encore une fois, userId serait le nom des cellules.

5
MatthiasSommer

J'utilise FlexLayout pour mettre à jour la largeur de colonne en fonction du support de requête fourni par FlexLayout.

fxFlex="30" fxFlex.gt-xs="15" fxFlex.gt-sm="20" fxFlex.gt-md="25"

signifie que cette colonne utilisera par défaut 30% de la largeur de la ligne; lorsque gt-xs @mediaQuery est remplie, la nouvelle largeur sera de 15% et un comportement similaire pour d'autres conditions 

<!-- CURRENTBALANCE COLUMN-->
  <ng-container cdkColumnDef="balance_2">
    <mat-header-cell fxFlex="30" fxFlex.gt-xs="15" fxFlex.gt-sm="20"
       fxFlex.gt-md="25" fxLayout="row" fxLayoutAlign="center center"
       *cdkHeaderCellDef>{{ balanceTable.datesHeaders[2] }}</mat-header-cell>
    <mat-cell fxFlex="30" fxFlex.gt-xs="15" fxFlex.gt-sm="20" fxFlex.gt-md="25" 
      *cdkCellDef="let eventTop">
      <div fxLayout="column" fxLayoutAlign="center center">
        <!-- CELL_CONTENT-->
      </div>
    </mat-cell>
  </ng-container>
<!-- CURRENTBALANCE COLUMN-->

> En savoir plus sur FlexLayout et @MediaQueries à https://github.com/angular/flex-layout/wiki/Responsive-API

5
Felipe Santa

Vous pouvez maintenant le faire comme ça

<cdk-cell [style.flex]="'0 0 75px'">
4
Jason Politis

Vous pouvez définir la classe .mat-cell sur flex: 0 0 200px; au lieu de flex: 1 avec le nième enfant.

.mat-cell:nth-child(2), .mat-header-cell:nth-child(2) {
    flex: 0 0 200px;
}
4
Mark Cutajar

Je viens d'utiliser:

th:nth-child(4) {
    width: 10%;
}

Remplacez 4 par la position de l'en-tête pour laquelle vous devez ajuster la largeur. Les exemples de la documentation used:

td, th {
  width: 25%;
}

Alors je viens de le modifier pour obtenir ce que je voulais.

4
daniekpo

Vous pouvez également ajouter le style directement dans le balisage si vous le souhaitez:

<ng-container matColumnDef="Edit">
     <th mat-header-cell *matHeaderCellDef > Edit </th>
     <td mat-cell *matCellDef="let element" (click)="openModal()" style="width: 50px;"> <i class="fa fa-pencil" aria-hidden="true"></i> </td>
</ng-container>
0
Sen Alexandru

J'ai eu la solution très facile pour cela: définir une largeur différente pour la colonne dans la feuille de style en remplaçant la cellule et la cellule d'en-tête

Example: setting custom width for 1st and 5th column:-
.mat-cell:nth-child(1),
.mat-header-cell:nth-child(1),
{
flex: 0 0 5%;
}
.mat-cell:nth-child(5),
.mat-header-cell:nth-child(5),
{
flex: 0 0 10%;
}

github

0
reza.cse08

Vous pouvez également utiliser les sélecteurs d'éléments:

mat-header-cell:nth-child(1), mat-cell:nth-child(1) {
    flex: 0 0 64px;
}

Mais la réponse de jymdman est la méthode la plus recommandée dans la plupart des cas.

0
MA-Maddin