PR #500, point 6: use ValueElement for handling selection.

examples/table_and_slots/main.py

@@ -1,4 +1,6 @@
 #!/usr/bin/env python3
+import time
+
 from nicegui import ui
 
 fields = [
@@ -24,7 +26,8 @@ def remove_row(keys):
     for i in range(len(rows)):
         if rows[i]['id'] in keys:
             del rows[i]
-            table.update()
+            break
+    table.update()
 
 with ui.qtable(title='QTable', columns=fields, rows=rows, key='id', selection='single', pagination=15) as table:
     with table.add_slot('top-right'):
@@ -42,7 +45,7 @@ with ui.qtable(title='QTable', columns=fields, rows=rows, key='id', selection='s
             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.button('add row', on_click=lambda: add_row({'id': time.time(), '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')

nicegui/elements/mixins/value_element.py

@@ -8,6 +8,7 @@ from ...events import ValueChangeEventArguments, handle_event
 class ValueElement(Element):
     VALUE_PROP = 'model-value'
     EVENT_ARGS = ['value']
+    EVENT = f'update:{VALUE_PROP}'
     LOOPBACK = True
     value = BindableProperty(on_change=lambda sender, value: sender.on_value_change(value))
 
@@ -23,7 +24,7 @@ class ValueElement(Element):
             self._send_update_on_value_change = self.LOOPBACK
             self.set_value(self._msg_to_value(msg))
             self._send_update_on_value_change = True
-        self.on(f'update:{self.VALUE_PROP}', handle_change, self.EVENT_ARGS, throttle=throttle)
+        self.on(self.EVENT, handle_change, self.EVENT_ARGS, throttle=throttle)
 
     def bind_value_to(self, target_object: Any, target_name: str = 'value', forward: Callable = lambda x: x):
         bind_to(self, 'value', target_object, target_name, forward)

nicegui/elements/table.py

@@ -1,8 +1,9 @@
-from typing import Optional
+from typing import Any, Dict, Optional
 
 from typing_extensions import Literal
 
 from .mixins.filter_element import FilterElement
+from .mixins.value_element import ValueElement
 from ..element import Element
 
 
@@ -23,11 +24,14 @@ class QTd(Element):
             self._props['key'] = key
 
 
-class QTable(FilterElement):
+class QTable(ValueElement, FilterElement):
     row = QTr
     header = QTh
     cell = QTd
 
+    VALUE_PROP = 'selected'
+    EVENT_ARGS = None
+    EVENT = 'selection'
     def __init__(
             self,
             columns: list,
@@ -55,7 +59,7 @@ class QTable(FilterElement):
               the selected rows.
         """
 
-        super().__init__(tag='q-table')
+        super().__init__(tag='q-table', value=[], on_value_change=None)
 
         self._props['columns'] = columns
         self._props['rows'] = rows
@@ -70,11 +74,8 @@ class QTable(FilterElement):
         }
 
         self.selected: list = []
-        self._props['selected'] = self.selected
         self._props['selection'] = selection
-        self.on('selection', handler=self.on_selection_change)
 
-    def on_selection_change(self, data):
-        self.selected = data['args']
-        self._props['selected'] = data['args']['rows']
-        self.update()
+    def _msg_to_value(self, msg: Dict) -> Any:
+        self.selected = msg['args']
+        return msg['args']['rows']