@cdmx/wappler_ag_grid 0.9.4 → 0.9.6

package/README.md

@@ -200,6 +200,7 @@ The "Total Row Footer" feature allows you to define and display a footer row in
 Configuration includes:
 - **Columns To Count**: Specify the columns you want to count in the footer row. Separate column names with commas.
 - **Columns To Sum**: Specify the columns you want to calculate the sum of in the footer row. Separate column names with commas.
+- **Fixed Footer**: Enables fixed footer totals row. (Default: false)
 
 ---
 

package/app_connect/components.hjson

@@ -1163,7 +1163,8 @@
               "display": "fieldset",
               "show": [
                 "columnsToCount",
-                "columnsToSum"
+                "columnsToSum",
+                "enableFixedFooter"
               ],
               "noChangeOnHide": true,
               "groupEnabler": true,
@@ -1205,7 +1206,16 @@
                   "title": "Columns To Sum",
                   "type": "text",
                   "initDisplay": "none"
-                }
+                },
+                {
+                  "name": "enableFixedFooter",
+                  "attribute": "dmx-bind:fixed_footer",
+                  "title": "Fixed Footer",
+                  "type": "boolean",
+                  "initDisplay": "none",
+                  "defaultValue": false,
+                  "help": "Enables Fixed Total Row Footer"
+                },
               ]
             }
           ]
@@ -2057,7 +2067,7 @@
           "attribute": "pagination_page_size",
           "isValue": true,
           "dataBindings": true,
-          "title": "Pagination Page Size:",
+          "title": "Pagination Page Size",
           "type": "text",
           "help": "Pagination Page Size.",
           "defaultValue": "",
@@ -2068,6 +2078,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

@@ -61,6 +61,7 @@ dmx.Component('ag-grid', {
     fixed_top_offset: { type: Number, default: 80 },
     fixed_horizontal_scroll: { type: Boolean, default: false },
     fixed_horizontal_scroll_width: { type: Number, default: 80 },
+    fixed_footer: { type: Boolean, default: false },
     timezone: {type: String, default: '' },
     cell_click_event: {type: Boolean, default: false },
     row_click_event: {type: Boolean, default: false },
@@ -1081,11 +1082,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,
@@ -1216,7 +1217,7 @@ dmx.Component('ag-grid', {
     if ((options.columns_to_sum && options.columns_to_sum.split(',').length > 0) || (options.columns_to_count.length > 0)) {
       let columnsToSum = options.columns_to_sum ? options.columns_to_sum.split(',') : [];
       let columnsToCount = options.columns_to_count;
-
+      
       gridConfig.onFilterChanged = function (e) {
         totalRow(e.api, columnsToSum, columnsToCount);
       };
@@ -1261,7 +1262,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';
@@ -1272,6 +1273,30 @@ dmx.Component('ag-grid', {
         }
       });
     }
+    if (options.fixed_footer) {
+      window.addEventListener('scroll', function () {
+        if (gridDiv.scrollTop >= (gridDiv.scrollHeight - gridDiv.clientHeight)) {
+          const footerRow = document.querySelector('.ag-row-pinned');
+          if (footerRow) {
+            footerRow.classList.remove('ag-row-pinned');
+            footerRow.classList.add('ag-row-even');
+            footerRow.style.position = 'fixed';
+            footerRow.style.bottom = '10px';
+            footerRow.style.paddingBottom = '27px'
+          }
+          const bottomViewport = document.querySelector('.ag-floating-bottom-viewport');
+          if (bottomViewport) {
+            bottomViewport.style.position = 'fixed';
+            bottomViewport.style.bottom = '0';
+          }
+        } else {
+          const footerRow = document.querySelector('.fixed-footer-row');
+          if (footerRow) {
+            footerRow.classList.add('ag-row-pinned'); 
+          }
+        }
+      });
+    }
     exportSelectedRows = () => {
       const selectedRows = gridConfig.api.getSelectedRows();
       this.set('selectedRows', selectedRows);

package/package.json

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