update table by replacing whole DOM element #204

nicegui/elements/table.js

@@ -1,17 +1,17 @@
 export default {
   template: "<div></div>",
   mounted() {
-    this.gridOptions = {
-      ...this.options,
-      onGridReady: (params) => params.api.sizeColumnsToFit(),
-    };
-    this.grid = new agGrid.Grid(this.$el, this.gridOptions);
-    this.gridOptions.api.addGlobalListener(this.handle_event);
+    this.update_grid();
   },
   methods: {
     update_grid() {
-      replaceObject(this.options, this.gridOptions);
-      this.gridOptions.api.refreshCells();
+      this.$el.textContent = "";
+      this.gridOptions = {
+        ...this.options,
+        onGridReady: (params) => params.api.sizeColumnsToFit(),
+      };
+      this.grid = new agGrid.Grid(this.$el, this.gridOptions);
+      this.gridOptions.api.addGlobalListener(this.handle_event);
     },
     call_api_method(name, ...args) {
       this.gridOptions.api[name](...args);
@@ -55,27 +55,3 @@ export default {
     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];
-    }
-  }
-}