custom cell reference in ag-grid in react js

Question

i created ag-grid table using react js after that passing json data to table after passing data table look like this

Now i want to customize status column by some different color if status high use red if low use green else use yellow

Final output i want like this

How resolve this using react js for more code reference click here

Answer 1

You can conditionally apply styles to cells based on their values. Here are some ways taken from this doc example on styling cells.

{
        
        field: 'status',
        cellClass: params => {
            return params.value === 'high' 
                     ? 'my-class-red' 
                     : params.value === 'low' 
                        ? 'my-class-green'
                        :  'my-class-yellow';
        },
    },