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

Answer 1

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 2

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 3

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