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?

Question

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()

Good question! JavaScript says "Maximum call stack size exceeded". But I don't understand why. Weirdly, using a button `ui.button('Sort', on_click=sort)` works just fine. I'll have to dig deeper into this. — Falko, Oct 19 '22 at 06:04
I opened a ticket for this problem: https://github.com/zauberzeug/nicegui/issues/127 — Falko, Oct 19 '22 at 08:24

score 1 · Accepted Answer · answered Jan 20 '23 at 06:29

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()

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?

1 Answers1