Reputation: 43
i created table using react js ag-grid method after that i just pass my json data into react table.
My json file data :
{
"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. 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 :
How can i do this with react js ag-grid table method. for more code reference Click Here
Upvotes: 0
Views: 1234
Reputation: 2510
you are looking for cellRenderer
.
You can create one component StatusCellComponent
and apply all styles that needed
here you can find some examples: 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/
Upvotes: 1