[英]How to use cellRenderer in ag-grid table react js
i created table using react js ag-grid method after that i just pass my json data into react table.我使用 react js ag-grid 方法创建了表,之后我只是将我的 json 数据传递到 react 表中。
My json file data:我的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"
}]
}
I just passed this json data into react table.我刚刚将这个 json 数据传递到反应表中。 after passing the data to table
将数据传递到表后
Now i expected to highlight status with color coding with some conditions.现在我希望在某些条件下用颜色编码突出显示状态。
if status is high highlight with red, if status is medium highlight with yellow, else highlight with green.如果状态为高,则用红色突出显示,如果状态为中,则用黄色突出显示,否则用绿色突出显示。
Expected output model like this:预期 output model 像这样:
How can i do this with react js ag-grid table method.我怎样才能用反应 js ag-grid 表方法来做到这一点。 for more code reference Click Here
更多代码参考点击这里
you are looking for cellRenderer
.您正在寻找
cellRenderer
。
You can create one component StatusCellComponent
and apply all styles that needed您可以创建一个组件
StatusCellComponent
并应用所有需要的 styles
here you can find some examples: 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/#complex-cell-renderer-example
here you can find more info: https://www.ag-grid.com/react-data-grid/component-cell-renderer/在这里你可以找到更多信息: https://www.ag-grid.com/react-data-grid/component-cell-renderer/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.