Let users edit a table's data directly from the UI. Uses pandas in the background to save the dataset per browser tab. You may want this to be shared across users, or to save with an external database instead.

wave_edit_table_from_ui.py

from h2o_wave import main, app, Q, ui
import pandas as pd


@app('/')
async def serve(q: Q):

    if not q.client.initialized:
        q.page["meta"] = ui.meta_card(box="")

        q.client.df = pd.DataFrame([[1, "Demo"], [2, "Demo"], [3, "Demo"], [4, "Demo"]], columns=["id", "title"])
        make_table(q)

        q.client.initialized = True

    if q.args.table_delete is not None and q.args.table_delete is not False:
        q.client.df.drop(int(q.args.table_delete), axis=0, inplace=True)
        make_table(q)

    if q.args.table_edit is not None and q.args.table_edit is not False:
        q.client.edit_index = int(q.args.table_edit)

        q.page["meta"].side_panel = ui.side_panel(
            title="Edit Row",
            items=[ui.textbox(
                name=col,
                label=col,
                value=str(q.client.df.loc[int(q.args.table_edit), col]))
                for col in q.client.df.columns.values
            ] + [ui.button(name="save_edits", label="Save", primary=True)]
        )

    if q.args.save_edits:
        for col in q.client.df.columns.values:
            q.client.df.loc[q.client.edit_index, col] = q.args[col]

        q.client.edit_index = None
        q.page["meta"].side_panel = None
        make_table(q)

    if q.args.new_row:
        q.page["meta"].side_panel = ui.side_panel(
            title="Create Row",
            items=[ui.textbox(
                name=col,
                label=col,
                )
                      for col in q.client.df.columns.values
                  ] + [ui.button(name="save_new_row", label="Save", primary=True)]
        )

    if q.args.save_new_row:
        q.client.df.loc[max(q.client.df.index) + 1] = [q.args[col] for col in q.client.df.columns.values]

        q.page["meta"].side_panel = None
        make_table(q)

    await q.page.save()


def make_table(q: Q):
    q.page["form"] = ui.form_card(
        box="1 1 4 4",
        items=[
            ui.table(
                name="table",
                columns=[
                    ui.table_column(name="id", label="ID", link=False),
                    ui.table_column(name="title", label="Title", link=False),
                    ui.table_column(name='actions', label='Actions',
                                    cell_type=ui.menu_table_cell_type(name='commands', commands=[
                                        ui.command(name='table_edit', label='Edit', icon='Edit'),
                                        ui.command(name='table_delete', label='Delete', icon='Delete'),
                                    ]))
                ],
                rows=[
                    ui.table_row(name=str(i), cells=[str(v) for v in q.client.df.loc[i].values]) for i in q.client.df.index.values
                ]
            ),
            ui.button(name="new_row", label="Create New Row", primary=True)
        ]
    )