CODEWITHSUNDEEP
javascriptcssreactjsjsondatatable
Hariprasath Lakshmanan
Hariprasath Lakshmanan

Reputation: 43

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.

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 react table like this

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 : enter image description here

How can i do this with react js ag-grid table method. for more code reference Click Here

Upvotes: 0

Views: 1234

Answers (1)

shutsman
shutsman

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

Related Questions