AG Grid format cell to require comment when other cell is not 0

I have a Streamlit web app which uses an AG Grid table to display data. As part of the app the user has to update a forecast. The forecast is then compared to the budget. If there is a variance, then the user has to input a comment. To indicate this, I would like to highlight the Comment cell for the given row in red given various criteria:

• The comment is empty but there is a variance
• The comment hasn’t changed, but the variance has changed (the forecast is updated)

Also I would like to indicate that the comment has not been saved, but that the user updated the comment

In my JS code the formatting works, BUT only after I try and edit the comment. The variance calculation renders immediately after updating the forecast, but the comment cell’s formatting does not update.

Below you can see that the variance is there. But only after editing the comment, entering nothing and selecting another cell the formatting updates.

I have thought about using a ValueFormatter, but can’t seem to make it work.

// Logic for requiring a forecast comment
if (params.colDef.field === 'forecast_comment' && params.data.hierarchy_level ===4) {{
    if (!(params.data.forecast_comment === params.data.unchanged_comment)) {{
    styles.backgroundColor="{comment_required_unsaved_background}";
    }} 
    else if (params.data['annual_budget'] !== params.data['annual_forecast']
            && !params.data.forecast_comment) {{
    styles.backgroundColor="{comment_required_empty_background}";
    }}
    else if (params.data['annual_budget'] !== params.data['annual_forecast']
            && params.data.annual_budget - params.data.annual_forecast !== params.data.forecast_variance) {{
    styles.backgroundColor="{comment_required_unsaved_background}";
    }}

}}

Here is how I configure my column:

    gb.configure_column("forecast_comment", 
                        header_name="Forecast Comment", 
                        cellStyle=jscode_comments, 
                        cellClass="custom-cell-text", 
                        wrapText=True, editable=make_forecast_editable, 
                        cellEditorPopup=True, 
                        cellEditor="agLargeTextCellEditor", 
                        cellEditorParams={'maxLength': 200}, minWidth=300, 
                        maxWidth=800)

You need to sign in to view this answers