web-dev-qa-db-fra.com

Angular Formatage des cellules du tableau des matériaux

J'utilise angular pour afficher les données et lier de manière dyammique l'en-tête et les données du tableau. Existe-t-il un moyen de formater dynamiquement le contenu des cellules de la colonne particulière?.

Par exemple, comment puis-je formater la valeur de la colonne de montant alignée à droite?

Mon code est comme ci-dessous:

<table mat-table [dataSource]="dataSource" class="" style="width: 100%;">

      <ng-container [matColumnDef]="col" *ngFor="let col of displayedColumns; let i = index">
        <th *matHeaderCellDef> {{displayedFields[i].name}}</th>
        <td mat-cell *matCellDef="let element"> {{ element[col] }} </td>
      </ng-container> 

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>

Et mes données sont comme

[
  {
    "REFERENCE_ID": "ENT201810637610",
    "PRODUCT_TYPE": "IMPS",
    "CUSTOMER_REFERENCE": "CUS12123",
    "BENEFICIARY_NAME": "arun",
    "DEBIT_ACCOUNT": "100002258062",
    "AMOUNT": 342234,
    "STAGE_CODE": "FULLFILMENT",
    "STATUS_CODE": "NEW"
  },
  {
    "REFERENCE_ID": "ENT201808820426",
    "PRODUCT_TYPE": "IMPS",
    "CUSTOMER_REFERENCE": "12121",
    "BENEFICIARY_NAME": "Arun",
    "DEBIT_ACCOUNT": "32423424",
    "AMOUNT": 700,
    "STAGE_CODE": "INITIATION",
    "STATUS_CODE": "NEW"
  }
]
javascriptangularangular-materialangular-material-table
4
Tom

La meilleure solution consiste à utiliser le sélecteur en CSS comme ci-dessous, où 'nom_colonne' est le nom que vous fournissez dans 'matColumnDef'

.mat-column-'column_name'{
   //your custom css 
   text-align: right;
 }

si votre colonne 'matColumnDef' est 'montant'

.mat-column-amount{
   //your custom css 
   text-align: right;
 }
3
Akhi Akl

Si vous souhaitez styliser des cellules sur un mat-table vous pouvez cibler chaque élément à l'intérieur en utilisant le ::ng-deep Sélecteur CSS comme celui-ci:

::ng-deep th.mat-header-cell{
    width: 140px;
    min-width: 140px;
}

Vous pouvez aussi utiliser [ngClass] pour appliquer des classes à une cellule en fonction d'une condition comme celle-ci:

 <ng-container matColumnDef="outcome">
  <th mat-header-cell *matHeaderCellDef mat-sort-header class="border"> Outcome </th>
  <td mat-cell *matCellDef="let element" class="font-weight-normal text-center text-capitalize"
  [ngClass]="[element.outcome == '' ? 'not-provided' : 'not-provided',
            element.outcome == 'stopped' ? 'provided-stoped' : 'not-provided']">{{element.outcome == '' ? "not provided" : "provided"}}</span> </td>
</ng-container>

et vous définissez simplement les classes dans votre fichier CSS

3
IvanS95

Lors de notre projet au travail, nous utilisons beaucoup de tables mates. Je n'ai jamais eu de chance de créer un tableau vraiment personnalisé en ngFor-ing sur le <ng-container>. Presque chacun de nos tableaux est construit en définissant individuellement chaque <ng-container> pour chaque colonne.

<ng-container matColumnDef="code">
    <th mat-header-cell *matHeaderCellDef> Employee Code </th>
    <td mat-cell *matCellDef="let employee"> {{ employee.code }} </td>
</ng-container>

<ng-container matColumnDef="description">
    <th mat-header-cell *matHeaderCellDef> Status </th>
    <td mat-cell *matCellDef="let employee"> 
          {{ employee.status?.description }} 
    </td>
</ng-container>

<ng-container matColumnDef="salary">
    <th mat-header-cell *matHeaderCellDef> Salary </th>
    <td mat-cell *matCellDef="let employee"> {{ employee.salary | currency}} </td>
</ng-container>

L'avantage de ceci est que vous pouvez définir chaque colonne avec les styles que vous souhaitez, ainsi que ajouter des options plus spécifiques à la propriété telles que les tuyaux et/ou l'opérateur elvis.

2
Jesse

Vous pouvez définir dynamiquement l'alignement des colonnes à droite en ajoutant quelque chose comme, [align]="expression ? 'right' : ''" à la <td> élément, donc pour votre code, cela ressemblerait à:

<table mat-table [dataSource]="dataSource" class="" style="width: 100%;">

      <ng-container [matColumnDef]="col" *ngFor="let col of displayedColumns; let i = index">
        <th *matHeaderCellDef> {{displayedFields[i].name}}</th>
        <td mat-cell *matCellDef="let element" [align]="col === 'AMOUNT' ? 'right' : ''"> {{ element[col] }} </td>
      </ng-container> 

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
0
alisonmsmith