PR #500, point 6: expand example on how to add/delete rows.

examples/table_and_slots/main.py

@@ -1,25 +1,34 @@
 #!/usr/bin/env python3
 from nicegui import ui
 
-
-class Demo:
-    filter = ''
-    fields = [
-        {'name': 'name', 'label': 'Name', 'field': 'name', 'required': True},
-        {'name': 'age', 'label': 'Age', 'field': 'age', 'sortable': True},
-    ]
-
-    data = [
-        {'name': 'Alice', 'age': 18},
-        {'name': 'Bob', 'age': 21},
-        {'name': 'Carol'},
-    ]
-
-
-with ui.qtable(title='QTable', columns=Demo.fields, rows=Demo.data, key='name', selection='single') \
-        .bind_filter(Demo, 'filter') as table:
+fields = [
+    {'name': 'name', 'label': 'Name', 'field': 'name', 'required': True},
+    {'name': 'age', 'label': 'Age', 'field': 'age', 'sortable': True},
+]
+
+rows = [
+    {'id': 0, 'name': 'Alice', 'age': 18},
+    {'id': 1, 'name': 'Bob', 'age': 21},
+    {'id': 2, 'name': 'Lionel', 'age': 19},
+    {'id': 3, 'name': 'Michael', 'age': 32},
+    {'id': 4, 'name': 'Julie', 'age': 12},
+    {'id': 5, 'name': 'Livia', 'age': 25},
+    {'id': 6, 'name': 'Carol'},
+]
+
+def add_row(item):
+    rows.append(item)
+    table.update()
+
+def remove_row(keys):
+    for i in range(len(rows)):
+        if rows[i]['id'] in keys:
+            del rows[i]
+            table.update()
+
+with ui.qtable(title='QTable', columns=fields, rows=rows, key='id', selection='single') as table:
     with table.add_slot('top-right'):
-        with ui.input(placeholder='Search').props('type="search"').bind_value(Demo, 'filter') as search:
+        with ui.input(placeholder='Search').props('type="search"').bind_value(table, 'filter') as search:
             with search.add_slot('append'):
                 ui.icon('search')
 
@@ -30,12 +39,12 @@ with ui.qtable(title='QTable', columns=Demo.fields, rows=Demo.data, key='name',
 
     with table.add_slot('bottom-row'):
         with table.row():
-            with table.cell().props('colspan="100%"'):
-                ui.label('This is a bottom row').classes('text-center')
-
-    with table.add_slot('bottom'):
-        ui.label('Bottom slot')
+            with table.cell().props('colspan="2"'):
+                new_name = ui.input()
+            with table.cell():
+                ui.button('add row', on_click=lambda: add_row({'id': len(rows), 'name': new_name.value, 'age': 10}))
 
 ui.label('').bind_text_from(table, 'selected', lambda val: f'Current selection: {val.__repr__()}')
+ui.button('Remove selection', on_click=lambda: remove_row(table.selected['keys'])).bind_visibility(table, 'selected')
 
 ui.run()

nicegui/elements/table.py

@@ -1,4 +1,4 @@
-from typing import Callable, Optional
+from typing import Optional
 
 from typing_extensions import Literal
 
@@ -24,8 +24,6 @@ class QTd(Element):
 
 
 class QTable(FilterElement):
-
-    # Scope table element as Table class attributes.
     row = QTr
     header = QTh
     cell = QTd
@@ -68,6 +66,6 @@ class QTable(FilterElement):
         self.on('selection', handler=self.on_selection_change)
 
     def on_selection_change(self, data):
-        self.selected = data['args']['rows']
-        self._props['selected'] = self.selected
+        self.selected = data['args']
+        self._props['selected'] = data['args']['rows']
         self.update()