Added table widget to web backend

changes/3334.5.feature.rst

@@ -0,0 +1 @@
+The Web backend now supports Table widgets.

docs/reference/api/widgets/table.rst

@@ -34,9 +34,11 @@ necessary.
 
     Not supported
 
-  .. group-tab:: Web |no|
+  .. group-tab:: Web
 
-    Not supported
+    .. figure:: /reference/images/table-web.png
+       :align: center
+       :width: 450px
 
   .. group-tab:: Textual |no|
 

docs/reference/data/widgets_by_platform.csv

@@ -19,7 +19,7 @@ ProgressBar,General Widget,:class:`~toga.ProgressBar`,Progress Bar,|y|,|y|,|y|,|
 Selection,General Widget,:class:`~toga.Selection`,A widget to select a single option from a list of alternatives.,|y|,|y|,|y|,|y|,|y|,,
 Slider,General Widget,:class:`~toga.Slider`,Slider,|y|,|y|,|y|,|y|,|y|,,
 Switch,General Widget,:class:`~toga.Switch`,Switch,|y|,|y|,|y|,|y|,|y|,|b|,
-Table,General Widget,:class:`~toga.Table`,A widget for displaying columns of tabular data.,|y|,|y|,|y|,,|b|,,
+Table,General Widget,:class:`~toga.Table`,A widget for displaying columns of tabular data.,|y|,|y|,|y|,,|b|,|b|,
 TextInput,General Widget,:class:`~toga.TextInput`,A widget for the display and editing of a single line of text.,|y|,|y|,|y|,|y|,|y|,|b|,|b|
 TimeInput,General Widget,:class:`~toga.TimeInput`,A widget to select a clock time,,,|y|,,|y|,|b|,
 Tree,General Widget,:class:`~toga.Tree`,A widget for displaying a hierarchical tree of tabular data.,|y|,|y|,,,,,

web/src/toga_web/factory.py

@@ -31,8 +31,7 @@
 # from .widgets.slider import Slider
 # from .widgets.splitcontainer import SplitContainer
 from .widgets.switch import Switch
-
-# from .widgets.table import Table
+from .widgets.table import Table
 from .widgets.textinput import TextInput
 from .widgets.timeinput import TimeInput
 
@@ -80,7 +79,7 @@ def not_implemented(feature):
     # 'Slider',
     # 'SplitContainer',
     "Switch",
-    # 'Table',
+    "Table",
     "TextInput",
     # 'Tree',
     # 'WebView',

web/src/toga_web/widgets/table.py

@@ -0,0 +1,179 @@
+import warnings
+
+import toga
+from toga_web.libs import create_proxy
+
+from .base import Widget
+
+
+# placeholder from gtk
+class TogaRow:
+    def __init__(self, value):
+        super().__init__()
+        self.value = value
+
+    # All paths return none as Icon is not implemented in web.
+    def icon(self, attr):
+        data = getattr(self.value, attr, None)
+        if isinstance(data, tuple):
+            if data[0] is not None:
+                return None
+            return None
+        else:
+            try:
+                return None
+            except AttributeError:
+                return None
+
+    def text(self, attr, missing_value):
+        data = getattr(self.value, attr, None)
+
+        if isinstance(data, toga.Widget):
+            warnings.warn("Web does not support the use of widgets in cells")
+            text = None
+        elif isinstance(data, tuple):
+            text = data[1]
+        else:
+            text = data
+
+        if text is None:
+            return missing_value
+
+        return str(text)
+
+
+class Table(Widget):
+    def create(self):
+
+        self.native = self._create_native_widget(
+            "div", classes=["toga-table-container"]
+        )
+
+        self.table = self._create_native_widget(
+            "table",
+        )
+        self.native.appendChild(self.table)
+
+        self.table_header_group = self._create_native_widget(
+            "thead", classes=["table-header"]
+        )
+        self.table.appendChild(self.table_header_group)
+
+        self.table_body = self._create_native_widget("tbody", classes=["table-body"])
+        self.table.appendChild(self.table_body)
+
+    def change_source(self, source):
+        self.selection = {}
+
+        # remove old table data
+        for row_child in list(self.table_body.children):
+            for td_child in list(row_child.children):
+                row_child.removeChild(td_child)
+            self.table_body.removeChild(row_child)
+
+        for row_child in list(self.table_header_group.children):
+            for td_child in list(row_child.children):
+                row_child.removeChild(td_child)
+            self.table_header_group.removeChild(row_child)
+
+        if source is not None:
+            self._create_table_headers()
+
+            for i, row in enumerate(source):
+                self._create_table_row(row, i)
+
+        # set table here
+        self.refresh()
+
+    def get_selection(self):
+        selection = sorted(self.selection)
+        if self.interface.multiple_select:
+            return selection
+        elif len(selection) == 0:
+            return None
+        else:
+            return selection[0]
+
+    def add_selection(self, index, table_row):
+        self.selection[index] = table_row
+        table_row.style.backgroundColor = "lightblue"
+        # set colour
+
+    def remove_selection(self, index):
+        table_row = self.selection.pop(index)
+        table_row.style.backgroundColor = ""
+
+    def clear_selection(self):
+        for index in list(self.selection):
+            self.remove_selection(index)
+
+    def _create_table_headers(self):
+        if self.interface.headings:
+            headings = self.interface.headings
+        else:
+            headings = self.interface.accessors
+        self.table_header_row = self._create_native_widget(
+            "tr", classes=["table-header-row"]
+        )
+
+        for heading in headings:
+            th = self._create_native_widget("th", content=heading)
+            self.table_header_row.appendChild(th)
+
+        self.table_header_group.appendChild(self.table_header_row)
+
+    def _create_table_row(self, item, index):
+        row = TogaRow(item)
+        values = []
+        for accessor in self.interface.accessors:
+            values.extend(
+                [
+                    # Removed icon accessor for now as not sure how to handle icon
+                    # row.icon(accessor),
+                    row.text(accessor, self.interface.missing_value),
+                ]
+            )
+        tr = self._create_native_widget(
+            "tr",
+        )
+
+        tr.addEventListener(
+            "click", create_proxy(lambda event: self.dom_row_click(event, index, tr))
+        )
+
+        for value in values:
+            td = self._create_native_widget("td", content=value)
+            tr.appendChild(td)
+        self.table_body.appendChild(tr)
+
+    def dom_row_click(self, event, index, table_row):
+        print("row_click listener! row:", index)
+        if index in self.selection:
+            self.remove_selection(index)
+            print("removing row ", index, " from selection")
+        else:
+            if not self.interface.multiple_select:
+                self.clear_selection()
+            self.add_selection(index, table_row)
+            print("adding row ", index, " to selection")
+
+        # if self.interface.on_select:
+        #       self.interface.on_select(self.interface)
+
+    def insert(self, index, item):
+        self.change_source(self.interface.data)
+
+    def clear(self):
+        self.change_source(self.interface.data)
+
+    def change(self, item):
+        self.change_source(self.interface.data)
+
+    def remove(self, index, item):
+        self.change_source(self.interface.data)
+
+    def insert_column(self, index, heading, accessor):
+        self.change_source(self.interface.data)
+
+    def remove_column(self, accessor):
+        self.change_source(self.interface.data)