PrimeNg Datatable style a cell

Question

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>

score 2 · Answer 1 · answered Aug 24 '17 at 15:36

2

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">

answered Aug 24 '17 at 15:36

Nimmi

1,997
2
12
20

1

Is this valid, how can we use "bodyStyle" ? – Dharam Mali Dec 19 '17 at 09:38

score 1 · Answer 2 · answered Feb 13 '19 at 15:13

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

PrimeNg Datatable style a cell

2 Answers2