AG Grid (or table) with edit, update and delete buttons

[Dronakurl]

It would be nice to have an editable table with a functionality to edit, update and delete data.
The data structure with which the table was created (list of dicts or pandas df), should be updated with the changes.
(see also https://discord.com/channels/1089836369431498784/1161029777759670454)
I got an example to work with AG Grid, since I though this would be the most versatile element.
The run_javascript part could be put in a method aggrid.get_selected_row_ids
It works, but it does not look ... nice.

from nicegui import ui


def aggrid_editable():
    data = [
        {"name": "Alice", "age": 18},
        {"name": "Bob", "age": 21},
        {"name": "Carol", "age": 42},
    ]

    def update_data_from_table_change(e):
        data[e.args["rowIndex"]] = e.args["data"]

    table = ui.aggrid(
        {
            "columnDefs": [
                {
                    "field": "name",
                    "editable": True,
                    "sortable": True,
                },
                {
                    "field": "age",
                    "editable": True,
                },
            ],
            "rowData": data,
            "rowSelection": "multiple",
            "stopEditingWhenCellsLoseFocus": True,
        }
    ).on("cellValueChanged", update_data_from_table_change)

    async def delete_selected():
        nonlocal data
        result = await ui.run_javascript(
            f"""
                let result = [];
                let x= getElement({table.id}).gridOptions.api.getSelectedNodes();
            """
            """
                for (let element of x) {
                    result.push(element.id);
                }
                return result;
            """
        )
        # for idx in await table.get_selected_row_ids():
        for idx in result:
            data.pop(int(idx))
        table.options["rowData"] = data
        table.update()

    def new_row():
        nonlocal data
        data.append(dict(name="New default name", age=None))
        table.options["rowData"] = data
        table.update()

    ui.button("Delete selected", on_click=delete_selected)
    ui.button("New row", on_click=new_row)

    binddata = {}
    binddata["data"] = data
    with ui.card():
        ui.label("Table data in python").classes("text-xl")
        ui.label().bind_text_from(binddata, "data", backward=lambda x: str(x))


aggrid_editable()
ui.run()

[falkoschindler]

Thanks for sharing, @Dronakurl!

I managed to reduce it to this:

data = [
    {"name": "Alice", "age": 18},
    {"name": "Bob", "age": 21},
    {"name": "Carol", "age": 42},
]

def update_data_from_table_change(e):
    data[e.args["rowIndex"]] = e.args["data"]

table = ui.aggrid({
    "columnDefs": [
        {"field": "name", "editable": True, "sortable": True},
        {"field": "age", "editable": True},
    ],
    "rowData": data,
    "rowSelection": "multiple",
    "stopEditingWhenCellsLoseFocus": True,
}).on("cellValueChanged", update_data_from_table_change)

async def delete_selected():
    selected_rows = await table.get_selected_rows()
    data[:] = [row for row in data if row not in selected_rows]
    table.update()

def new_row():
    data.append({"name": "New default name", "age": None})
    table.update()

ui.button("Delete selected", on_click=delete_selected)
ui.button("New row", on_click=new_row)

ui.label().bind_text_from(globals(), "data", lambda data: f"Current data: {data}")

In your code it looks like you're mixing ID and index of selected rows. I simply compare complete row dictionaries instead. This causes duplicates to be removed even if only one of them was selected. But I guess without a unique field there's no way to know for sure which of them was selected.

[Dronakurl]

That's most likely because of bind_text_from from globals. This only works, when "data" is a global variable. When you put the code inside a function, data is no longer a local variable. You need to put data inside a dict, for example, and bind to that dict. See the binding documentation.

[falkoschindler]

@Dronakurl I just noticed that we didn't add the AG Grid example yet, only the "editable table". Would you like to create another PR in analogy to #1905? 🙂

[07rohanraj]

@Dronakurl I'm getting error when trying to delete:
raise RuntimeError('Cannot await JavaScript responses on the auto-index page. '
RuntimeError: Cannot await JavaScript responses on the auto-index page. There could be multiple clients connected and it is not clear which one to wait for.

[falkoschindler]

@07rohanraj We introduced this exception a while ago because requesting data from the frontend is ambiguous on the auto-index page. Wrapping your UI in a @ui.page function should avoid this problem.

[Dronakurl]

Hi, I couldn't reproduce this error. Did you fix it already on main?

[Dronakurl]

Now, here comes a version with ui.table. It's longer, but does not need this ID hack.
Is this too long for the documentation page?
It could be altered, so that changes are managed by buttons that open a ui.dialog.
That has the advantage, that it is less Quasar code.

from nicegui import events, ui

columns = [
    {"name": "name", "label": "Name", "field": "name", "align": "left"},
    {"name": "age", "label": "Age", "field": "age"},
]
rows = [
    {"id": 0, "name": "Alice", "age": 18},
    {"id": 1, "name": "Bob", "age": 21},
    {"id": 2, "name": "Carol", "age": 20},
]


def rename(e: events.GenericEventArguments) -> None:
    for row in rows:
        if row["id"] == e.args["id"]:
            row.update(e.args)
    ui.notify(f"Table.rows is now: {table.rows}")


def delete(e: events.GenericEventArguments) -> None:
    rows[:] = [row for row in rows if row["id"] != e.args["id"]]
    ui.notify(f"Delete {e.args['id']}")
    table.update()


def addrow() -> None:
    newid = max(dx["id"] for dx in rows) + 1
    rows.append({"id": newid, "name": "New guy", "age": 21})
    ui.notify(f"Added new row with id {newid}")
    table.update()


table = ui.table(columns=columns, rows=rows, row_key="name").classes("w-72")
table.add_slot(
    "header",
    r"""
    <q-tr :props="props">
        <q-th auto-width />
        <q-th v-for="col in props.cols" :key="col.name" :props="props">
            {{ col.label }}
        </q-th>
    </q-tr>
""",
)
table.add_slot(
    "body",
    r"""
    <q-tr :props="props">
        <q-td auto-width >
            <q-btn size="sm" color="warning" round dense icon="delete" :props="props"
                @click="() => $parent.$emit('delete', props.row)" >
        </q-td>
        <q-td key="name" :props="props">
            {{ props.row.name }}
            <q-popup-edit v-model="props.row.name" v-slot="scope" 
                @update:model-value="() => $parent.$emit('rename', props.row)" >
                <q-input v-model="scope.value" dense autofocus counter @keyup.enter="scope.set" />
            </q-popup-edit>
        </q-td>
        <q-td key="age" :props="props" class="w-8">
            {{ props.row.age }}
            <q-popup-edit v-model="props.row.age" v-slot="scope" 
                @update:model-value="() => $parent.$emit('rename', props.row)" >
                <q-input v-model.number="scope.value" type="number" dense autofocus counter @keyup.enter="scope.set" />
            </q-popup-edit>
        </q-td>
    </q-tr>
    """,
)
table.add_slot(
    "bottom-row",
    r"""
    <q-tr :props="props">
        <q-td colspan="3" class="text-center">
            <q-btn color="accent" icon="add" class="w-full" @click="() => $parent.$emit('addrow')"/>
        </q-td>
    </q-tr>
    """,
)
table.on("rename", rename)
table.on("delete", delete)
table.on("addrow", addrow)

ui.run()

[falkoschindler]

PR #1905 has been released in version 1.4.2. 🚀

[WolfgangFahl]

see lod_grid in http://ngdemo.bitplan.com/components/WolfgangFahl_nicegui_widgets