@cdmx/wappler_ag_grid 0.6.0 → 0.6.1

package/README.md

@@ -233,7 +233,7 @@ Specify the CSS class for styling the icon of the Delete Action button.
 - Use Case: Used when you're awaiting the population of specific elements or data before loading the grid. It's also useful for refreshing the grid intentionally.
 
 **Reload** (Beta)
-- To be used in conjunction with "No Auto Load" being enabled
+- To be used in conjunction with "No Auto Load" enabled
 - This performs a transactional update of the client-side data in the grid after comparing the existing and updated datasets
 - To use this: Enable "No Auto Load", On Edit or update actions, perform an SC load, On Success of SC load perform the AG Grid Module Reload Action.
 

package/app_connect/components.hjson

@@ -1098,6 +1098,68 @@
             }
           ]
         },
+        {
+          "group": "📒 Column Groups",
+          "variables": [
+            {
+              "name": "groupConfig",
+              "title": "Configure Column Groups",
+              "type": "boolean",
+              "defaultValue": false,
+              "display": "fieldset",
+              "show": [
+                "listGroupConfig",
+              ],
+              "noChangeOnHide": true,
+              "groupEnabler": true,
+              "help": "Apply Column grouping"
+              "children": [
+                {
+                  "name": "listGroupConfig",
+                  "attribute": "dmx-bind:group_config",
+                  "title": "Group Config",
+                  "type": "grid",
+                  "dataBindings": true,
+                  "jsonFormat": true,
+                  "encloseBT": true,
+                  "jsonBT": true,
+                  "initDisplay": "none",
+                  "columns": [
+                    {
+                      "field": "name",
+                      "caption": "Group Name",
+                      "size": "25%",
+                      "editable": {
+                        "type": "text"
+                      }
+                    },
+                    {
+                      field: "start_field",
+                      caption: "Start Field",
+                      size: "25%",
+                      editable: {
+                        type: "text"
+                      }
+                    },
+                    {
+                      field: "end_field",
+                      caption: "Start Field",
+                      size: "25%",
+                      editable: {
+                        type: "text"
+                      }
+                    }
+                  ],
+                  "newRecord": {
+                    "name": "",
+                    "start_field": "",
+                    "end_field": ""
+                  }
+                }
+              ]
+            }
+          ]
+        },
         {
           "group": "📒 Configure Actions Column",
           "variables": [

package/dmx-ag-grid.js

@@ -85,7 +85,8 @@ dmx.Component('ag-grid', {
     hide_sort: {type: Array, default: [] },
     compact_view: { type: Boolean, default: false },
     compact_view_grid_size: { type: Number, default: 3 },
-    compact_view_item_height: { type: Number, default: 20 }
+    compact_view_item_height: { type: Number, default: 20 },
+    group_config: { type: Array, default: [] }
   },
 
   methods: {
@@ -149,6 +150,7 @@ dmx.Component('ag-grid', {
     const enableCellClickEvent = this.props.row_click_event && (this.props.enable_actions || this.props.row_checkbox_event); 
     let localeText;
     let columnDefs = [];
+    let groupedColumnDefs = [];
     let exportToCSV = this.props.export_to_csv;
     let gridInstance = null; 
     this.$node.innerHTML = `<div id=${options.id}-grid class="${options.grid_theme}"></div>`;
@@ -559,7 +561,6 @@ dmx.Component('ag-grid', {
       columnDefs = this.props.column_defs;
     } else {
       const firstRow = rowData[0];
-
       columnDefs = Object.keys(firstRow).map(key => {
         // Assuming rowData is an array of objects
         const values = rowData.map(row => row[key]);
@@ -726,7 +727,6 @@ dmx.Component('ag-grid', {
         else {
           hide = undefined;
         }
-
         return {
           headerName: headerName,
           field: key,
@@ -748,6 +748,27 @@ dmx.Component('ag-grid', {
           cellRenderer: cellRenderer
         };
       });
+      if (options.group_config && options.group_config.length > 0) {
+        groupedColumnDefs = options.group_config.map(group => {
+          const startFieldIndex = columnDefs.findIndex(colDef => colDef.field === group.start_field);
+          const endFieldIndex = columnDefs.findIndex(colDef => colDef.field === group.end_field);
+      
+          if (startFieldIndex === -1 || endFieldIndex === -1 || startFieldIndex > endFieldIndex) {
+              return null;
+          }
+      
+          const groupColumns = columnDefs.slice(startFieldIndex, endFieldIndex + 1)
+              .map(col => ({
+                  ...col,
+                  columnGroupShow: 'open'
+              }));
+      
+          return {
+              headerName: group.name,
+              children: groupColumns
+          };
+      }).filter(group => group !== null);
+    }
     }
     window.onRowClicked = (event) => {
       const rowData = event.data;
@@ -834,7 +855,7 @@ dmx.Component('ag-grid', {
       localeText = AG_GRID_LOCALE_HE
     }
     const gridOptions = {
-      columnDefs: columnDefs,
+      columnDefs: (groupedColumnDefs && groupedColumnDefs.length > 0) ? groupedColumnDefs : columnDefs,
       localeText: localeText,
       enableRtl: options.enable_rtl,
       noRowsOverlayComponent: '<div>No Records Found.</div>',

package/package.json

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