update ui.table

nicegui/elements/old/table.py

@@ -1,19 +0,0 @@
-from typing import Dict
-
-import justpy as jp
-
-from .element import Element
-
-
-class Table(Element):
-
-    def __init__(self, options: Dict):
-        """Table
-
-        An element to create a table using `AG Grid <https://www.ag-grid.com/>`_.
-
-        :param options: dictionary of AG Grid options
-        """
-        view = jp.AgGrid(temp=False)
-        view.options = self.options = jp.Dict(**options)
-        super().__init__(view)

nicegui/elements/table.js

@@ -0,0 +1,43 @@
+export default {
+  template: "<div></div>",
+  mounted() {
+    this.gridOptions = {
+      ...this.options,
+      onGridReady: (params) => params.api.sizeColumnsToFit(),
+    };
+    this.grid = new agGrid.Grid(this.$el, this.gridOptions);
+  },
+  methods: {
+    update_grid() {
+      replaceObject(this.options, this.gridOptions);
+      this.gridOptions.api.refreshCells();
+    },
+  },
+  props: {
+    options: Object,
+  },
+};
+
+function replaceArray(source, target) {
+  for (let i = 0; i < source.length; i++) {
+    if (typeof source[i] === "object") {
+      replaceObject(source[i], target[i]);
+    } else if (typeof source[i] === "array") {
+      replaceArray(source[i], target[i]);
+    } else {
+      target[i] = source[i];
+    }
+  }
+}
+
+function replaceObject(source, target) {
+  for (let key in source) {
+    if (typeof source[key] === "object") {
+      replaceObject(source[key], target[key]);
+    } else if (typeof source[key] === "array") {
+      replaceArray(source[key], target[key]);
+    } else {
+      target[key] = source[key];
+    }
+  }
+}

nicegui/elements/table.py

@@ -0,0 +1,29 @@
+from typing import Dict
+
+from .. import vue
+from ..element import Element
+
+vue.register_component('table', __file__, 'table.js', ['lib/ag-grid-community.min.js'])
+
+
+class Table(Element):
+
+    def __init__(self, options: Dict, *, theme: str = 'balham') -> None:
+        """Table
+
+        An element to create a table using `AG Grid <https://www.ag-grid.com/>`_.
+
+        :param options: dictionary of AG Grid options
+        :param theme: AG Grid theme (default: 'balham')
+        """
+        super().__init__('table')
+        self._props['options'] = options
+        self._classes = [f'ag-theme-{theme}', 'w-full', 'h-64']
+
+    @property
+    def options(self) -> Dict:
+        return self._props['options']
+
+    def update(self) -> None:
+        super().update()
+        self.run_method('update_grid')

nicegui/ui.py

@@ -37,6 +37,7 @@ from .elements.select import Select as select
 from .elements.separator import Separator as separator
 from .elements.slider import Slider as slider
 from .elements.switch import Switch as switch
+from .elements.table import Table as table
 from .elements.toggle import Toggle as toggle
 from .elements.tooltip import Tooltip as tooltip
 from .elements.tree import Tree as tree

website/api_docs_and_examples.py

@@ -189,7 +189,7 @@ To overlay an SVG, make the `viewBox` exactly the size of the image and provide
 
     h3('Data Elements')
 
-    # @example(ui.table)
+    @example(ui.table)
     def table_example():
         table = ui.table({
             'columnDefs': [
@@ -204,7 +204,7 @@ To overlay an SVG, make the `viewBox` exactly the size of the image and provide
         }).classes('max-h-40')
 
         def update():
-            table.options.rowData[0].age += 1
+            table.options['rowData'][0]['age'] += 1
             table.update()
 
         ui.button('Update', on_click=update)