如何在 ag-grid table react js 中使用 cellRenderer

Question

我使用 React js ag-grid 方法创建了 table 之后我只是将我的 json 数据传递给 React table.

我的json文件数据：

{
  "posts": [{
    "cam1": " 3 persons, 1 car, 1 bottle, 2 chairs, 1 tv",
    "cam2": " 1 person",
    "date": "Tue, 19 April 12:16:29 ",
    "status": "High"
  }, {
    "cam1": " 3 persons, 2 chairs, 1 tv",
    "cam2": " 1 person",
    "date": "Tue, 19 April 12:16:32 ",
    "status": "Low"
  }, {
    "cam1": " 4 persons, 1 bottle, 2 chairs, 1 tv",
    "cam2": " 1 person",
    "date": "Tue, 19 April 12:16:35 ",
    "status": "Medium"
  }]
}

我刚刚将此 json 数据传递给 React table。将数据传递给 table

后

现在我希望在某些条件下用颜色编码突出显示状态。

如果状态为高，则用红色突出显示，如果状态为中，则用黄色突出显示，否则用绿色突出显示。

预期输出模型如下：

我如何使用 React js ag-grid table 方法来做到这一点。更多代码参考 Click Here

Answer 1

您正在寻找 cellRenderer。

您可以创建一个组件StatusCellComponent并应用所有需要的样式

在这里你可以找到一些例子：https://www.ag-grid.com/react-data-grid/component-cell-renderer/#complex-cell-renderer-example

在这里您可以找到更多信息：https://www.ag-grid.com/react-data-grid/component-cell-renderer/

如何在 ag-grid table react js 中使用 cellRenderer

How to use cellRenderer in ag-grid table react js

javascript

css

datatable

json

reactjs