@cdmx/wappler_ag_grid 0.0.3 → 0.0.4

package/app_connect/components.hjson

@@ -9,7 +9,7 @@
       "icon": "fa fa-lg fa-table",
       "state": "opened",
       "anyParent": true,
-      "template": "<dmx-ag-grid id=\"@@id@@-grid\">\n<div id=\"@@id@@\" class=\"col ag-theme-alpine\">\n</div>\n</dmx-ag-grid>",
+      "template": "<dmx-ag-grid id=\"@@id@@\"></dmx-ag-grid>",
       "baseName": "aggrid",
       "help": "AG Grid component for data display",
       "dataScheme": [
@@ -56,35 +56,6 @@
         {
           "group": "AG Grid Options",
           "variables": [
-            {
-              "name": "defaultColDef",
-              "attribute": "defaultColDef",
-              "title": "Default Column Definition",
-              "type": "object",
-              "defaultValue": {},
-              "help": "Default properties for all columns"
-            },
-            {
-              "name": "columnTypes",
-              "attribute": "columnTypes",
-              "title": "Column Types",
-              "type": "object",
-              "defaultValue": {},
-              "help": "Map of custom column types"
-            },
-            {
-              "name": "rowSelection",
-              "attribute": "rowSelection",
-              "title": "Row Selection",
-              "type": "string",
-              "defaultValue": "single",
-              "options": [
-                "single",
-                "multiple",
-                "none"
-              ],
-              "help": "Defines the row selection mode"
-            },
             {
               "name": "minWidth",
               "attribute": "minWidth",

package/dmx-ag-grid.js

@@ -160,6 +160,9 @@ dmx.Component('ag-grid', {
     const dataChanges = this.props.data_changes;
     let columnDefs = [];
     let exportToCSV = this.props.exportToCSV;
+
+
+    this.$node.innerHTML = `<div id=${gridId +'-grid'}></div>`
     if (!rowData || rowData.length === 0) {
       console.error('No row data provided.');
       return;
@@ -423,10 +426,9 @@ const cstyles = this.props.cstyles
       rowData: rowData,
       ...gridOptions
     };
-
     // Create ag-Grid instance
     new agGrid.Grid(gridDiv, gridConfig);
-    const gridElement = document.querySelector('.ag-theme-alpine');
+    const gridElement = document.getElementById(gridId+'-grid');
     const gridContainer = gridElement.parentNode;
 
     if (!gridContainer) {
@@ -486,13 +488,13 @@ const cstyles = this.props.cstyles
     'dmx-ag-grid-row-data-updated': Event
   },
 
-  render: function () {
-    // this.refreshGrid();
+  render: function(node) {
+    if (this.$node) {
+      this.$parse();
+    }
   },
 
   update: function (props) {
-    // dmx.equal is a helper function the does a deep compare
-    // which is useful when comparing arrays and objects
     if (!dmx.equal(this.props.data, props.data)) {
       this.refreshGrid();
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cdmx/wappler_ag_grid",
-    "version": "0.0.3",
+    "version": "0.0.4",
     "type": "module",
     "description": "App Connect module for AG Grid Table Generation",
     "license": "MIT",