How to change the icon of a checkbox in a Dash AG Grid?

šŸ“Š Plotly Python
1

Hello everyone,

Iā€™m working on a Dash app that uses dash-ag-grid, and I have a table where one column is of type boolean. By default, this column renders as checkboxes, as shown below:

image
image885Ɨ527 15.2 KB

What I Want to Achieve

Iā€™d like to replace these checkboxes with star icons (a button or similar):

  • A filled star (ā­) when the row is marked as ā€œfavouriteā€.
  • An empty star (ā˜†) when it is not.

This would make the UI more visually appealing and intuitive for users.

Minimal Reproducible Example (MRE)

Hereā€™s a minimal example of my current setup:

import dash
from dash import html
import dash_ag_grid as dag

# Sample data
data = [
    {"Indicator": "Indicator 1", "Group": "Group A", "Favourite": True},
    {"Indicator": "Indicator 2", "Group": "Group B", "Favourite": False},
    {"Indicator": "Indicator 3", "Group": "Group A", "Favourite": True},
    {"Indicator": "Indicator 4", "Group": "Group C", "Favourite": False},
]

# Column definitions
column_defs = [
    {"headerName": "Indicator", "field": "Indicator"},
    {"headerName": "Group", "field": "Group"},
    {
        "headerName": "Favourite",
        "field": "Favourite",
        "sort": "desc",
        # Allow editing
        "cellRendererParams":{"disabled": False}
    },
]

# Dash app
app = dash.Dash(__name__)

app.layout = html.Div(
    [
        dag.AgGrid(
            id="favourite-table",
            rowData=data,
            columnDefs=column_defs,
            dashGridOptions={
                'pagination':True,
                'paginationPageSize':10,
                'paginationPageSizeSelector':[10, 20, 30],
                'animateRows':False,
                'rowSelection':'multiple',
                'domLayout':'autoHeight'
            },
            columnSize='responsiveSizeToFit',
            rowStyle={'backgroundColor': 'white', 'cursor': 'pointer'},
            defaultColDef={'resizable': False},
        )
    ]
)

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

What Iā€™ve Tried

Iā€™ve looked through the dash-ag-grid documentation but couldnā€™t find a straightforward way to replace the checkboxes with custom icons. I suspect this might require a custom cell renderer, but Iā€™m not sure how to implement it in this context.

Questions

  1. Is it possible to replace the checkboxes with custom icons (like stars) in dash-ag-grid?
  2. If so, how can I implement this? Would it require a custom JavaScript renderer, or is there a Python-based solution?
  3. Can the stars be interactive (e.g., clicking on them toggles between filled and empty)?

Any guidance or examples would be greatly appreciated! :blush:

Thanks in advance for your help!