Dash DataTable单元格修改需回车才更新，如何实现失焦触发更新？

要实现修改单元格后点击页面其他区域触发更新，只需将回调的触发源从data_timestamp替换为表格的active_cell属性——当单元格编辑完成并失去焦点（点击其他区域）时，active_cell会发生变化（变为其他单元格或None），从而触发回调更新数据。

修改后的完整代码 #

layout = html.Div([
    dash_table.DataTable(
        id='computed-table',
        columns=[
            {'name': 'Input Data', 'id': 'input-data'},
            {'name': 'Input Squared', 'id': 'output-data'}
        ],
        data=[{'input-data': i} for i in range(11)],
        editable=True,
    ),
])


@callback(
    Output('computed-table', 'data'),
    Input('computed-table', 'active_cell'),
    State('computed-table', 'data'),
    prevent_initial_call=True  # 避免页面加载时触发不必要的回调
)
def update_columns(active_cell, rows):
    for row in rows:
        try:
            row['output-data'] = float(row['input-data']) ** 2
        except:
            row['output-data'] = 'NA'
    return rows

关键修改说明 #

• 替换触发源：将原回调的Input('computed-table', 'data_timestamp')改为Input('computed-table', 'active_cell')，利用单元格焦点变化触发更新。
• 添加prevent_initial_call=True：防止页面初始化时因默认选中单元格触发回调，确保仅在用户编辑并切换焦点后才执行更新逻辑。

内容的提问来源于stack exchange，提问作者Dee