Trying to highlight cell in React-data-grid

Question

I am trying to render the background color on certain columns a certain color, in my react-data-grid (adazzle).

The problem is that I am getting this white padding around my cells :

How do I get rid of this white padding?

I simply followed the way the formatter was used in this example :

http://adazzle.github.io/react-data-grid/examples.html#/custom-formatters

My ColumnFormatter looks like this :

const ColumnFormatter = React.createClass({
  propTypes: {
    value: React.PropTypes.number.isRequired
  },

  render() {
    return (
      <div style={{background: '#f2f9de'}}>
        {this.props.value}
      </div>);
  }
});

And I set up my columns like this :

this._columns.push({
  key:  i,
  name: "blah " + i,
  sortable: true,
  resizable: true,
  formatter: ColumnFormatter
}) 

Answer 1

In the formatter you can give the background as you are giving right now but you can add a css like this in your custom css file:

#parentDivOfGrid div.react-grid-Row div.react-grid-Cell {
  padding-left: 0px ;
  padding-right: 0px;
  line-height: 2.1;
  text-align: center;
}

But your React data grid should be inside a div like this:

<div id="parentDivOfGrid">
  <ReactDataGrid
    ...
  />
</div>

You might want to play around with the line height value in css according to your grid.

Answer 2

this is a simple way but may not work exactly how you want...

somefile.js

<div id="someTableId">
  <ReactDataGrid
    ...
  />
</div>

somefile.css...

#someTableId div.react-grid-Row div.react-grid-Cell:nth-of-type(1),
#someTableId div.react-grid-Row div.react-grid-Cell:nth-of-type(2){
  background-color: #f2f9de;
}

also, i like to make things simple when i do a react-data-grid cell formatter (note: with the css way above you don't need the formatter but just to show how i simplify formatters or if you do it another way with a formatter)...

this._columns.push({
  key:  i,
  name: "blah " + i,
  sortable: true,
  resizable: true,
  formatter: (props)=>(<div style={{background: '#f2f9de'}}>{props.value}</div>;
}) 

and actually i would have done a className instead of style and used a css file but that just what i prefer.