Provided Cell Editors

The grid comes with some cell editors provided out of the box. These cell editors are listed here.

There are also some additional cell editors that are generally used
with

import dash_ag_grid as dag
from dash import Dash, html

app = Dash(__name__)

columnDefs = [
    {
        "headerName": "Text Editor",
        "field": "task",
        "cellEditor": "agTextCellEditor",
        "cellEditorParams": {
            "maxLength": 20,
        },
    },
    {
        "headerName": "Select Editor",
        "field": "color",
        "cellEditor": "agSelectCellEditor",
        "cellEditorParams": {
            "values": ["red", "yellow", "green"],
        },
    },
    {
        "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", "color": "green", "description": descriptiion},
    {"task": "task 2", "color": "yellow", "description": descriptiion},
    {"task": "task 3", "color": "red", "description": descriptiion},
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="cell-editor-grid",
            columnDefs=columnDefs,
            rowData=rowData,
            columnSize="sizeToFit",
            defaultColDef={"editable": True, "sortable": True},
            dashGridOptions={"animateRows": False}
        ),
    ]
)

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

Example of Number Cell Editor, Date Cell Editor and Checkbox Cell Editor:

These editors are typically used with Cell Data Types.

import dash_ag_grid as dag
from dash import Dash, html

app = Dash(__name__)

rowData = [
    {
        "number-A": 1,
        "number-B": 1,
        "date": "2023-01-01",
        "boolean": False,
    },
    {"number-A": 2, "number-B": 2, "date": "2023-02-11", "boolean": True},
    {"number-A": 3, "number-B": 3, "date": "2023-06-10", "boolean": False},
    {"number-A": 4, "number-B": 4, "date": "2023-11-04", "boolean": True},
    {"number-A": 5, "number-B": 5, "date": "2023-12-30", "boolean": True},
]

columnDefs = [
    {
        "headerName": "Number Editor",
        "field": "number-A",
        "cellEditor": "agNumberCellEditor",
    },
    {
        "headerName": "Number Editor with cellEditorParams",
        "wrapHeaderText": True,
        "autoHeaderHeight": True,
        "field": "number-B",
        "cellEditor": "agNumberCellEditor",
        "cellEditorParams": {
            "precision": 0,
            "step": 2,
            "showStepperButtons": True,
            "min": 0,
            "max": 100,
        },
    },
    {
        "headerName": "Date Cell Editor",
        "field": "date",
        "cellEditor": "agDateStringCellEditor",
    },
    {
        "headerName": "Checkbox Cell Editor",
        "field": "boolean",
        "cellEditor": "agCheckboxCellEditor",
    },
    {
        "headerName": "Disabled Checkbox",
        "field": "boolean",
        "cellEditor": "agCheckboxCellEditor",
        "cellRenderer": "agCheckboxCellRenderer",
        "cellRendererParams": {
            "disabled": True,
        },
    },
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="grid-cell-data-types-editors",
            columnDefs=columnDefs,
            rowData=rowData,
            defaultColDef={"flex": 1, "editable": True},
            dashGridOptions={"animateRows": False}
        ),
    ],
)

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

Text Cell Editor

Simple text editor that uses the standard HTML input. This editor is the default if none other specified.

cellEditorParams available for agTextCellEditor:

columnDefs = [
    {
        'cellEditor': 'agTextCellEditor',
        'valueFormatter': "'£' + value",
        'cellEditorParams': {
            'useFormatter': True,
            'maxLength': 200
        }
        # ...other props
    }
]

Large Text Cell Editor

Specified with agLargeTextCellEditor, this is a simple editor that uses the standard HTML textarea. Best used in
conjunction with cellEditorPopup=True.

cellEditorParams available for agLargeTextCellEditor:

columnDefs = [
    {
        'cellEditor': 'agLargeTextCellEditor',
        'cellEditorPopup': True,
        'cellEditorParams': {
            'maxLength': 100,
            'rows': 10,
            'cols': 50
        }
        # ...other props
    }
]

Select Cell Editor

Specified with agSelectCellEditor, this is a simple editor that uses HTML select.

cellEditorParams available for agSelectCellEditor:

columnDefs = [
    {
        'cellEditor': 'agSelectCellEditor',
        'cellEditorParams': {
            'values': ['English', 'Spanish', 'French', 'Portuguese', '(other)'],
        }
        # ...other props
    }
]

Note on cellEditorPopup from the Official AG Grid Docs:

Note there is no need to specify cellEditorPopup=True for the select cell editor, as the browser’s select widget
will appear on top of the grid.

We have found the standard HTML Select doesn’t have an API that’s rich enough to play properly with the grid. When a
cell is double clicked to start editing, it is desired that the Select is a) shown and b) opened ready for selection.
There is no API to open a browsers Select. For this reason to edit there are two interactions needed 1) double click
to start editing and 2) single click to open the Select.

We also observed different results while using keyboard navigation to control editing, e.g. while using Enter to start
editing. Some browsers would open the Select, others would not. This is down to the browser implementation and given
there is no API for opening the Select, there is nothing the grid can do.

If you are unhappy with the additional click required, we advise you don’t depend on the browsers standard Select (ie
avoid agSelectCellEditor) and instead use agRichSelectCellEditor (Available in AG Grid Enterprise), or use a
custom component.

Number Cell Editor

Simple number editor that uses the standard HTML number input.

Specified with agNumberCellEditor and configure with cellEditorParams

cellEditorParams available for agNumberCellEditor:

columnDefs = [
    {
        'cellEditor': 'agNumberCellEditor',
        'cellEditorParams': {
            'min': 1,
            'max': 100,
            'precision': 0,
        }
        # ...other props
    }
]

Date Cell Editor

Simple date editor that uses the standard HTML date input and works off of cell values with string type dates.

The date format is controlled via Cell Data Types and
the Checkbox Cell Renderer. The
default is 'yyyy-mm-dd'.

Specified with agDateStringCellEditor and configure with cellEditorParams.

cellEditorParams available for agDateStringCellEditor:

columnDefs = [
    {
        'cellEditor': 'agDateStringCellEditor',
        'cellEditorParams': {
            'min': '2000-01-01',
            'min': '2019-12-31',
        }
        # ...other props
    }
]

Checkbox Cell Editor

Simple boolean editor that uses the standard HTML checkbox input.

Specified with agCheckboxCellEditor.

Generally used in conjunction with
the