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

score 5 · Answer 1 · answered Jan 08 '18 at 20:03

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.

score 2 · Answer 2 · answered Feb 25 '19 at 10:33

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.

score 1 · Answer 3 · answered Sep 07 '19 at 02:29

1

both of the answers here seem to apply highlighting to all of the cells. How would I go about selectively highlighting cells perhaps by specifying class names

answered Sep 07 '19 at 02:29

reactor

1,722
1
14
34

score 1 · Answer 4 · answered Feb 10 '23 at 18:47

Set the root div style to -8 margin left and right, and 8 padding left and right

return (
   <div style={{
     background: '#f2f9de', 
     marginLeft: -8, 
     marginRight: -8, 
     paddingLeft: 8, 
     paddingRight: 8}}>
    {this.props.value}
   </div>
 );

score 0 · Answer 5 · answered Dec 08 '21 at 20:16

Try loosing the formatter altogether, in this simple example. Create a class in the css file. Set the cellClass equal to the class you just created. The background of the column should be fully colored. Both the value and the padding.

My environment:

"react": "^17.0.2",
"react-data-grid": "^7.0.0-beta.7",

app.css

.green {
       background-color: green;
}

app.js

this._columns.push({
  key:  i,
  name: "blah " + i,
  sortable: true,
  resizable: true,
  cellClass: 'green`

})

Trying to highlight cell in React-data-grid

5 Answers5