PR #500, point 6: Introduce `FilterElement` for the filter prop

examples/table_and_slots/main.py

@@ -17,7 +17,7 @@ class Demo:
 
 
 with ui.qtable(title='QTable', columns=Demo.fields, rows=Demo.data, key='name', selection='single') \
-        .bind_value(Demo, 'filter') as table:
+        .bind_filter(Demo, 'filter') as table:
     with table.add_slot('top-right'):
         with ui.input(placeholder='Search').props('type="search"').bind_value(Demo, 'filter') as search:
             with search.add_slot('append'):

nicegui/elements/mixins/filter_element.py

@@ -0,0 +1,34 @@
+from typing import Any, Callable, Optional
+
+from ...binding import BindableProperty, bind, bind_from, bind_to
+from ...element import Element
+
+
+class FilterElement(Element):
+    FILTER_PROP = 'filter'
+    filter = BindableProperty(on_change=lambda sender, filter_by: sender.on_filter_change(filter_by))
+
+    def __init__(self, *, filter_by: Optional[str] = '', **kwargs) -> None:
+        super().__init__(**kwargs)
+        self.filter = filter_by
+        self._props[self.FILTER_PROP] = filter_by
+
+    def bind_filter_to(self, target_object: Any, target_name: str = 'filter', forward: Callable = lambda x: x):
+        bind_to(self, 'filter', target_object, target_name, forward)
+        return self
+
+    def bind_filter_from(self, target_object: Any, target_name: str = 'filter', backward: Callable = lambda x: x):
+        bind_from(self, 'filter', target_object, target_name, backward)
+        return self
+
+    def bind_filter(self, target_object: Any, target_name: str = 'filter', *,
+                    forward: Callable = lambda x: x, backward: Callable = lambda x: x):
+        bind(self, 'filter', target_object, target_name, forward=forward, backward=backward)
+        return self
+
+    def set_filter(self, filter_by: str) -> None:
+        self.filter = filter_by
+
+    def on_filter_change(self, filter_by: str) -> None:
+        self._props[self.FILTER_PROP] = filter_by
+        self.update()

nicegui/elements/table.py

@@ -2,7 +2,7 @@ from typing import Callable, Optional
 
 from typing_extensions import Literal
 
-from .mixins.value_element import ValueElement
+from .mixins.filter_element import FilterElement
 from ..element import Element
 
 
@@ -23,8 +23,7 @@ class QTd(Element):
             self._props['key'] = key
 
 
-class QTable(ValueElement):
-    VALUE_PROP = 'filter'
+class QTable(FilterElement):
 
     # Scope table element as Table class attributes.
     row = QTr
@@ -38,7 +37,6 @@ class QTable(ValueElement):
             key: str,
             title: Optional[str] = None,
             selection: Optional[Literal['single', 'multiple', 'none']] = 'none',
-            on_filter_change: Optional[Callable] = None,
     ) -> None:
         """QTable
 
@@ -57,7 +55,7 @@ class QTable(ValueElement):
               the selected rows.
         """
 
-        super().__init__(tag='q-table', value='', on_value_change=on_filter_change)
+        super().__init__(tag='q-table')
 
         self._props['columns'] = columns
         self._props['rows'] = rows