How to add style class to p-dataTable row

Question

We're using p-dataTable from PrimeNG 1.0.0-beta.16

I want to add a style to the row when a value is true. I figured it out how to do this with the cell, but I need the whole row the change its background.

<p-dataTable [hidden]="loading" [value]="timePeriods" scrollable="true" scrollHeight="400px" rowStyleClass="missingPeriod">
    <p-column field="StartDate" header="Begindatum" sortable="false">
        <template let-col let-timePeriod="rowData" pTemplate type="body">
            <span [class.missingPeriod]="!timePeriod.IsNext">{{timePeriod.StartDate | date: 'dd-MM yyyy'}}</span>
        </template>
    </p-column>
    <p-column field="EndDate" header="Einddatum" sortable="false">
        <template let-col let-timePeriod="rowData" pTemplate type="body">
            <span>{{timePeriod.EndDate | date: 'dd-MM yyyy'}}</span> 
        </template>
    </p-column>
</p-dataTable>

<span [class.missingPeriod]="!timePeriod.IsNext"> is working but rowStyleClass="missingPeriod" is not.

Please advice.

Updated syntax:

Updated to v1.0.1

<p-dataTable [hidden]="loading" [rowStyleClass]="customRowClass" [value]="timePeriods" scrollable="true" scrollHeight="400px">
    <p-column field="StartDate" header="Begindatum" sortable="false">
        <template let-col let-timePeriod="rowData" pTemplate type="body">
            <span [class.missingPeriod]="!timePeriod.IsNext">{{timePeriod.StartDate | date: 'dd-MM yyyy'}}</span>
        </template>
    </p-column>
    <p-column field="EndDate" header="Einddatum" sortable="false">
        <template let-col let-timePeriod="rowData" pTemplate type="body">
            <span>{{timePeriod.EndDate | date: 'dd-MM yyyy'}}</span>
        </template>
    </p-column>
</p-dataTable>

And the typescript:

public customRowClass(rowData, rowIndex): string {
    console.log("In customRowClass");
    console.log(rowData);
    console.log(rowIndex);
    return "";
}

Nothing inside customRowClass is logged. It seems to me this method isn't called.

Answer 1

rowStyleClass works a bit differently than you'd think; it takes a function as it's input, that returns a string (the CSS class name). It's listed in the PrimeNG DataTable docs.

In my HTML I've got:

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

In the component:

lookupRowStyleClass(rowData: User) {
    return rowData.accountDisabled ? 'disabled-account-row' : '';
}

In a global CSS file:

/* TODO: this should really be in the component's CSS file, but it doesn't seem to apply to the PrimeNG data table properly there */
.disabled-account-row {
    /* TODO: first try this without '!important', but you might need it */
    color: silver !important;
}

If this doesn't help, you need to upgrade to a more recent version. PrimeNG 1.0.0 RC5 is out as of November 2016.

Answer 2

It seems that scrollable="true" is the cause of this. When scrollable is set to true, a different template is used which doesn't have the binding for getRowStyleClass.

Here you can see the <tr> for a table that is not scrollable has a binding for getRowStyleClass: https://github.com/primefaces/primeng/blob/02e88b16e811a10d8842deb1f5e354bfb295d4c9/components/datatable/datatable.ts#L180

But the <tr> for the scrollable table does not have the binding: https://github.com/primefaces/primeng/blob/02e88b16e811a10d8842deb1f5e354bfb295d4c9/components/datatable/datatable.ts#L257

You can see both cases in this Plunkr and I have posted an issue here.

I don't see any reason the method can't be used on scrollable tables, so I have submitted a PR with a fix for this that you can monitor here.

Answer 3

In version 1.1.3 of PrimeNg this is fixed. So this question can be closed.