Angular2 PrimeNG Conditional row Formatting

Question

I have an Angular2 app using PrimeNG components. I am attempting to make it so that when a field is of a certain value, the row in a DataTable is coloured a particular colour. I have another field which contains a colour value to use for the row highlight but cannot work out how to get it to work.

My Model is as follows (very simplified):

export class RepackRequest{
AdhereToLeadTime:   boolean;
LeadTimeRemaining: string;

constructor() {
    var today = new Date();
    if(this.AdhereToLeadTime){
        var difference = today.getTime() - this.StartDate.getTime(); 
        if(difference >= 3 && difference <= 4){
            this.LeadTimeRemaining = "orange";
        }
        else if(difference >= 5){
            this.LeadTimeRemaining = "red";
        }
    }
    else {
        this.LeadTimeRemaining = 'white';
    }
 }
}

So basically if it adhered to the lead time of 5 days, it changes colour depending on how close to the lead time it is.

In my template i then have the following:

<p-dataTable    [value]="approvalRepacks" 
                            [rows]="10" 
                            [paginator]="true" 
                            [pageLinks]="5" 
                            [rowsPerPageOptions]="[5,10,20]"
                            selectionMode="single"
                            [(selection)]="selectedRepack"
                            (onRowSelect)="onSelect()"
                            [globalFilter]="na">
                <header>
                    <div style="text-align:center;">
                        <button pButton type="button" icon="fa-plus" iconPos="left" label="Create New Request" (click)="addNew()"></button>
                    </div>
                </header>
                <p-column field="DateRequested" header="Date Requested" sortable="true">
                    <template let-col let-rep="rowData" pTemplate type="body">
                        <span [style.background]="{{rep.LeadTimeRemaining}}">{{rep[col.field] | date:'dd/MM/yyyy'}}</span>
                    </template>
                </p-column>
                <p-column field="OrderNum"          header="Order No"           sortable="true" styleClass="wordBreak"></p-column>
                <p-column field="Customer"          header="Customer"           sortable="true"></p-column>
                <p-column field="FromItem"          header="Repack From"        sortable="true" styleClass="wordBreak"></p-column>
                <p-column field="ToItem"            header="Repack To"          sortable="true" styleClass="wordBreak"></p-column>
                <p-column field="FromWarehouse"     header="From Whse"          sortable="true"></p-column>
                <p-column field="FromLocation"      header="From Bin"           sortable="true"></p-column>
                <p-column field="ToWarehouse"       header="To Whse"          sortable="true"></p-column>
                <p-column field="ToLocation"        header="To Bin"           sortable="true"></p-column>
                <p-column field="Quantity"          header="Qty"                sortable="true"></p-column>
                <p-column field="RequestedBy"       header="Requested By"       sortable="true" styleClass="wordBreak"></p-column>
                <p-column header="Actions">
                    <template let-col let-rep="rowData" pTemplate type="body">
                        <button pButton type="button" icon="fa-check" label="Approve" (click)="approve(rep.ID)"></button>
                    </template>
                </p-column>
            </p-dataTable>

As you can see i have [style.background]="{{rep.LeadTimeRemaining}}" to attempt to set the colour of the column.

I guess this is the wrong way to go about it as its setting it just for that column and id need the same on every column.

Can anyone help with this i cannot find any information anywhere regarding it.

Many Thanks

EDIT

Using the following on every column highlights it to a point however it is very unsightly as you can see below as it just colours the div rather than the td or tr.

<template let-col let-rep="rowData" pTemplate type="body">
    <div [style.background]="rep.LeadTimeRemaining" style="margin:-50px;">
         <span>{{rep[col.field]}}</span>
    </div>
</template>

Answer 1

You can highlight row in datatable using rowStyleClass attribute. You should pass function to this attribute. The function should return class name which will be applied on table row.

Template:

<p-dataTable [rowStyleClass]="highlightRow" ...>

Component code:

highlightRow(rowData: any, rowIndex: number) {
    return rowData.LeadTimeRemaining + '-highlighting';
}

CSS:

.red-highlighting { background-color: red; }
.white-highlighting { background-color: white; }
.orange-highlighting { background-color: orange; }

Answer 2

The reason for the surrounding white space around the div is because of the padding that primeng datatables applies to the parent td. To fill the surrounding whitespace, you can set the padding of the parent p-column to 0 (using styleClass) and then add padding to the div inside the datatable parent td (see example below).

The main reason to take this approach would be if you wanted to change the background color of only certain cells, based on the current row's data. If you wanted to change the background color of the entire row based on its data using this approach, you'd have to apply these styles on each p-column. If coloring the entire row is your intent, see here for a simpler approach.

CSS:

.padding-none {
  padding: 0 !important;
}

/** (optional) still pad table header and footer on datatables with columns set to .padding-none */
.ui-datatable thead th.padding-none, .ui-datatable tfoot td.padding-none,
.ui-datatable tfoot th.padding-none {
  /** set to whatever your default datatable td padding is */
  padding: .25em .5em !important;
}

.ui-datatable tbody td.padding-none div {
  /** set to whatever your default datatable td padding is */
  padding: .25em .5em;
}

Template:

<p-column field="..." header="..." styleClass="padding-none" sortable="true">
  <template let-col let-rep="rowData" pTemplate>
    <div [style.background]="rep.LeadTimeRemaining">
      {{rep[col.field]}}
    </div>
  </template>
</p-column>

Answer 3

Please try using this way:

[style]="{'background':rep.LeadTimeRemaining}"

instead of:

[style.background]="{{rep.LeadTimeRemaining}}"