Angular : comment ajuster la largeur d'une colonne de mat-table en fonction du contenu ?

Lorsque vous développez avec le framework Angular, vous pouvez utiliser des balises spécifiques au framework. Celles-ci permettent par exemple d'ajouter de la logique, comme des conditions ou des boucles, dans du HTML. Elles peuvent également remplir automatiquement des éléments, comme des tables ou des formulaires, avec les données récupérées par le composant. L'attribut "mat-table" permet de créer une table à partir d'une série d'enregistrements. À l'intérieur, les colonnes de la table sont définies dans la balise "ng-container" qui contient en premier la colonne d'entête et ensuite la cellule contenant les données. Par défaut, les largeurs sont gérées directement par le framework, mais il est possible de faire des ajustements si vous le souhaitez.

Lorsque vous définissez une colonne, vous devez renseigner l'attribut "matColumnDef". Cet attribut va permettre d'identifier la colonne.

<table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="couleur">
    <th mat-header-cell *matHeaderCellDef>Couleur</th>
    <td mat-cell *matCellDef="let voiture">{{ voiture.couleur }} )</td>
  </ng-container>
</table>

Cet identifiant va permettre au framework d'attribuer une classe spécifique à la colonne. Il s'agit du libellé "mat-column-" suivi de l'identifiant. Dans notre exemple, ce sera donc "mat-column-couleur". Avec cette classe, vous pouvez donc utiliser du CSS pour modifier la largeur de la colonne. Vous devrez spécifier les modifications avec le mot-clé "!important" dans votre feuille de style, pour que ces styles soient prioritaires par rapport à ceux définis par le framework.

.mat-column-couleur {
  word-wrap: break-word !important;
  white-space: unset !important;
  flex: 0 0 8% !important;
  width: 10% !important;
}

Si vous utilisez le préprocesseur SCSS pour créer vos styles, voici un code qui va vous permettre de modifier la largeur et la couleur d'une colonne. Elle utilise pour cela les propriétés "flex" et "min-width" pour la largeur, avec "color" pour la couleur.

@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');
                }
            }  
        }
    }
}

Pour utiliser ce code, vous n'avez plus qu'à inclure la directive "@include" et spécifier ensuite l'identifiant de la colonne avec les propriétés que vous souhaitez modifier.

@include mat-table-columns((
    couleur: (width: 10%, color: dimgray),
));