Comment modifier la hauteur des lignes d'un tableau Angular Material ?

Question

Dans mon application Angular (stylisée avec Angular Material), je dois afficher des données à l'aide d'un tableau Material.

Ce tableau comporte un en-tête collant, plusieurs lignes et un pied de page collant.

Par défaut, les rangs ont une hauteur de 62,5px et je voudrais remplacer cette valeur.

Comment puis-je y parvenir ?

J'ai essayé de remplacer le style css pour tr / tr.mat-row / tr.mat-header-row etc, sans succès. J'ai également essayé d'utiliser ::ng-deep.

De plus, la rangée de mon sticky footer a une hauteur de 48px, ce que je n'ai pas défini ! Quelqu'un sait-il ce qui se passe ?

Tableau d'image

Je suis en mesure de modifier la css de la ligne de pied de page avec ::ng-deep, j'ai mis le font-weight à en gras mais lorsque je définis l'attribut de hauteur, rien ne se passe.

::ng-deep tr.mat-footer-row {
border: 1px solid #e7e7e7;
font-weight: bold;
}

Answer 1

Essayez de l'ajouter dans votre fichier styles.scss.

tr.mat-footer-row {
        border: 1px solid #e7e7e7;
        font-weight: bold;
        height: #px !important;
}

Answer 2

Pour modifier la hauteur par défaut (48 px) dans mat-table, vous devez spécifier une classe pour chaque ligne dans le html, par exemple, lorsque vous définissez les lignes :

<tr mat-row *matRowDef="let row; columns: displayedCol;" class="table-row"></tr>

Vous pouvez ensuite modifier la hauteur en définissant dans votre fichier css principal la classe "table-row" avec une hauteur spécifique, par exemple :

.table-row {
  height: 30px !important;
}

Nous le prouvons avec angular 7 et angular material version 7.3.7.

Salutations

Answer 3

Dans le même ordre d'idées, j'ai eu un problème où les rangées de mon tableau des matelas étaient trop hautes, et j'ai essayé de définir la hauteur en CSS pour la réduire.

Il s'est avéré que le problème était que "min-height" avait été défini sur "mat-header-row" et "mat-row" quelque part dans le matériel (pas dans mon code source).

La solution était simple :

.mat-header-row, .mat-row {
  min-height: 30px;
}

Answer 4

Avec le matériel 5

 mat-row.mat-row.ng-star-inserted 
  { height: 32px !important; } 

.mat-row{ min-height: 30px; }

Answer 5

Vous pouvez également le définir dans le mat-row dans le modèle à une valeur exacte.

Utilisation de minHeight est meilleur que height car il remplace le css par défaut.

<mat-row
    matRipple
    *matRowDef="let row; columns: columnNames"
    routerLinkActive="highlighted"
    [style.minHeight.px]="100">
</mat-row>