@cdmx/wappler_ag_grid 0.0.3 → 0.0.5

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",
@@ -95,7 +66,7 @@
             },
             {
               "name": "resizable",
-              "attribute": "resizable",
+              "attribute": "dmx-bind:resizable",
               "title": "Resizable",
               "type": "boolean",
               "defaultValue": true,
@@ -103,7 +74,7 @@
             },
             {
               "name": "sortable",
-              "attribute": "sortable",
+              "attribute": "dmx-bind:sortable",
               "title": "Sortable",
               "type": "boolean",
               "defaultValue": true,
@@ -111,7 +82,7 @@
             },
             {
               "name": "filter",
-              "attribute": "filter",
+              "attribute": "dmx-bind:filter",
               "title": "Filter",
               "type": "boolean",
               "defaultValue": true,
@@ -119,7 +90,7 @@
             },
             {
               "name": "floatingFilter",
-              "attribute": "floatingFilter",
+              "attribute": "dmx-bind:floatingFilter",
               "title": "Floating Filter",
               "type": "boolean",
               "defaultValue": true,
@@ -127,7 +98,7 @@
             },
             {
               "name": "exportToCSV",
-              "attribute": "exportToCSV",
+              "attribute": "dmx-bind:exportToCSV",
               "title": "CSV Export",
               "type": "boolean",
               "defaultValue": true,
@@ -135,7 +106,7 @@
             },
             {
               "name": "columnHoverHighlight",
-              "attribute": "columnHoverHighlight",
+              "attribute": "dmx-bind:columnHoverHighlight",
               "title": "Column Hover Highlight",
               "type": "boolean",
               "defaultValue": true,
@@ -143,7 +114,7 @@
             },
             {
               "name": "suppressRowDeselection",
-              "attribute": "suppressRowDeselection",
+              "attribute": "dmx-bind:suppressRowDeselection",
               "title": "Supress Row Deselection",
               "type": "boolean",
               "defaultValue": true,
@@ -151,7 +122,7 @@
             },
             {
               "name": "pagination",
-              "attribute": "pagination",
+              "attribute": "dmx-bind:pagination",
               "title": "Pagination",
               "type": "boolean",
               "defaultValue": true,

package/dmx-ag-grid.js

@@ -62,87 +62,31 @@ dmx.Component('ag-grid', {
     suppressRowClickSelection: { type: Boolean, default: false },
     suppressMenuHide: { type: Boolean, default: false },
     suppressMovableColumns: { type: Boolean, default: false },
-    enableCellExpressions: {
-      type: Boolean,
-      default: false
-    },
-    animateRows: {
-      type: Boolean,
-      default: false
-    },
-    suppressAggFuncInHeader: {
-      type: Boolean,
-      default: false
-    },
-    suppressAggAtRootLevel: {
-      type: Boolean,
-      default: false
-    },
-    suppressClipboardPaste: {
-      type: Boolean,
-      default: false
-    },
-    suppressScrollOnNewData: {
-      type: Boolean,
-      default: false
-    },
-    suppressPropertyNamesCheck: {
-      type: Boolean,
-      default: false
-    },
-    localeText: {
-      default: null
-    },
-    minWidth: {
-      type: Number,
-      default: 150
-    },
-    sortable: {
-      type: Boolean,
-      default: true
-    },
-    resizable: {
-      type: Boolean,
-      default: true
-    },
-    filter: {
-      type: Boolean,
-      default: true
-    },
-    floatingFilter: {
-      type: Boolean,
-      default: true
-    },
-    columnHoverHighlight: {
-      type: Boolean,
-      default: true
-    },
-    exportToCSV: {
-      type: Boolean,
-      default: true
-    },
-    fixedHeader: {
-      type: Boolean,
-      default: false
-    },
-    topbarClass: {
-      type: Text,
-      default: 'topbar'
-    },
-    fixedHeaderOffset: {
-      type: Number,
-      default: 100
-    },
-    fixedTopOffset: {
-      type: Number,
-      default: 80
-    },
+    enableCellExpressions: { type: Boolean, default: false },
+    animateRows: { type: Boolean, default: false },
+    suppressAggFuncInHeader: { type: Boolean, default: false },
+    suppressAggAtRootLevel: { type: Boolean, default: false },
+    suppressClipboardPaste: { type: Boolean, default: false },
+    suppressScrollOnNewData: { type: Boolean, default: false },
+    suppressPropertyNamesCheck: { type: Boolean, default: false },
+    localeText: { default: null }, 
+    minWidth: { type: Number, default: 150 },
+    sortable: { type: Boolean, default: true },
+    resizable: { type: Boolean, default: true },
+    filter: { type: Boolean, default: true },
+    floatingFilter: { type: Boolean, default: true },
+    columnHoverHighlight: { type: Boolean, default: true },
+    exportToCSV: { type: Boolean, default: true },
+    fixedHeader: { type: Boolean, default: false },
+    topbarClass: { type: Text, default: 'topbar' },
+    fixedHeaderOffset: { type: Number, default: 100 },
+    fixedTopOffset: { type: Number, default: 80 },
     fixedHorizonatalScroll: { type: Boolean, default: false },
     timezone: {type: Text, default: '' }
   },
 
   methods: {
-    setData: function (rowData, columnDefs) {
+    setValue: function (rowData, columnDefs) {
       this.set('rowData', rowData);
       this.set('columnDefs', columnDefs);
       this.refreshGrid();
@@ -160,6 +104,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 +370,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 +432,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.5",
     "type": "module",
     "description": "App Connect module for AG Grid Table Generation",
     "license": "MIT",