@cdmx/wappler_ag_grid 0.8.2 → 0.8.4

package/README.md

@@ -186,6 +186,16 @@ These configurations help you create organized and logical groupings of columns
 
 ---
 
+### Total Row Footer
+
+The "Total Row Footer" feature allows you to define and display a footer row in a grid or table that shows the totals and counts of specified columns. This can be helpful for summarizing data in your grid and providing users with a quick overview of important statistics.
+
+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.
+
+---
+
 # Configure Actions Column
 The Configure Actions Column feature allows you to configure actions for the buttons in the Actions Column.
 

package/app_connect/components.hjson

@@ -1141,6 +1141,42 @@
             }
           ]
         },
+        {
+          "group": "📒 Total Row Footer",
+          "variables": [
+            {
+              "name": "totalRowFooter",
+              "title": "Total Row Footer",
+              "attribute": "total_row_footer",
+              "type": "boolean",
+              "defaultValue": false,
+              "display": "fieldset",
+              "show": [
+                "columnsToCount",
+                "columnsToSum"
+              ],
+              "noChangeOnHide": true,
+              "groupEnabler": true,
+              "help": "Define the Columns to Count and Sum in the Footer row"
+              "children": [
+                {
+                 "name": "columnsToCount",
+                  "attribute": "columns_to_count",
+                  "title": "Columns To Count",
+                  "type": "text",
+                  "initDisplay": "none"
+                },
+                {
+                  "name": "columnsToSum",
+                  "attribute": "columns_to_sum",
+                  "title": "Columns To Sum",
+                  "type": "text",
+                  "initDisplay": "none"
+                }
+              ]
+            }
+          ]
+        },
         {
           "group": "📒 Configure Actions Column",
           "variables": [

package/dmx-ag-grid.js

@@ -140,7 +140,9 @@ dmx.Component('ag-grid', {
     compact_view: { type: Boolean, default: false },
     compact_view_grid_size: { type: Number, default: 3 },
     compact_view_item_height: { type: Number, default: 20 },
-    group_config: { type: Array, default: [] }
+    group_config: { type: Array, default: [] },
+    columns_to_count: { type: String, default: null },
+    columns_to_sum: { type: String, default: null }
   },
 
   methods: {
@@ -351,11 +353,16 @@ dmx.Component('ag-grid', {
       if (params.value == null) {
         return "-";
       }
-
       if (typeof params.value === "string") {
         return params.value.trim() === "" ? "-" : params.value;
       }
-
+      if (typeof params.value === "object") {
+        try {
+          return JSON.stringify(params.value);
+        } catch (error) {
+          return "Object cannot be stringified";
+        }
+      }
       return params.value;
     }
     function formatDate(timestamp) {
@@ -995,6 +1002,42 @@ dmx.Component('ag-grid', {
         actionsRenderer: actionsRenderer
       }
     };
+    const totalRow = function (api, columnsToSum, columnsToCount) {
+      if (!columnsToSum && !columnsToCount) {
+        return;
+      }
+      let rowData = [];
+      api.forEachNodeAfterFilter(node => {
+        rowData.push({ "data": node.data, "index": node.childIndex });
+      });
+      let result = [{}];
+    
+      if (columnsToSum) {
+        // Initialize and calculate sum columns
+        columnsToSum.forEach(function (col) {
+          result[0][col] = 0;
+          rowData.forEach(function (line) {
+            if (line.index < rowData.length) {
+              result[0][col] += parseFloat(line.data[col]) || line.data[col];
+            }
+          });
+        });
+      }
+    
+      if (columnsToCount) {
+        // Initialize and calculate count columns
+        columnsToCount.forEach(function (col) {
+          result[0][col] = 0;
+          rowData.forEach(function (line) {
+            if (line.index < rowData.length) {
+              result[0][col]++;
+            }
+          });
+        });
+      }
+      api.setPinnedBottomRowData(result);
+    }
+
     const gridDiv = document.getElementById(options.id+'-grid');
     
 
@@ -1012,6 +1055,21 @@ dmx.Component('ag-grid', {
       rowData: rowData,
       ...gridOptions
     };
+    // Conditionally add event listeners based on whether columnsToSum or columnsToCount are defined
+    if ((options.columns_to_sum && options.columns_to_sum.split(',').length > 0) || (options.columns_to_count && options.columns_to_count.split(',').length > 0)) {
+      let columnsToSum = options.columns_to_sum ? options.columns_to_sum.split(',') : [];
+      let columnsToCount = options.columns_to_count ? options.columns_to_count.split(',') : [];
+
+      gridConfig.onFilterChanged = function (e) {
+        totalRow(e.api, columnsToSum, columnsToCount);
+      };
+      gridConfig.onFirstDataRendered = function (e) {
+        totalRow(e.api, columnsToSum, columnsToCount);
+      };
+      gridConfig.postSortRows = function (e) {
+        totalRow(e.api, columnsToSum, columnsToCount);
+      };
+    }
     // Create ag-Grid instance
     gridInstance = new agGrid.Grid(gridDiv, gridConfig);
     const gridElement = document.getElementById(options.id+'-grid');

package/package.json

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