Dash Tabulator的movableRowsConnectedTables功能失效及回调实现咨询

一、修复跨表拖拽不工作的问题 #

你的代码核心问题是Tabulator.js的movableRowsConnectedTables需要目标表格的DOM元素ID，但你直接使用了Dash组件的id，而非表格实际的DOM id。dash_tabulator提供tableId参数来显式设置表格的DOM id，调整后的完整代码如下：

import dash
from dash import html, Input, Output, State
import dash_bootstrap_components as dbc
import dash_tabulator

columns = [
    {"title": "Name", "field": "name"}
]

options_from = {
    'movableRows': True,
    # 指向目标表格的tableId值
    'movableRowsConnectedTables': "tabulator_to_table",
    'movableRowsReceiver': "add",
    'movableRowsSender': "delete",
    'height': 200,
    'placeholder': 'No more Rows'
}
options_to = {
    'movableRows': True,
    # 接收端需配置指向源表格的tableId，同时开启接收权限
    'movableRowsConnectedTables': "tabulator_from_table",
    'movableRowsReceiver': "add",
    'height': 200,
    'placeholder': 'Drag Here'
}

data = [
    {"id": 1, "name": "a"},
    {"id": 2, "name": "b"},
    {"id": 3, "name": "c"},
]

layout = html.Div(
    [
        dbc.Row(
            [
                dbc.Col(
                    [
                        html.Header('DRAG FROM HERE'),
                        dash_tabulator.DashTabulator(
                            id='tabulator_from',
                            # 显式设置表格DOM id
                            tableId="tabulator_from_table",
                            columns=columns,
                            options=options_from,
                            data=data,
                        ),
                    ], width=6
                ),
                dbc.Col(
                    [
                        html.Header('DROP HERE'),
                        dash_tabulator.DashTabulator(
                            id='tabulator_to',
                            # 显式设置表格DOM id
                            tableId="tabulator_to_table",
                            columns=columns,
                            options=options_to,
                            data=[]
                        ),
                    ], width=6
                )
            ]
        ),
        # 用于展示回调触发结果的区域
        html.Div(id='drag-feedback')
    ]
)

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(layout, fluid=True)

# 拖拽触发的回调逻辑
@app.callback(
    Output('drag-feedback', 'children'),
    Input('tabulator_from', 'rowMoved'),
    Input('tabulator_to', 'rowMoved'),
    State('tabulator_from', 'data'),
    State('tabulator_to', 'data'),
    prevent_initial_call=True
)
def handle_row_move(from_move, to_move, from_data, to_data):
    if from_move:
        return f"从左侧表格移动行：{from_move['row']['data']}，当前左侧剩余{len(from_data)}行，右侧{len(to_data)}行"
    elif to_move:
        return f"向右侧表格移动行：{to_move['row']['data']}，当前左侧剩余{len(from_data)}行，右侧{len(to_data)}行"
    return ""

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

关键修改点 #

• 给两个DashTabulator组件添加tableId参数，这是Tabulator.js识别目标表格的核心依据
• 接收端表格（右侧）需配置movableRowsConnectedTables指向源表格的tableId，同时开启movableRowsReceiver: "add"权限，确保允许接收拖拽行

二、拖拽放置时触发Dash回调 #

dash_tabulator支持监听Tabulator的rowMoved事件，通过组件的rowMoved属性作为回调输入，即可在拖拽完成时触发回调：

• 用Input监听两个表格的rowMoved事件，覆盖源/目标表格的拖拽触发场景
• 用State获取两个表格的最新数据，用于后续业务处理
• 设置prevent_initial_call=True避免页面加载时误触发回调

rowMoved返回的对象包含移动行的详细信息（如row.data是移动行的原始数据，fromIndex/toIndex是移动前后的位置索引等），可根据业务需求提取使用。

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