Use color picker to color rows in dag.AgGrid

Dash Python
5

Here is a simple example based on two examples in the docs:


import dash_ag_grid as dag
from dash import Dash, html, dcc

app = Dash(__name__)

rowClassRules = {
    "priority-1": "params.data.priority == 'High'",
    "priority-2": "params.data.priority == 'Medium'",
    "priority-3": "params.data.priority == 'Low'",
}

columnDefs = [
    {
        "headerName": "Text Editor",
        "field": "task",
        "cellEditor": "agTextCellEditor",
        "cellEditorParams": {
            "maxLength": 20,
        },
    },
    {
        "headerName": "Priority",
        "field": "priority",
        "cellEditor": "agSelectCellEditor",
        "cellEditorParams": {
            "values": ["Low", "Medium", "High"],
        },
    },
    {
        "headerName": "Large Text Editor",
        "field": "description",
        "cellEditorPopup": True,
        "cellEditor": "agLargeTextCellEditor",
        "cellEditorParams": {
            "maxLength": 250,
            "rows": 10,
            "cols": 50,
        },
        "flex": 2,
    },
]


descriptiion = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
rowData = [
    {"task": "task 1", "priority": "High", "description": descriptiion},
    {"task": "task 2", "priority": "Medium", "description": descriptiion},
    {"task": "task 3", "priority": "Low", "description": descriptiion},
]


app.layout = html.Div(
    [
        dcc.Markdown(
            "This grid has a regular text editor, select dropdown, and a large textarea editor."
        ),
        dag.AgGrid(
            id="cell-editor-grid",
            columnDefs=columnDefs,
            rowData=rowData,
            columnSize="sizeToFit",
            defaultColDef={"editable": True, "sortable": True},
            rowClassRules=rowClassRules
        ),
        html.Div(id="cell-editor-div"),
    ],
    style={"margin": 20},
)


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

Add the following to the .css file in the assets folder:


.priority-1 {
    background-color: #d8f0d3 !important;
}
.priority-2 {
    background-color: #f6e3cc !important;
}
.priority-3 {
    background-color: #f5cccc !important;
}

ag-grid-row-colorpicker

3 Likes