rowClassName only applying style to every other row

UI Components for React
Post Reply
slothdude893
Posts: 3
Joined: 15 Apr 2019, 22:32

15 Apr 2019, 22:48

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)
Image

Any ideas on what I should try?

slothdude893
Posts: 3
Joined: 15 Apr 2019, 22:32

22 Apr 2019, 17:59

Solved, needed to override the css like this

Code: Select all

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

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests