如何使用NiceGui库在表格单元格中添加按钮？解决序列化报错

报错原因 #

直接将Python函数buttonClick传入cellRendererParams的onClick参数会触发JSON序列化错误——因为Python函数无法被序列化成JSON格式，而NiceGui需要将表格配置转换为JSON发送给前端渲染。

解决方案 #

方法1：使用Python自定义单元格渲染器 #

直接在Python中生成按钮组件，绑定点击事件，避免传递无法序列化的函数：

from nicegui import ui

def button_click(row_data):
    print(f"点击了任务ID: {row_data['taskId']}")

table = ui.table({
    'columnDefs': [
        {'headerName': 'Task id', 'field': 'taskId'},
        {
            'headerName': 'Info', 
            'field': 'info', 
            # 用lambda作为渲染器，创建按钮并绑定点击逻辑
            'cellRenderer': lambda params: ui.button('Check', on_click=lambda: button_click(params.data)).render()
        },
    ],
    'rowData': [
        {'taskId': 1},
        {'taskId': 2},
    ],
})

ui.run()

这种方式通过lambda渲染器直接生成ui.button组件，点击事件会触发Python端的button_click函数，同时能获取当前行的数据params.data。

方法2：结合ag-grid原生渲染器与自定义事件 #

利用ag-grid的buttonRenderer，通过自定义事件名绑定Python端的回调函数：

from nicegui import ui

def button_click(e):
    # 从事件参数中获取行数据
    print(f"点击了任务ID: {e.args['data']['taskId']}")

table = ui.table({
    'columnDefs': [
        {'headerName': 'Task id', 'field': 'taskId'},
        {
            'headerName': 'Info', 
            'field': 'info',
            'cellRenderer': 'buttonRenderer',
            'cellRendererParams': {
                'label': 'Check',
                # 定义自定义事件名，而非直接传Python函数
                'clickEvent': 'check_button_click'
            }
        },
    ],
    'rowData': [
        {'taskId': 1},
        {'taskId': 2},
    ],
})

# 监听表格的自定义事件
table.on('check_button_click', button_click)

ui.run()

这种方式通过字符串类型的事件名传递配置，避免JSON序列化问题，同时通过table.on绑定Python端的处理函数，实现点击交互。

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