md-table - Comment mettre à jour la largeur des colonnes ?

Question

J'ai commencé à utiliser le md-table pour mon projet, et je veux une largeur de colonne fixe. Actuellement, la largeur de toutes les colonnes est divisée en taille égale.

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

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

Answer 1

Lorsque Material crée le tableau, 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 y 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 dans le 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 colonnes.

Answer 2

Pour l'instant, elle n'a pas encore été exposée au niveau de l'API. Cependant, vous pouvez le faire 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>

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

.customWidthClass{
   flex: 0 0 75px;
}

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

Puisque md-table utilise flex nous devons donner une largeur fixe en mode flex. Ceci explique simplement -

0 = pas de croissance (raccourci pour flex-grow)

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

75px = commencer à 75px (raccourci pour flex-basis)

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

Answer 3

Si vous utilisez angulaire/flex-layout dans votre projet, vous pouvez définir la colonne avec en ajoutant fxFlex à 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 un CSS personnalisé pour obtenir le même résultat :

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

Answer 4

Regarde ça : https://github.com/angular/material2/issues/5808

Puisque material2 utilise la mise en page flex, vous pouvez simplement définir fxFlex="40" (ou la valeur que vous souhaitez pour fxFlex) à md-cell y md-header-cell .

Answer 5

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

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

De plus, si vous avez une colonne "principale" dont vous voulez qu'elle occupe toujours une certaine quantité d'espace sur différents appareils, j'ai trouvé ce qui suit très pratique pour adopter la largeur disponible du conteneur d'une manière plus réactive (cela oblige les autres colonnes à utiliser l'espace restant de manière égale) :

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