Provided Cell Editors

The grid comes with these provided cell editors:

Text Cell Editor

Specified with agTextCellEditor, this is a simple text editor that uses the standard HTML input. This editor is the default if another cell editor is not specified.

cellEditorParams available for agTextCellEditor:
- useFormatter (boolean) If True, the editor will use the provided colDef.valueFormatter to format the value displayed in the editor.
- maxLength (number) Max number of characters to allow. Default: 524288

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:
- maxLength (number) Max number of characters to allow. Default: 200
- rows (number) Number of character rows to display. Default: 10
- cols (number) Number of character columns to display. Default: 60

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).

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

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(
    [
        dcc.Markdown(
            "This grid has a regular text editor, select dropdown, and a large textarea editor."
        ),
        dag.AgGrid(
            id="cell-editor-grid",
            columnDefs=columnDefs,
            rowData=rowData,
            columnSize="sizeToFit",
            defaultColDef={"editable": True, "sortable": True},
        ),
        html.Div(id="cell-editor-div"),
    ],
    style={"margin": 20},
)


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

This grid has a regular text editor, select dropdown, and a large textarea editor.

Cell Editing can also be performed via Cell Editor Components.