PrimeNG DataTable: modifier la classe/le style d'une cellule

Question

Comment puis-je ajouter une classe à une cellule en fonction de la valeur du champ?

<p-dataTable [value]="invoices" tableStyleClass="table-invoices"> 
    <p-column field="status" header="Status" styleClass="mini status"> 
     <ng-template pTemplate="body" let-col let-inv="rowData"> 
      {{inv.status}} 
     </ng-template> 
    </p-column> 
</p-dataTable> 

Je sais comment ajouter la classe à toutes les cellules dans une colonne, mais je dois donner une classe de cellules (<td>) individuellement, en fonction de la valeur stockée dans status, de sorte que certaines cellules dans une colonne aura la classe et d'autres dans la même colonne ne le seront pas.

Plunker

Edité: Je sais comment donner une classe à un élément HTML à l'intérieur du <td>, mais je veux savoir s'il est possible de donner une classe à l'<td> lui-même.

Answer 1

Vous pouvez définir le style d'un modèle:

<p-dataTable [value]="invoices" tableStyleClass="table-invoices"> 
    <p-column field="status" header="Status" styleClass="mini {{rowData}}" > 
     <ng-template pTemplate="body" let-col let-inv="rowData"> 
      <div [class.decorated]="inv.status == 1">{{inv.status}}</div> 
     </ng-template> 
    </p-column> 
</p-dataTable> 

plunkr

Answer 2

Pour le style de la cellule entière vous devrez trouver l'élément TD qui héberge votre ng-modèle. Pour ce faire, je mis en œuvre une directive:

import { Directive, ElementRef, Renderer, Input, OnInit } from '@angular/core'; 

@Directive({ 
    selector: '[cellFormatting]' 
}) 
export class CellFormattingDirective { 
    @Input() cellFormatting: any; 

    constructor(private el: ElementRef, renderer: Renderer) { 

    } 

    ngOnInit() { 
     let target = this.el.nativeElement; 
     let td = target.closest('td'); 
     if (td) { 
      //apply some conditions here using data.cellFormatting 
      td.style.backgroundColor = 'darkorange'; 
      td.style.color = 'white'; 
     } 
    } 
} 

Le Je l'ai utilisé dans le balisage comme:

<ng-template let-col let-data="rowData" pTemplate="body"> 
    <div [id]="col.field" class="cell-content" [cellFormatting]="data"> 
     <div [innerHTML]="data[col.field]" class="center-parent-screen"></div> 
    </div> 
</ng-template> 

Une fois que vous avez une référence à l'élément TD, vous pouvez appliquer des transformations CSS que vous voulez . Cette approche ne ressemble pas à la manière "angulaire", mais actuellement, c'est la seule façon de le faire.