Table back/forward button support (hash routing?)

[epa095]

I have a table where you can click on a row, and you get information about that row. I have added a "Back" button on information-page, and that works. But I would like to let the user also press back button in thir browser (or with their mouse), but since the url dont change that takes them back to the page they were before they entered my page. I guess hash-routing can help here(?), but is there any way to add the hash route when a row is pressed in the table? Is there any other way to make the back-button-in-the-browser work?

[marek-mihok]

If you want to display a non-interactive table of information, use a markdown table with hash routing.

Otherwise for ui.table you can set column cell type to markdown with cell_type=ui.markdown_table_cell_type() property. In markdown you can use hash routing by passing a row cell value in the following format: '[cell text content](#my-hash)'. Then you can use event handlers for showing the information page:

@on('#{hash:str}')
async def print_clicked_cell(q: Q, hash: str):
        q.page['form'] = ui.form_card(box='1 1 -1 10', items=[
            ui.text(f'Information page: {hash}'),
            ui.button(name='back', label='Back'),
        ])

Screen.Recording.2022-09-19.at.01.33.06.mov

[marek-mihok]

@epa095 Here is the working example:

from h2o_wave import main, app, Q, ui, on, handle_on


columns = [
    ui.table_column(name='column1', label='Column 1', cell_type=ui.markdown_table_cell_type()),
    ui.table_column(name='column2', label='Column 2')
]

rows = [
    ui.table_row(name='row-1', cells=[f'[Row 1](#row-1)', 'Description 1']),
    ui.table_row(name='row-2', cells=[f'[Row 2](#row-2)', 'Description 2'])
]


@on('#{hash:str}')
async def print_clicked_cell(q: Q, hash: str):
        q.page['form'] = ui.form_card(box='1 1 -1 10', items=[
            ui.text(f'Information page: {hash}'),
            ui.link(name='back', label='Back', path='/table'),
        ])
        await q.page.save()


@app('/table')
async def serve(q: Q):
    q.page['form'] = ui.form_card(box='1 1 -1 10', items=[ui.table(name='table', columns=columns, rows=rows)])


    await handle_on(q)

    await q.page.save()

[epa095]

@marek-mihok awsome, thanks!