How to use cellRenderer in ag-grid table react js

Question

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

Answer 1

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/