@cdmx/wappler_ag_grid 1.9.12 → 1.9.14

package/app_connect/components.hjson

@@ -52,6 +52,11 @@
           "name": "selectedRows",
           "title": "selectedRows",
           "type": "array"
+        },
+        {
+          "name": "columnState",
+          "title": "columnState",
+          "type": "array"
         }
       ],
       "outputType": "object",
@@ -3376,6 +3381,40 @@
     }
   ],
   "attributes": [
+     {
+      name: "dmx_ag_grid_column_state_key",
+      attributeStartsWith: "dmx-bind",
+      attribute: "column_state_storage_key",
+      title: "Column State Storage Key",
+      type: "boolean",
+      display: "fieldset",
+      icon: "fa fa-lg fa-chevron-right",
+      groupTitle: "Grid Config",
+      groupIcon: "fa fa-lg fa-cubes",
+      defaultValue: false,
+      show: [
+        "columnStateStorageKey"
+      ],
+      noChangeOnHide: true,
+      groupEnabler: true,
+      children: [
+        {
+          name: "columnStateStorageKey",
+          attributeStartsWith: "dmx-bind",
+          attribute: "column_state_storage",
+          isValue: true,
+          dataBindings: true,
+          title: "Key Name",
+          type: "text",
+          help: "Optional: Provide a custom key to store and retrieve column state from Local Storage.",
+          defaultValue: "",
+          initDisplay: "none"
+        }
+      ],
+      allowedOn: {
+        dmx-ag-grid: true
+      }
+    },
     {
       "name": "dmx-ag-grid-value",
       "attributeStartsWith": "dmx-bind",

package/dmx-ag-grid.js

@@ -6,6 +6,7 @@ dmx.Component('ag-grid', {
     fields: {},
     fileData: [],
     selectedRows: [],
+    columnState: [],
     state: {
       gridReady: !1,
       firstDataRendered: !1,
@@ -260,7 +261,8 @@ dmx.Component('ag-grid', {
     columns_to_count: { type: Array, default: [] },
     columns_to_sum: { type: String, default: null },
     footer_sum_precision: { type: Number, default: null },
-    columns_to_count_nonunique: { type: Boolean, default: false }
+    columns_to_count_nonunique: { type: Boolean, default: false },
+    column_state_storage_key: { type: String, default: null }
   },
 
   methods: {
@@ -312,9 +314,10 @@ dmx.Component('ag-grid', {
     resetColumnState: function () {
       dmx.nextTick(function() {
         const idValue = this.$node.querySelector('dmx-ag-grid > div')?.getAttribute('id') ?? 'Grid not found';
-        const currentPageUrl = window.location.origin + window.location.pathname;
+        const currentPageUrl = window.location.pathname;
         const uniqueId = `${currentPageUrl}_${idValue}`;
-        localStorage.removeItem(`columnState_${uniqueId}`);
+        const storageKey = options.column_state_storage_key || uniqueId;
+        localStorage.removeItem(`dmxState-${storageKey}`);
         let gridInstance = this.refreshGrid();
         this.set('gridInstance', gridInstance);
       }, this);
@@ -1649,17 +1652,27 @@ dmx.Component('ag-grid', {
         saveColumnStateToStorage = () => {
           const columnState = columnApi.getColumnState();
           const pageId = getPageId();
-          localStorage.setItem(`columnState_${pageId}`, JSON.stringify(columnState));    
+          const storageKey = options.column_state_storage_key || pageId;
+          localStorage.setItem(`dmxState-${storageKey}`, JSON.stringify(columnState));
+          this.set('columnState', columnState);
         }
+
         function restoreColumnState() {
           const pageId = getPageId();
-          const savedColumnState = JSON.parse(localStorage.getItem(`columnState_${pageId}`));
+          const storageKey = options.column_state_storage_key || pageId;
+          const savedColumnState = localStorage.getItem(`dmxState-${storageKey}`);
+
           if (savedColumnState) {
-            columnApi.applyColumnState({
-              state: savedColumnState,
-              applyOrder: true,
-              applyVisibility: true,
-            });
+            try {
+              const parsedState = JSON.parse(savedColumnState);
+              columnApi.applyColumnState({
+                state: parsedState,
+                applyOrder: true,
+                applyVisibility: true,
+              });
+            } catch (err) {
+              console.warn(`Failed to parse column state for key: dmxState-${storageKey}`, err);
+            }
           }
         }
         restoreColumnState();
@@ -1782,7 +1795,7 @@ dmx.Component('ag-grid', {
         gridInstance = null;
     }
     const getPageId = () => {
-      const currentPageUrl = window.location.origin + window.location.pathname;
+      const currentPageUrl = window.location.pathname;
       const optionsId = options.id+'-grid';
       const uniqueId = `${currentPageUrl}_${optionsId}`;
       return uniqueId;

package/package.json

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