How do you update a ui.table cells with new value without recreating the table

[fuithecat]

I have defined a data buffer but cannot figure out how to update the cell values inside a while loop. The idea is to have a refresh every second. Right now, I am recreating the table but the table flickers every time it is refreshed.

[mturoci]

Hi @fuithecat,

tables currently do not support data buffers (likely will in the future), but you may update table rows via table rows prop:

from h2o_wave import Q, ui, main, app


@app('/')
async def serve(q: Q):
    if not q.client.initialized:
        q.page['example'] = ui.form_card(box='1 1 5 5', items=[
            ui.table(
                name='table',
                columns=[
                    ui.table_column(name='first_name', label='First Name', align='center'),
                    ui.table_column(name='last_name', label='Last Name', align='right'),
                ],
                rows=[
                    ui.table_row(name='row1', cells=['John', 'Doe']),
                    ui.table_row(name='row2', cells=['Alice', 'Smith']),
                    ui.table_row(name='row3', cells=['Bob', 'Adams']),
                ]
            ),
            ui.button(name='change_data', label='Change Data'),
        ])
        q.client.initialized = True

    if q.args.change_data:
        q.page['example'].items[0].table.rows = [
            ui.table_row(name='row1', cells=['New 1', 'Doe']),
            ui.table_row(name='row2', cells=['New 2', 'Doe']),
            ui.table_row(name='row3', cells=['New 3', 'Doe']),
        ]

    await q.page.save()

[fuithecat]

Thanks this works.

[michaeltraxler]

I have a similar problem. I want to change values in a table very fast. The best would be that I can change the data as it is done in a plot with the data-class.
Unfortunately, I'm not able to update single cells in a table several times.
With

q.page['table'].items[0].table.rows[1] = ui.table_row(name=f'row1', cells=[f"{i}", 'Test'])

I'm able to change the value once, but subsequent tries to change it with the same command doesn't have an effect on the row.
Any reason why?

The workaround is described in the answer. But when I completely fill all rows for each redraw, I get a kind of very short but visible fade-in animation for the contents of the table. This is bad if I update every 500ms.
So the questions:

• Can I somehow update several times a single row?
• Can I update all rows, without the fade-in-animation of the new values?

I just found out, that the fade in animation only occurs for rows, which have a new name, which was not used before! That is a very good behavior which is fine! The questions still holds, if I can update only a single row several times...

Thanks!

[mturoci]

Hey @michaeltraxler!

I just found out, that the fade in animation only occurs for rows, which have a new name

I was about to hack some custom CSS for you to turn off the animation, but this is much much better. Didn't even know about this.

Can I somehow update several times a single row?

Not possible currently. Ideally, we would make table support data buffers (the same way plots work). Please file a feature request.