PrimeNg Datatable style a cell

问题

I'm using the PrimeNg Datatable as follows and I need to put a specific css class to each cell I'm able to pass the css class as [class]="cssClassName" coming from the model but the class is only applied when the control is focused. Is it there a way to apply the class without the need of focus the control?

Thanks in advance.

The example is like it appears on the documentation

<p-dataTable [value]="cars" [editable]="true" resizableColumns="true">
    <p-column *ngFor="let col of cols,  let c = index" [field]="col.Field" [header]="col.Text" [editable]="true" > 
    <ng-template let-col let-car="rowData" pTemplate="editor" let-r="rowIndex">
      <div [class]="cssClassName">
         <input [(ngModel)]="car[col.field]" appendTo="body" [class]="cssClassName">
      </div>
    </ng-template>

    </p-column>
</p-dataTable>

回答1:

You can apply styleClass on so that it will reflect on your cell.

<p-column [style]="{'text-align':'left'}" field="Field Name" header="Header" [sortable]="true" styleClass="test">

回答2:

You can apply styleClass per row and per cell based on certain conditions

 <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr [ngClass]="rowData.year > 2010 ? 'new-car' : null">
        <td *ngFor="let col of columns" [ngClass]="rowData[col.field] <= 2010 ? 'old-car' : null">
            {{rowData[col.field]}}
        </td>
    </tr>
</ng-template>

You can find more information at https://www.primefaces.org/primeng/#/table/style

来源：https://stackoverflow.com/questions/45785843/primeng-datatable-style-a-cell

标签

css

angular

primeng

primeng-datatable