code review

examples/editable_ag_grid/main.py

@@ -0,0 +1,45 @@
+#!/usr/bin/env python3
+from nicegui import ui
+
+columns = [
+    {'field': 'name', 'editable': True, 'sortable': True},
+    {'field': 'age', 'editable': True},
+    {'field': 'id'},
+]
+rows = [
+    {'id': 0, 'name': 'Alice', 'age': 18},
+    {'id': 1, 'name': 'Bob', 'age': 21},
+    {'id': 2, 'name': 'Carol', 'age': 20},
+]
+
+
+def add_row():
+    new_id = max(dx['id'] for dx in rows) + 1
+    rows.append({'id': new_id, 'name': 'New name', 'age': None})
+    ui.notify(f'Added row with ID {new_id}')
+    aggrid.update()
+
+
+def handle_cell_value_change(e):
+    new_row = e.args['data']
+    ui.notify(f'Updated row to: {e.args["data"]}')
+    rows[:] = [row | new_row if row['id'] == new_row['id'] else row for row in rows]
+
+
+async def delete_selected():
+    selected_id = [row['id'] for row in await aggrid.get_selected_rows()]
+    rows[:] = [row for row in rows if row['id'] not in selected_id]
+    ui.notify(f'Deleted row with ID {selected_id}')
+    aggrid.update()
+
+aggrid = ui.aggrid({
+    'columnDefs': columns,
+    'rowData': rows,
+    'rowSelection': 'multiple',
+    'stopEditingWhenCellsLoseFocus': True,
+}).on('cellValueChanged', handle_cell_value_change)
+
+ui.button('Delete selected', on_click=delete_selected)
+ui.button('New row', on_click=add_row)
+
+ui.run()

examples/editable_table_aggrid/main.py

@@ -1,49 +0,0 @@
-from nicegui import ui
-
-data = [
-    {"id": 0, "name": "Alice", "age": 18},
-    {"id": 1, "name": "Bob", "age": 21},
-    {"id": 2, "name": "Carol", "age": 20},
-]
-
-
-def update_data_from_table_change(e):
-    ui.notify(f"Update with {e.args['data'] }")
-    uprow = e.args["data"]
-    data[:] = [row | uprow if row["id"] == uprow["id"] else row for row in data]
-
-
-table = ui.aggrid(
-    {
-        "columnDefs": [
-            {"field": "name", "editable": True, "sortable": True},
-            {"field": "age", "editable": True},
-            {"field": "id"},
-        ],
-        "rowData": data,
-        "rowSelection": "multiple",
-        "stopEditingWhenCellsLoseFocus": True,
-    }
-).on("cellValueChanged", update_data_from_table_change)
-
-
-async def delete_selected():
-    result = [row["id"] for row in await table.get_selected_rows()]
-    ui.notify(f"delete rows {result}")
-    data[:] = [row for row in data if row["id"] not in result]
-    table.update()
-
-
-def new_row():
-    newid = max(dx["id"] for dx in data) + 1
-    ui.notify(f"new row with id {newid}")
-    data.append({"id": newid, "name": "New name", "age": None})
-    table.update()
-
-
-ui.button("Delete selected", on_click=delete_selected)
-ui.button("New row", on_click=new_row)
-ui.label().classes("whitespace-pre font-mono").bind_text_from(
-    globals(), "data", lambda x: "Data: \n{0}".format("\n".join([str(y) for y in x]))
-)
-ui.run()

main.py

@@ -365,6 +365,7 @@ async def index_page(client: Client) -> None:
             example_link('Custom Binding', 'create a custom binding for a label with a bindable background color')
             example_link('Descope Auth', 'login form and user profile using [Descope](https://descope.com)')
             example_link('Editable table', 'editable table allowing to add, edit, delete rows')
+            example_link('Editable AG Grid', 'editable AG Grid allowing to add, edit, delete rows')
 
     with ui.row().classes('dark-box min-h-screen mt-16'):
         link_target('why')