调用ui.select的on_change回调排序数据后，表格消失问题求助

问题原因 #

直接调用list.sort()原地修改table.options.rowData数组，再执行table.update()时，NiceGUI表格底层依赖的AG Grid无法正确识别这种原地数据变更，导致表格渲染异常并从页面消失。

解决办法 #

方法1：生成新数组替换原数据 #

避免原地修改数组，基于原数据生成排序后的新数组赋值给rowData，再触发组件更新：

from nicegui import ui

table = ui.table({
    'columnDefs': [
        {'headerName': 'Task id', 'field': 'taskId'},
    ],
    'rowData': [
        {'taskId': 1},
        {'taskId': 2},
        {'taskId': 3},
        {'taskId': 4},
        {'taskId': 5},
    ],
})

def sortTable(sender):
    sorted_data = sorted(table.options.rowData, 
                        key=lambda task: task['taskId'], 
                        reverse=(sender.value == 'Descending'))
    table.options.rowData = sorted_data
    table.update()

with ui.row():
    ui.select(['Ascending', 'Descending'], on_change=sortTable, value='Ascending', label='Sort by')

ui.run()

方法2：使用响应式变量（推荐） #

将表格数据存入reactive响应式对象，数据变化时自动触发表格更新，无需手动调用table.update()：

from nicegui import ui, reactive

table_data = reactive([
    {'taskId': 1},
    {'taskId': 2},
    {'taskId': 3},
    {'taskId': 4},
    {'taskId': 5},
])

table = ui.table({
    'columnDefs': [
        {'headerName': 'Task id', 'field': 'taskId'},
    ],
    'rowData': table_data,
})

def sortTable(sender):
    table_data.sort(key=lambda task: task['taskId'], 
                   reverse=(sender.value == 'Descending'))

with ui.row():
    ui.select(['Ascending', 'Descending'], on_change=sortTable, value='Ascending', label='Sort by')

ui.run()

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