@cdmx/wappler_ag_grid 0.9.8 → 1.0.0

package/README.md

@@ -346,6 +346,9 @@ Specify the tooltip text for Button 10.
 - This action allows you to pin one or more columns to the left side of the grid.
 - It is useful when you want to freeze specific columns in place for easy reference, even as you scroll horizontally.
 
+**Hide Columns**
+- The "Hide Columns" feature allows you to selectively hide one or more columns.
+
 **Import File Data**
 - The "Import File Data" action allows to import data from CSV and XLSX files into the AG Grid. This action simplifies the process of populating the grid with external data sources.
 - Key Features:

package/app_connect/components.hjson

@@ -1895,6 +1895,26 @@
             }
           ]
         },
+        {
+          addTitle: 'hideColumnsInGrid',
+          title: 'Hide Columns',
+          name: 'hideColumns',
+          icon: 'fa fa-lg fa-eye-slash',
+          state: 'opened',
+          help: 'Hide Columns',
+          properties: [
+            {
+              group: 'Properties',
+              variables: [
+                {
+                  name: '1', optionName: '1', title: 'Column Name', type: 'text',
+                  dataBindings: true, defaultValue: '', required: true,
+                  help: 'Hide Columns'
+                }
+              ]
+            }
+          ]
+        },
         {
           addTitle: 'importFileData',
           title: 'Import File Data',

package/dmx-ag-grid.js

@@ -189,7 +189,6 @@ dmx.Component('ag-grid', {
         const idValue = this.$node.querySelector('dmx-ag-grid > div')?.getAttribute('id') ?? 'Grid not found';
         const currentPageUrl = window.location.origin + window.location.pathname;
         const uniqueId = `${currentPageUrl}_${idValue}`;
-        console.log(uniqueId)
         localStorage.removeItem(`columnState_${uniqueId}`);
         let gridInstance = this.refreshGrid();
         this.set('gridInstance', gridInstance);
@@ -198,6 +197,9 @@ dmx.Component('ag-grid', {
     pinColumns: function (fieldId) {
       pinColumnToLeft(fieldId);
     },
+    hideColumns: function (fieldId) {
+      hideColumn(fieldId);
+    },
     importFileData: async function (fieldId) {
       await this.parseFileData(fieldId);
     },
@@ -993,7 +995,7 @@ dmx.Component('ag-grid', {
           headerCheckboxSelectionFilteredOnly: false,
           headerName: '',
           colId: 'checkboxColumn',
-          field: null, 
+          field: null,
           filter: '',
           checkboxSelection: true,
           showDisabledCheckboxes: true,
@@ -1182,6 +1184,9 @@ dmx.Component('ag-grid', {
     const gridConfig = {
       onGridReady: function (params) {
         const columnApi = params.columnApi;
+        hideColumn = (fieldToHide) => {
+          columnApi.setColumnsVisible([fieldToHide], false);
+        }
         pinColumnToLeft = (fieldToPin) => {
           const columnState = columnApi.getColumnState();
           const columnIndex = columnState.findIndex(column => column.colId === fieldToPin);

package/package.json

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