Add Table (and td, td, th) classes based on q-table.

nicegui/elements/table.py

@@ -0,0 +1,68 @@
+from typing import Callable, Optional
+
+from typing_extensions import Literal
+
+from .mixins.value_element import ValueElement
+from ..element import Element
+
+
+class Tr(Element):
+    def __init__(self) -> None:
+        super().__init__('q-tr')
+
+
+class Th(Element):
+    def __init__(self) -> None:
+        super().__init__('q-th')
+
+
+class Td(Element):
+    def __init__(self, key: str = '') -> None:
+        super().__init__('q-td')
+        if key:
+            self._props['key'] = key
+
+
+class Table(ValueElement):
+    VALUE_PROP = 'filter'
+
+    def __init__(
+            self,
+            columns: Optional[list] = None,
+            rows: Optional[list] = None,
+            title: Optional[str] = None,
+            selection: Optional[Literal['single', 'multiple', 'none']] = 'none',
+            on_filter_change: Optional[Callable] = None,
+    ) -> None:
+        """Table
+
+        A component that allows you to display using `QTable <https://quasar.dev/vue-components/table>` component.
+
+        :param columns: A list of column objects (see `column API <https://quasar.dev/vue-components/table#qtable-api>`)
+        :param rows: A list of row objects.
+        :param title: The title of the table.
+        :param selection: defines the selection behavior.
+            'single': only one cell can be selected at a time.
+            'multiple': more than one cell can be selected at a time.
+            'none': no cells can be selected.
+        """
+
+        super().__init__(tag='q-table', value='', on_value_change=on_filter_change)
+
+        if columns is None:
+            columns = []
+        if rows is None:
+            rows = []
+
+        self._props['columns'] = columns
+        self._props['rows'] = rows
+        self._props['title'] = title
+
+
+        self.selected: list = []
+        self._props['selected'] = self.selected
+        self._props['selection'] = selection
+        self.on('selection', handler=self.handle_selected_event)
+
+    def handle_selected_event(self, data):
+        self.selected = data['args']

nicegui/ui.py

@@ -47,14 +47,18 @@ from .elements.separator import Separator as separator
 from .elements.slider import Slider as slider
 from .elements.spinner import Spinner as spinner
 from .elements.switch import Switch as switch
+from .elements.table import Table as table
 from .elements.tabs import Tab as tab
 from .elements.tabs import TabPanel as tab_panel
 from .elements.tabs import TabPanels as tab_panels
 from .elements.tabs import Tabs as tabs
+from .elements.table import Td as td
 from .elements.textarea import Textarea as textarea
+from .elements.table import Th as th
 from .elements.time import Time as time
 from .elements.toggle import Toggle as toggle
 from .elements.tooltip import Tooltip as tooltip
+from .elements.table import Tr as tr
 from .elements.tree import Tree as tree
 from .elements.upload import Upload as upload
 from .elements.video import Video as video
@@ -74,8 +78,6 @@ from .page_layout import RightDrawer as right_drawer
 from .run import run
 from .run_with import run_with
 
-table = deprecated(aggrid, 'ui.table', 'ui.aggrid', 370)
-
 if os.environ.get('MATPLOTLIB', 'true').lower() == 'true':
     from .elements.line_plot import LinePlot as line_plot
     from .elements.pyplot import Pyplot as pyplot