@cdmx/wappler_ag_grid 0.8.7 → 0.8.8

package/README.md

@@ -326,6 +326,14 @@ Specify the tooltip text for Button 10.
 - To be used if you wish to use a separate Export button instead of using the inbuilt top left-cornered Export button.
 - Trigger this action to call Export Data to CSV download action.
 
+**Save Column State**
+- This action allows you to save the current state of the grid's columns, including their visibility and order, to the browser's local storage.
+- It is useful when you want to remember and restore a specific column configuration for the grid.
+
+**Reset Column State**
+- This action enables you to reset the grid's column state to default state.
+- It is useful when you want to revert the column configuration to a default configuration.
+
 ## License
 
 The AG Grid module is licensed under the MIT License. Please refer to the license file for more details.

package/app_connect/components.hjson

@@ -1825,6 +1825,24 @@
           state: 'opened',
           help: 'Export AG Grid Data to CSV',
           properties: []
+        },
+        {
+          addTitle: 'SaveColumnState',
+          title: 'Save Column State',
+          name: 'saveColumnState',
+          icon: 'fa fa-lg fa-save',
+          state: 'opened',
+          help: 'Save Column State to Browser Local Storage',
+          properties: []
+        },
+        {
+          addTitle: 'ResetColumnState',
+          title: 'Reset Column State',
+          name: 'resetColumnState',
+          icon: 'fa fa-lg fa-undo',
+          state: 'opened',
+          help: 'Save Column State to Browser Local Storage',
+          properties: []
         }
       ],
       "children": [],

package/dmx-ag-grid.js

@@ -170,6 +170,22 @@ dmx.Component('ag-grid', {
           console.error('Grid not loaded to perform export');
         }
       }, this);
+    },
+    saveColumnState: function () {
+      dmx.nextTick(function() {
+        if (typeof saveColumnStateToStorage === 'function') {
+          saveColumnStateToStorage();
+        } else {
+          console.error('Grid not loaded to perform saveColumnState');
+        }
+      }, this);
+    },
+    resetColumnState: function () {
+      dmx.nextTick(function() {
+        localStorage.removeItem('columnState');
+        let gridInstance = this.refreshGrid();
+        this.set('gridInstance', gridInstance);
+      }, this);
     }
   },
 
@@ -1061,6 +1077,24 @@ dmx.Component('ag-grid', {
         gridInstance = null;
     }
     const gridConfig = {
+      onGridReady: function (params) {
+        const columnApi = params.columnApi;
+        saveColumnStateToStorage = () => {
+          const columnState = columnApi.getColumnState();
+          localStorage.setItem('columnState', JSON.stringify(columnState));
+        }
+        function restoreColumnState() {
+          const savedColumnState = JSON.parse(localStorage.getItem('columnState'));
+          if (savedColumnState) {
+            columnApi.applyColumnState({
+              state: savedColumnState,
+              applyOrder: true,
+              applyVisibility: true,
+            });
+          }
+        }
+        restoreColumnState();
+      },
       columnDefs: columnDefs,
       rowData: rowData,
       ...gridOptions

package/package.json

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