pythonpython-3.xag-gridnicegui

Why does my table disappear after I try to sort data by one of the fields after calling the on_change callback in ui.select?


from nicegui import ui

I am going to sort the table in descending order

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

Callback function that will decide in what order the table will be sorted. The function is executed but the table disappears from the page

def sortTable(sender):
    if sender.value == 'Ascending':
        table.options.rowData.sort(key=lambda task: task['taskId'])
    else:
        table.options.rowData.sort(key=lambda task: task['taskId'], reverse=True)
    table.update()
with ui.row():
    ui.select(['Ascending', 'Descending'], on_change=sortTable, value='Ascending', label='Sort by')

ui.run()

Solution

  • In the current version of NiceGUI this issue is fixed. So the following example works as expected:

    from nicegui import ui
    
    table = ui.table({
        'columnDefs': [{'field': 'number'}],
        'rowData': [{'number': 1}, {'number': 2}, {'number': 3}],
    })
    
    def sort_table(event):
        table.options['rowData'].sort(key=lambda task: task['number'], reverse=event.value == 'Descending')
        table.update()
    
    ui.select(['Ascending', 'Descending'], on_change=sort_table)
    
    ui.run()