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.

Where did you find RowStyleClass? I don't see it in the datatable's list of attributes on priming's site. — John Baird, Nov 10 '16 at 13:43
I found RowStyleClass using Google. It might be for an older version of PrimeNG. Their links to samples aren't working, so their website is not very helpful. — Paul Meems, Nov 10 '16 at 14:17

Jon Onstott · Answer 1 · 2016-12-04T01:51:08.470

24

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.

edited Dec 04 '16 at 01:51

answered Nov 21 '16 at 00:28

Jon Onstott

13,499
16
80
133

I also saw this commit https://github.com/primefaces/primeng/issues/1296 suggesting a different syntax. This one looks better because my row needs to be colored based on the row data. Not a global object like your `user`. I just update using `npm update --save` but I still can't get it to work. – Paul Meems Nov 24 '16 at 14:29
I've just posted my latest code in my topic start, using the sample on GitHub. – Paul Meems Nov 29 '16 at 20:10
@PaulMeems Try upgrading to a more recent version of PrimeNG like 1.0.0 RC5 if you haven't already. This approach requires a more recent version. Your code sample looks good. – Jon Onstott Dec 04 '16 at 01:49
I've already updated to v1.0.1 but no luck. Do you have a working sample? – Paul Meems Dec 05 '16 at 07:32
@PaulMeems Ah okay, yeah that's a very up to date version of PrimeNG. The code that I mentioned in this answer is what I've been using, and works. I wonder if it would be possible to set breakpoints in the datatable class, https://github.com/primefaces/primeng/blob/master/components/datatable/datatable.ts. – Jon Onstott Dec 05 '16 at 18:30
I am interested in changing the color of a row that is selected. I have a checkbox that allows the row to be selected. How do I change from the standard blue to a gray. – Michael JDI Mar 01 '17 at 21:42

score 1 · Answer 2 · answered Dec 18 '16 at 06:38

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.

Thanks you for finding the problem. I've subscribed to your issue and will wait for the solution. When your issue is resolved I will mark your post as the answer. — Paul Meems, Dec 18 '16 at 10:10
Looks like the fix was merged in: https://github.com/primefaces/primeng/pull/1614 . Not sure how quickly a new release will go out. — Benjamin, Dec 20 '16 at 12:51

score -7 · Accepted Answer · answered Jan 05 '17 at 11:24

-7

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

answered Jan 05 '17 at 11:24

Paul Meems

3,002
4
35
66

3

it is still a legitimate 'how-to' question. no need to close – Simon_Weaver Jun 20 '17 at 02:48

How to add style class to p-dataTable row

3 Answers3

Linked