Python Dash AG Grid to show colored circles in table

Dash Python
1

I am using dash ag grid to create an output table with some data. In my database I have a column called “Task Health” which shows colored circles like below:

image

I want to include the “Task Health” column in my AG grid table however it is showing the values as text “Yellow”, “Red”, “Gray”, “Green”, “Red”.

I want to have them instead of displaying the the text to display the colored circles.

Here is my code:

@callback(
    Output("tasks-activity", "columnDefs"),
    Output("tasks-activity", "rowData"),
    Input("submit-activity", "n_clicks"),
    State("select-location", "value"),
    State("select-manager-activity", "value"),
    Input('refresh-button', 'n_clicks')
)
def table_activity(n_clicks_submit, location, manager, n_clicks_refresh):
    # Copy the dataframe
    df1 = df_detail.copy()

    # Filtering based on user input if submit button was clicked
    if n_clicks_submit is not None:
        df1= df1[
            (df1["Location Code"].isin(location)) &
            (df1["Transaction Manager"].isin(manager))
        ]

    # Select relevant columns and format the dataframe
    df1 = df1[
        ["Location Code", "Task Health", "Status", "Task Name", "Phase",
         "Start", "Due Date", "Days until due date", "Transaction Manager", "Comments"]
    ]

    # Convert df to dict for ag grid
    row_data = df1.to_dict('records')

    # Define column definitions for ag grid
    column_defs = [
        {"headerName": col, "field": col}
        for col in df1.columns
    ]

    return column_defs, row_data
2

Hi @GabrielBKaram

You can do this with a cell renderer. Here’s an example:

image
image592×580 7.45 KB


from dash import Dash, html
import dash_ag_grid as dag

rowData = [
    {"Task Health": "Yellow"},
    {"Task Health": "Red"},
    {"Task Health": "Grey"},
    {"Task Health": "Green"},
]

app = Dash(__name__)

columnDefs = [
    {
        "field": "Task Health",
        "cellRenderer": "ColorCellRenderer",
    },

]
grid = dag.AgGrid(
    rowData=rowData,
    columnDefs=columnDefs,
)

app.layout = html.Div( grid)

if __name__ == "__main__":
    app.run_server(debug=True)

"""
Put the following in the dashAgGridComponentFunctions.js file in the assets folder:

--------------------

var dagcomponentfuncs = (window.dashAgGridComponentFunctions =
    window.dashAgGridComponentFunctions || {});

 dagcomponentfuncs.ColorCellRenderer = (props) => {

  const styles = {
    verticalAlign: "middle",
    border: "1px solid black",
    borderRadius: "50%",
    margin: 3,
    display: "inline-block",
    width: 20,
    height: 20,
    backgroundColor: props.value.toLowerCase(),
  };
  return React.createElement("div", {}, [
    React.createElement("span", { style: styles }),
  ]);
};


"""
3 Likes
3

works great. thanks @AnnMarieW !