var RowRenderer = React.createClass({
  setScrollLeft: function(scrollBy) {
    //if you want freeze columns to work, you need to make sure you implement this as apass through
    this.refs.row.setScrollLeft(scrollBy);
  },
 getRowStyle: function() {
   return {
     color: this.getRowBackground()
   }
 },
 getRowBackground: function() {
   return this.props.idx % 2 ?  'green' : 'blue'
 },
 render: function() {
   //here we are just changing the style
   //but we could replace this with anything we liked, cards, images, etc
   //usually though it will just be a matter of wrapping a div, and then calling back through to the grid
   return (<div style={this.getRowStyle()}><ReactDataGrid.Row ref="row" {...this.props}/></div>)
 }
});

var Example = React.createClass({
  render: function() {
    return  (<ReactDataGrid
    columns={columns}
    rowGetter={rowGetter}
    rowsCount={_rows.length}
    minHeight={500}
    rowRenderer={RowRenderer}/>);
  }
});
ReactDOM.render(<Example />, mountNode);

const mapStateToProps = (state) => ({
  foo: 'bar'
});

RowRenderer = connect(mapStateToProps)(RowRenderer);

var columns = [
{
  key: 'id',
  name: 'ID',
  locked : true
},
...
]