Collapsed Table rows get reset while viewing the table and data is being updated in the background.

[n-srinidhi]

Hi, I am displaying data using table groups and rows in Wave tables. There is a background process that is updating the data. When I have expanded the rows within a group, If the data buffers are updated in the background the rows are reset. Is there a way to avoid this? Maybe to not update the table whilst it is being viewed?

www_screencapture_com_2023-9-8_14_22.mp4

[mturoci]

Group collapse can be controlled via collapsed attr. See https://wave.h2o.ai/docs/widgets/form/table/#with-collapsed-groups.

Unfortunately, you would need to know which groups the user opened in order to update the table with properly open/collapsed rows. Please open a feature request to emit a group collapsed event on the table so that you can keep track of the current table state and update rows properly from within background job.

Love the color theme btw :)

[n-srinidhi]

@mturoci Thanks a lot! I'll put a feature request,
Meanwhile, Can you suggest a workaround for this? To avoid this collapsing behavior while the dashboard is being updated real time?

[mturoci]

Here you go

from h2o_wave import main, app, Q, ui


@app('/demo')
async def serve(q: Q):
    if not q.client.initialized:
        q.page['form'] = ui.form_card(box='1 1 -1 6', items=[
            ui.table(
                name='table',
                columns=[ui.table_column(name='text', label='Issues reported by')],
                groups=[
                    ui.table_group("Bob", [
                        ui.table_row(name='row1', cells=['Issue1']),
                        ui.table_row(name='row2', cells=['Issue2'])
                    ]),
                    ui.table_group("John", [
                        ui.table_row(name='row3', cells=['Issue3']),
                        ui.table_row(name='row4', cells=['Issue4']),
                        ui.table_row(name='row5', cells=['Issue5']),
                    ], collapsed=False)],
                height='500px'
            )
        ])
        await q.page.save()
        q.page['meta'] = ui.meta_card(box='', script=ui.inline_script(content='''
document.querySelectorAll('.ms-GroupHeader-expand').forEach(btn => {
  btn.addEventListener('click', e => {
    const groupName = e.currentTarget.parentElement.parentElement.querySelector('.ms-GroupHeader-title > span').innerText
    wave.emit('table', 'group_change', groupName)
  })
})
'''))
        q.client.initialized = True

    if q.events.table and q.events.table.group_change:
        print('Changed group', q.events.table.group_change)
        q.page['non-existent'].items = []  # Fake UI update to avoid infinite loading here.

    await q.page.save()

[n-srinidhi]

Hi,
This isnt' working at my end. This is my code:

table_groups_collapse_Script=ui.inline_script(content='''
document.querySelectorAll('.ms-GroupHeader-expand').forEach(btn => {
  btn.addEventListener('click', e => {
    const groupName = e.currentTarget.parentElement.parentElement.querySelector('.ms-GroupHeader-title > span').innerText
    wave.emit('high_vol', 'group_change', groupName)
  })
})
''')
meta = ui.meta_card(
    box='',
    title='Centra',
    stylesheet=ui.inline_stylesheet(style),
    script=table_groups_collapse_Script, 
    layouts=[
        ui.layout(
            breakpoint='xl',
            zones=[
                ui.zone(name='header'),
                ui.zone(name='top', direction=ui.ZoneDirection.ROW),
                ui.zone(name='top_g', direction=ui.ZoneDirection.ROW),
                ui.zone(name='middle'),
                ui.zone(name='middle_2', direction=ui.ZoneDirection.ROW),
                ui.zone(name='bottom', direction=ui.ZoneDirection.ROW, zones=[
                    ui.zone('bot_left', size='50%'),
                    ui.zone('bot_right', size='50%')
                ]),
                ui.zone(name='bottom_2',direction=ui.ZoneDirection.ROW) 
            ])
    ]
    ,
    themes=[
        ui.theme(
            name='centra-theme',
            primary='#891083',
            text='#ffffff',
            card='#160315',
            page='#160315',
        ),
    ],
    theme='centra-theme',
    icon='AnalyticsView',
)
high_value = ui.form_card(
    box=ui.box(zone='middle_2', order=1, width='50%', ),
    title='',
    items=[
        ui.inline(
            items=[
                ui.text_m(content='High Value Clients', ),
                ui.menu(
                    items=[
                        ui.command(name='tog_hv_o', label='Overall',value='hv_o'),
                        ui.command(name='tog_hv_3', label='Last 3 Months',value='hv_3'),
                        ui.command(name='tog_hv_today', label='Today',value='hv_today')]
                )
            ], align='start', justify='between'
        ),
        ui.table(
            name='high_vol', height='300px',
            columns=[
                ui.table_column(name='Login', label='ClientID', link=False),
                ui.table_column(name='Symbol', label='Symbol', link=False),
                ui.table_column(name='Value', label='Value', data_type='number'),
            ],
            groups=[],
        ),
    ],
)

Am I missing something?

[mturoci]

Does my code work for yo though?