React-data-grid: Change the row background color

[vedran-maestral]

I am trying to change the bacgkround color based on an event that I perform on the cell.

For example, I select value inside the cell via dropdown to lets say 'Green', how do I color the complete row then?

Thank you for any input :)

[vedran-maestral]

This is rather strange:
If I use it liek this, then it works:
onRowUpdated={this.handleRowUpdated}
rowRenderer={RowRenderer}
onGridSort={this.handleGridSort}
columns={columns}
rowGetter={this.rowGetter}
enableCellSelect={true}
rowsCount={this.state.rows.length}
enableRowSelect='multi'
onRowSelect={this.onRowSelect}
onAddFilter={this.handleFilterChange}
toolbar={ minHeight={500}

Previously rowrenderer was the last on the list, and it never got called.
I am getting somewhere now. But the initial question remains... How do I change the row color based on the value that I change in the row?

Thanks :)

[raymondsze]

Same here.

[diogofcunha]

To change the row background color you need to use a RowRenderer.

That can be achieved by returning a row with an extraClasses prop in the render method, a little example:

<Row {...this.props} extraClasses="class-with-red-background" />

As you can check in here the row renderer receives the exact same props as a normal row, it means that you will have access to the row values inside the RowRenderer and you can also choose a colour based in a prop value without any problem.

The available props in rowRenderer are:

• key
• ref
• idx
• row
• height
• columns
• isSelected
• expandedRows
• cellMetaData
• subRowDetails

[smtheard]

@diogofcunha it should be noted that this strictly does not work. The background of the row is covered completely by cells and therefore setting the background color makes no change to the row. It's very surprising that there is no straight forward way to color the background of arbitrary rows however you want in this library, and no example of how to do them even if there is a workaround.

[Nublust]

@smtheard A workaround I have found which seems to be working for me is to target each cell in my css like:

.row-highlight>div>div{ background-color:#d3d3d3 !important; }

Where my custom row renderer looks like:

<div className="row-highlight"><ReactDataGrid.Row ref="row" {...this.props}/></div>

[smtheard]

@Nublust Thanks for the suggestion, I came to a very similar solution myself and I was able to even get it to work with highlighting on a per-group basis with some serious hacking.

[makis-spy]

This really should just add a hover class eh? Would be nice :)

[makis-spy]

.react-grid-Row {
&:hover {
background: pink !important;
}

}

.react-grid-Cell {
border:0;
background: none !important;

[flowjo-isaach]

@smtheard Could you share what you did to highlight groups of cells?

[smtheard]

@flowjo-isaach I had to override the rowgroup renderer and use a global variable that ticks up in each rowgroup render function. I use that variable in the row renderer to determine the color of the style.

There is a hidden identifier for rowgroups I discovered later on the react-data-grid row elements called "name" you may be able to use this instead and avoid the global variable.

Good luck! It was painful for me, lol.

[terolepisto]

Is there any better solution for this?

Maybe a improvement? Like row and cell className-attribute perhaps that would be passed to component?

[terolepisto]

Ok, after a year used the RowRenderer, Google Chrome updated and lost horizontal scrollbar. Updated React-Data-Grid to newset 5.0.4-2.

Now RowRenderer won't work with Locked cells cause setScrollLeft don't work anymore.