🚀 Gen 5 of the leading AI app deployment platform launches October 6. Click for the livestream.

Editable DataTable, save input without pressing 'enter'

Hi all,

When a user input a value in an editable DataTable cell, he or she should press ‘enter’ key to save this value. If the user do not press ‘enter’, but for example click outside of the table, the input is not saved and cell value comes back to previous value.

I find it not user friendly at all as usual html inputs and forms have a different behavior (i.e. inputs are saved on focus out, while ‘enter’ usually is reserved to send form as post request).

Is there any way to change this behavior ? It is a small detail but it has a great impact (in my app) on user experience.

1 Like

Good idea !!!
I also want to change this behavior !!!
Could someone help with this ?

Best

Has anyone found how to do this yet? As I too need this functionality

I think you can build a callback to do that using this:

@app.callback(Output('your_table', 'data'),
               [Input("your_table", "data_previous"),
                State("your_table", 'data')],
)
def update_table(last, new):

    return new

It should trigger the callback each time the table is modiffy and taking the data as state and returning it as output should do the trick, I hope :thinking: