AG Grid: can Arrow keys commit the current edit and move (Excel-style)?

Dash Python
1

Environment

  • OS: Windows 11

  • Dash: 2.18.2

  • dash-ag-grid: 31.3.1

What I’m trying to do

I’d like some advice. Is it possible to make any Arrow key (Left/Right/Up/Down) commit the current edit and then let AG Grid do its default navigation? Ideally, the destination cell should also enter edit mode, similar to how Arrow keys work in Excel.

Is this a reasonable way to achieve “commit on Arrow and move (auto-edit next cell)” in AG Grid?
Or is there a better/supported approach you’d recommend?

Here is some example code. I also tried suppressKeyboardEvent to override the default Arrow-key behavior with a custom JavaScript function, without success.

import dash
import dash_ag_grid as dag
from dash import html

app = dash.Dash(__name__)

row_data = [
    {"athlete": "Michael Phelps", "age": 23, "country": "USA"},
    {"athlete": "Usain Bolt", "age": 22, "country": "Jamaica"},
    {"athlete": "Simone Biles", "age": 19, "country": "USA"},
]

column_defs = [
    {"field": "athlete", "editable": True},
    {"field": "age", "editable": True},
    {"field": "country", "editable": True},
]

app.layout = html.Div([
    dag.AgGrid(
        id="grid",
        rowData=row_data,
        columnDefs=column_defs,
        defaultColDef={
            "editable": True,
            # "suppressKeyboardEvent": suppress_keyboard_event,
        },
        dashGridOptions={"rowSelection": "single"},
    )
])

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

Hi @juanvillasanteg and welcome to the dash community :slight_smile:

It doesn’t looks like this is a standard feature in the grid, but it is possible to do custom navigation