React Virtualized Table change selected row color - react-virtualized

Question

I am new to react virtualized concepts and am using a RV Table decorated with Autosizer to display contents from my list. Currently, when I select a row, I dispatch an action to react-redux to update the state in store based on selected row data. This seems to work. I would also like to add a visual cue of "row selected" like a background color or text color and I have not been able to achieve that.
I tried using the rowRenderer function to set style but it does not seem to be working. Can someone share a simple example of how I can change the selected row on a RV table? When I select it once, I want the color changed and reselecting the same row should undo the color background.

Answer 1

Below is the working example to highlight row on selection. To deselect highlighted row, you can tweak logic in rowStyleFormat function
import React from 'react'
import { Column, Table } from "react-virtualized";
import "react-virtualized/styles.css";
class TestTable extends React.Component {
constructor(props) {
super(props);
this.state = {
index: -1,
data: [
{ 'rank': 1, 'player': 'Michael Jordan', 'points': 30 },
{ 'rank': 2, 'player': 'Wilt Chamberlain', 'points': 30 },
{ 'rank': 3, 'player': 'Bill Russell', 'points': 15 },
]
}
}
handleRowSelect(event) {
this.setState(
{
index: event.index
}
)
}
rowStyleFormat(row) {
if (row.index < 0) return;
if (this.state.index === row.index) {
return {
backgroundColor: '#b7b9bd',
color: '#333'
};
}
return {
backgroundColor: '#fff',
color: '#333'
};
}
render() {
return (
<Table width={500} height={300} headerHeight={20} rowHeight={30}
rowCount={this.state.data.length} rowGetter={({ index }) => this.state.data[index]}
onRowClick={this.handleRowSelect.bind(this)}
rowStyle={this.rowStyleFormat.bind(this)}
>
<Column width={100} label='Rank' dataKey='rank' />
<Column width={150} label='Player' dataKey='player' />
<Column width={150} label='Points' dataKey='points' />
</Table>
);
}
}
export default TestTable;