Trying to highlight cell in React-data-grid - reactjs

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

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.

Answer 2

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 3

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

Answer 4

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

Answer 5

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