Cell Editing

To enable cell editing for a column, set the editable property on the column’s definition to True.

columnDefs = [
    {
        'field': 'population',
        'editable': True
    }
]

To enable cell editing for all columns, set editable to True in the default column definitions:

defaultColDef = {'editable': True}

import dash_ag_grid as dag
from dash import Dash, html, dcc
import plotly.express as px

app = Dash(__name__)

df = px.data.medals_wide()


app.layout = html.Div(
    [
        dcc.Markdown("This grid has editing enabled on all columns"),
        dag.AgGrid(
            id="basic-editing-example",
            columnDefs=[{"field": i} for i in df.columns],
            rowData=df.to_dict("records"),
            columnSize="sizeToFit",
            defaultColDef={"editable": True},
        ),
    ],
    style={"margin": 20},
)

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

This grid has editing enabled on all columns

Conditional Editing

To dynamically determine which cells are editable, supply a function to the editable property on column definition.

columnDefs = [
    {
        'field': 'athlete',
        # conditionally enables editing for data for 2012
         "editable": {"function": "params.data.year == 2012"},
    }
]

In the snippet above, Athlete cells will be editable on rows where the Year is 2012.

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

app = Dash(__name__)


df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)

cellStyle = {
    "styleConditions": [
        {
            "condition": "params.data.year == 2012",
            "style": {"backgroundColor": "lightBlue"},
        },
    ]
}

columnDefs = [
    {
        "field": "athlete",
        "editable": {"function": "params.data.year == 2012"},
        "cellStyle": cellStyle,
    },
    {"field": "age"},
    {"field": "country"},
    {"field": "year", "maxWidth": 120},
    {"field": "date"},
    {"field": "sport"},
    {"field": "gold"},
    {"field": "silver"},
    {"field": "bronze"},
    {"field": "total"},
]

defaultColDef = {
    "flex": 1,
    "minWidth": 150,
}


app.layout = html.Div(
    [
        dcc.Markdown("Example: Conditional Cell Editing  - Athlete cells are editable on rows where the Year is 2012. "),
        dag.AgGrid(
            id="conditional-cell-editing-example",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            defaultColDef=defaultColDef,
        ),
    ],
    style={"margin": 20},
)

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