Best Alternative to Nested Tables

[n-srinidhi]

Hi! For my wave app, I need to display nested table data. However since Nested tables aren't possible with Wave, I was thinking of showing a ui.dialog() on clicking a cell in the table. Within the ui.dialog() I can display the required table.
I'm looking for ideas or alternatives to this approach. Thank you!

[marek-mihok]

@n-srinidhi do you need to have your nested table interactive? If not, it can be achievable using markdown cell type.

from h2o_wave import main, app, Q, ui

table = '''
| **Column 1**     |        **Column 2**        |
|------------------|----------------------------|
| Some property    | Some text                  |
| Another property | [Some url](https://h2o.ai) |
'''

@app('/demo')
async def serve(q: Q):
    q.page['example'] = ui.form_card(box='1 1 4 4', items=[
        ui.text_xl(content='Table with Markdown'),
        ui.table(
            name='table',
            columns=[
                ui.table_column(name='description', label='Description', min_width='200'),
                ui.table_column(name='markdown', label='Markdown', min_width='250',
                                cell_type=ui.markdown_table_cell_type(target='_blank')),
            ],
            height='250px',
            rows=[
                ui.table_row(name='row1', cells=['Normal text', table]),
            ]
        )
    ])
    await q.page.save()

[n-srinidhi]

Wow! This looks good! But by interactive you mean No events can be fired right? The markdown table can be updated real time though?

[marek-mihok]

But by interactive you mean No events can be fired right?

There is a way. Markdown also supports inserting of the HTML. With that you can emit wave events using javascript.

The markdown table can be updated real time though?

Wave does not currently support updating specific cells directly, but it is possible to update table rows.

Please see the updated example bellow:

Screen.Recording.2023-09-25.at.15.50.20.mov

from h2o_wave import main, app, Q, ui

table = '''
| **Column 1**     |        **Column 2**        |
|------------------|----------------------------|
| Some property    | Some text                  |
| Another property | [Some url](https://h2o.ai) |
'''

updated_table = '''
| **Changed column 1**     |                                          **Changed column 2**                                            |
|--------------------------|----------------------------------------------------------------------------------------------------------|
| Changed property         | Some changed text                                                                                        |
| Another changed property | **<button onclick='wave.emit("my_table", "my_event", "My event has been fired!");'>Emit event</button>** |
'''

@app('/demo')
async def serve(q: Q):
    if not q.client.initialized:
        q.page['example'] = ui.form_card(box='1 1 5 6', items=[
            ui.text_xl(content='Table with Markdown'),
            ui.table(
                name='my_table',
                columns=[
                    ui.table_column(name='description', label='Description', min_width='200'),
                    ui.table_column(name='markdown', label='Markdown', min_width='350',
                                    cell_type=ui.markdown_table_cell_type()),
                ],
                rows=[
                    ui.table_row(name='row1', cells=['Normal text', table]),
                ],
                height='400px',
            ),
            ui.button(name='change', label='Change content', primary=True)
        ])
        q.page['description'] = ui.form_card(box='6 1 5 6', items=[
            ui.text_xl(content='Events'),
            ui.text(name='content', content='No events fired.'),
        ])
        q.client.initialized = True
    if q.events.my_table and q.events.my_table.my_event:
        q.page['description'].items[1].text.content = f'Event data: {q.events.my_table.my_event}'
    if q.args.change:
        q.page['example'].my_table.rows = [ui.table_row(name='row1', cells=['Changed text', updated_table])]
    await q.page.save()