Merge pull request #1997 from Dronakurl/aggridex

new example: editable table aggrid

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()

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')

website/static/search_index.json

@@ -174,6 +174,11 @@
     "content": "editable table allowing to add, edit, delete rows",
     "url": "https://github.com/zauberzeug/nicegui/tree/main/examples/editable_table/main.py"
   },
+  {
+    "title": "Example: Editable table using AG Grid",
+    "content": "editable table allowing to add, edit, delete rows, using AG Grid",
+    "url": "https://github.com/zauberzeug/nicegui/tree/main/examples/editable_table_aggrid/main.py"
+  },
   {
     "title": "Basic Elements",
     "content": "This is **Markdown**.",
@@ -1319,4 +1324,5 @@
     "content": "By default, NiceGUI provides a built-in padding around the content of the page. You can modify it using the class selector .nicegui-content.",
     "url": "/documentation/query#modify_default_page_padding"
   }
-]
+]
+