Apply rowStyleClass to every row in PrimeReact DataTable

Question

I have data and each row/user is formatted something like this:

{
  first: <string>
  active: <bool>
}

I wish to apply a background color to the entire row if active property is false. Currently I have this, to try to get style applied to every row

rowClassName = (rowData) => {
    return {'greyed' : true}; //will be {'greyed': !rowData.active} but this is for demonstration
}

<DataTable value={this.props.users.toJS()} //in render
    selectionMode="single"
    selection={user}
    onSelectionChange={this.props.dispatch.editAccount}
    rowClassName={this.rowClassName}
>
    <Column field="first" header="First" filter={true}/>
</DataTable>

.greyed{ //in css
    background-color: red;
}

which is only applying the style to every other row (see picture)

Any ideas on what I should try? i posted this question on the primeFaces forum 3 days ago and never got a response: https://forum.primefaces.org/viewtopic.php?f=57&t=58605

user1760150 user1760150 · Accepted Answer · 2020-03-11T20:30:27

I just ran into this problem while trying out PrimeReact. My issue turned out to be that the default selector that sets the row background was more specific than my own.

This is the default:

body .p-datatable .p-datatable-tbody > tr:nth-child(even) {
    background-color: #f9f9f9;
}

so just having

.specialRowColor { background-color: 'blue' }

is not specific enough to override the default. Instead I needed to do this in my css:

.p-datatable .p-datatable-tbody .specialRowColor {
    background-color: blue;
}

Apply rowStyleClass to every row in PrimeReact DataTable

2 Answers