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}

If Cell Data Types are enabled, the grid provides different
types of editors, with the result stored in the correct format. If disabled, simple string editing is provided, and the
result is stored as a string.

The example below shows string editing enabled on all columns by setting editable=True and cellDataType=False on
the defaultColDef.

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 string 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,  "cellDataType": False},
            dashGridOptions={"animateRows": False}
        ),
    ]
)

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

This grid has string 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": "sport"},
    {"field": "total"},
]


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"),
            columnSize="sizeToFit",
            dashGridOptions={"animateRows": False}
        ),
    ]
)

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