Dash AG Grid Styling Non-Editable Cells

Dash Python
1

Good day, All,

I hope that this trick helps you out when designing interactions with the grid.

When working with user inputs in the grid, sometimes it is necessary to keep columns non-editable under certain circumstances. To have a conditional edit, you need to pass a function to the editable prop for that columnDef.

It is possible to access the JS parsed version in other functions, this is attainable through this:
params.colDef.editable(params)

When pairing this with cellClassRules, it allows you to apply styling to all conditionally disabled editable columns:

"cellClassRules": {"disabled": "!params.colDef.editable(params)"}}

This is a really neat way to help users know what cells are editable vs not when you also add styling like such:

.disabled {
    background: repeating-linear-gradient(
      -45deg,
      rgba(0,0,0,0.02),
      rgba(0,0,0,0.02) 10px,
      rgba(0,0,0,0.04) 10px,
      rgba(0,0,0,0.04) 20px
    );
    border: none;
}

When we put it all together and run something like the below:

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


app = Dash(__name__)

columnDefs = [
    {"headerName": "Row ID", "valueGetter": {"function": "params.node.id"}, "editable": False,
     "cellClass": "disabled"},
    {"field": "make", "editable": True},
    {"field": "model"},
    {"field": "price"},
]

data = [
    {"make": "Toyota", "model": "Celica", "price": 35000},
    {"make": "Ford", "model": "Mondeo", "price": 32000},
    {"make": "Porsche", "model": "Boxster", "price": 72000},
    {"make": "BMW", "model": "M50", "price": 60000},
    {"make": "Aston Martin", "model": "DBX", "price": 190000},
]

app.layout = html.Div(
    [
        dcc.Markdown("This grid has a different styling for non-editable cells"),
        dag.AgGrid(
            id="grid-ids-example",
            columnDefs=columnDefs,
            rowData=data,
            columnSize="sizeToFit",
            defaultColDef={"resizable": True, "sortable": True, "filter": True,
                           "editable": {"function": "params.data.make == 'Toyota'"},
                           "cellClassRules": {"disabled": "!params.colDef.editable(params)"}},
        ),
    ],
    style={"margin": 20},
)

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

It turns into something like this:

image
image1708×409 11.9 KB

If you edit the make column to “Toyota”, it will allow model and price to be editable as well.

3 Likes
2

Thanks for this example @jinnyzor
This will be a good one to add to the docs :slight_smile: