Dash AG Grid Styling Non-Editable Cells

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:

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(
      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"),
            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__":

It turns into something like this:

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


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