9

我正在尝试在我的 react-data-grid (adazzle) 中将某些列的背景颜色渲染为某种颜色。

问题是我的细胞周围出现了这种白色填充物：

在此处输入图像描述

我如何摆脱这种白色填充？

我只是按照本示例中使用格式化程序的方式进行操作：

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

我的 ColumnFormatter 看起来像这样：

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

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

我这样设置我的专栏：

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

4 回答 4

5

这是一种简单的方法，但可能无法完全按照您的意愿工作......

一些文件.js

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

一些文件.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;
}

另外，当我做一个 react-data-grid 单元格格式化程序时，我喜欢让事情变得简单（注意：使用上面的 css 方式，你不需要格式化程序，而只是为了展示我如何简化格式化程序，或者如果你用另一种方式来做格式化程序）...

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

实际上我会做一个 className 而不是 style 并使用一个 css 文件，但这正是我更喜欢的。

于 2018-01-08T20:03:00.953 回答
2

在格式化程序中，您可以像现在一样提供背景，但您可以在自定义 css 文件中添加这样的 css：

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

但是你的 React 数据网格应该在这样的 div 中：

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

您可能想根据您的网格在 css 中使用行高值。

于 2019-02-25T10:33:48.700 回答
1

这里的两个答案似乎都适用于所有单元格。我将如何通过指定类名来选择性地突出显示单元格

于 2019-09-07T02:29:25.007 回答
0

在这个简单的示例中，尝试完全放弃格式化程序。在 css 文件中创建一个类。将 cellClass 设置为您刚刚创建的类。列的背景应该是全彩色的。值和填充。

我的环境：

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

应用程序.css

.green {
       background-color: green;
}

应用程序.js

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

})

于 2021-12-08T20:16:46.387 回答