rowClassName only applying style to every other row

[slothdude893]

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

Code: Select all

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

I wish to apply a background color to the entire row if active property is false. Currently I have this

Code: Select all

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?

[slothdude893]

Solved, needed to override the css like this

Code: Select all

.ui-datatable tbody > tr.ui-widget-content.greyed { 
		background-color: #808080;
}