@cdmx/wappler_ag_grid 0.9.3 → 0.9.5

package/README.md

@@ -341,6 +341,10 @@ Specify the tooltip text for Button 10.
 - 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.
 
+**Pin Columns to Left**
+- 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.
+
 **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

@@ -1851,9 +1851,29 @@
           name: 'resetColumnState',
           icon: 'fa fa-lg fa-undo',
           state: 'opened',
-          help: 'Save Column State to Browser Local Storage',
+          help: 'Reset Column State stored in Browser Local Storage',
           properties: []
         },
+        {
+          addTitle: 'pinColumnsState',
+          title: 'Pin Columns',
+          name: 'pinColumns',
+          icon: 'fa fa-lg fa-thumbtack',
+          state: 'opened',
+          help: 'Pin Columns to Left',
+          properties: [
+            {
+              group: 'Properties',
+              variables: [
+                {
+                  name: '1', optionName: '1', title: 'Column Name', type: 'text',
+                  dataBindings: true, defaultValue: '', required: true,
+                  help: 'Column Name to Pin to the Left'
+                }
+              ]
+            }
+          ]
+        },
         {
           addTitle: 'importFileData',
           title: 'Import File Data',
@@ -2037,7 +2057,7 @@
           "attribute": "pagination_page_size",
           "isValue": true,
           "dataBindings": true,
-          "title": "Pagination Page Size:",
+          "title": "Pagination Page Size",
           "type": "text",
           "help": "Pagination Page Size.",
           "defaultValue": "",
@@ -2048,6 +2068,40 @@
         "dmx-ag-grid": true
       }
     },
+    {
+      "name": "dmx-ag-grid-floating-filter",
+      "attributeStartsWith": "dmx-bind",
+      "attribute": "floating_filter",
+      "title": "Floating Filter",
+      "type": "boolean",
+      "display": "fieldset",
+      "icon": "fa fa-lg fa-chevron-right",
+      "groupTitle": "Grid Config",
+      "groupIcon": "fa fa-lg fa-cubes",
+      "defaultValue": false,
+      "show": [
+        "floatingFilters"
+      ],
+      "noChangeOnHide": true,
+      "groupEnabler": true,
+      "children": [
+        {
+          "name": "floatingFilters",
+          "attributeStartsWith": "dmx-bind",
+          "attribute": "floating_filter",
+          "isValue": true,
+          "dataBindings": true,
+          "title": "Floating Filter",
+          "type": "text",
+          "help": "Show/Hide FLoating Filters",
+          "defaultValue": "",
+          "initDisplay": "none"
+        }
+      ],
+      "allowedOn": {
+        "dmx-ag-grid": true
+      }
+    },
     {
       "name": "dmx-ag-grid-locale",
       "attributeStartsWith": "dmx-bind",

package/dmx-ag-grid.js

@@ -193,6 +193,9 @@ dmx.Component('ag-grid', {
         this.set('gridInstance', gridInstance);
       }, this);
     },
+    pinColumns: function (fieldId) {
+      pinColumnToLeft(fieldId);
+    },
     importFileData: async function (fieldId) {
       await this.parseFileData(fieldId);
     },
@@ -1078,11 +1081,11 @@ dmx.Component('ag-grid', {
       rowStyle: enableRowClickEvent || enableCellClickEvent ? { cursor: 'pointer' } : undefined,
       defaultColDef: {
         flex: 1,
-        minWidth: this.props.min_width,
-        resizable: this.props.resizable,
-        filter: this.props.filter,
-        sortable: this.props.sortable,
-        floatingFilter: this.props.floating_filter
+        minWidth: options.min_width,
+        resizable: options.resizable,
+        filter: options.filter,
+        sortable: options.sortable,
+        floatingFilter: options.floating_filter
       },
       domLayout: this.props.dom_layout,
       enableCellTextSelection: true,
@@ -1177,6 +1180,16 @@ dmx.Component('ag-grid', {
     const gridConfig = {
       onGridReady: function (params) {
         const columnApi = params.columnApi;
+        pinColumnToLeft = (fieldToPin) => {
+          const columnState = columnApi.getColumnState();
+          const columnIndex = columnState.findIndex(column => column.colId === fieldToPin);
+          if (columnIndex !== -1) {
+            for (let i = 0; i <= columnIndex; i++) {
+              columnState[i].pinned = 'left';
+            }
+            columnApi.applyColumnState({ state: columnState });
+          }
+        }
         saveColumnStateToStorage = () => {
           const columnState = columnApi.getColumnState();
           const pageId = getPageId();
@@ -1248,7 +1261,7 @@ dmx.Component('ag-grid', {
         const topbar = document.querySelector('.' + options.topbar_class);
         const topbarHeight = (topbar ? topbar.getBoundingClientRect().height : 0) + options.fixed_top_offset;
         const headerPos = (topbar ? topbar.getBoundingClientRect().bottom : 0) + options.fixed_header_offset;
-        if (window.pageYOffset > headerPos) {
+        if (window.scrollY > headerPos) {
           header.style.position = 'fixed';
           header.style.top = `${topbarHeight}px`;
           header.style.zIndex = '1';
@@ -1349,23 +1362,19 @@ dmx.Component('ag-grid', {
     // Create the export button
     if (exportToCSV) {
       const existingExportButton = document.getElementById('exportButton');
-      // If it already exists, just exit the function
       if (existingExportButton) {
         return;
       }
       const exportButton = document.createElement('button');
       exportButton.id = 'exportButton'; 
-
-        // Add the icon
       const icon = document.createElement('i');
-      icon.classList.add('fas', 'fa-file-csv'); // Use the Font Awesome icon class here
+      icon.classList.add('fas', 'fa-file-csv');
       exportButton.appendChild(icon);
 
       // Add the button text
       const buttonText = document.createElement('span');
       buttonText.innerText = ' Export to CSV';
       exportButton.appendChild(buttonText);
-      // Add some fancy styles to the button
       exportButton.style.backgroundColor = '#4CAF50';
       exportButton.style.border = 'none';
       exportButton.style.color = 'white';

package/package.json

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