@cdmx/wappler_ag_grid 2.1.0 → 2.1.2

package/README.md

@@ -2,13 +2,14 @@
 
 **Major Update:** This release upgrades AG Grid to v35.1.0, bringing continued performance improvements and new features.
 
-## 🚀 What's New in v2.0.23
+## 🚀 What's New in v2.1.1
 
 1. **🔥 AG Grid v35.1.0** - Latest version with all community features
 2. **⚡ Smooth Upgrade** - Non-breaking upgrade from v34, all existing configurations continue to work
 3. **🎨 HTML Tooltips** - Rich HTML tooltip support with JavaScript functions
 4. **🔧 Enhanced Tooltip System** - Custom tooltip components with automatic HTML detection
 5. **🚫 Suppress Model Update** - Option to prevent automatic reprocessing after update transactions
+6. **📤 Simplified Export Action** - Export format now uses a single dropdown selector (CSV, PDF, XLS) instead of separate checkboxes
 
 ## 🔄 Migration from v34 to v35
 
@@ -566,7 +567,11 @@ You can also specify left-only conditions, where only the field name is provided
 
 **Export**
 - To be used if you wish to use a separate Export button instead of using the inbuilt top left-cornered Export button.
-- Trigger this action to call Export Data to CSV/PDF download action based on selected file Type.
+- Trigger this action to export grid data in your chosen format.
+- **Format**: Select the export format from the dropdown:
+  - `csv` - Export as CSV file (default)
+  - `pdf` - Export as PDF file
+  - `xls` - Export as Excel (.xlsx) file
 - **Column State Integration**: When exporting data, the grid automatically respects the saved column state from localStorage. This means:
   - Columns are exported in the same order as they appear in the grid (based on user's saved column arrangement)
   - Hidden columns are automatically excluded from export

package/app_connect/components.hjson

@@ -243,6 +243,14 @@
               "defaultValue": false,
               "help": "Specifies if Export to PDF to be enabled"
             },
+            {
+              "name": "exportToXLS",
+              "attribute": "dmx-bind:export_to_xls",
+              "title": "XLS Export",
+              "type": "boolean",
+              "defaultValue": false,
+              "help": "Specifies if Export to XLS (Excel) to be enabled"
+            },
             {
               "name": "exportExcludeHidden",
               "attribute": "dmx-bind:export_exclude_hidden_fields",
@@ -3692,14 +3700,14 @@
               group: 'Properties',
               variables: [
                 {
-                  name: '1', optionName: '1', title: 'CSV', type: 'boolean',
-                  dataBindings: true, defaultValue: true, required: false,
-                  help: 'Export Grid data as CSV file.'
-                },
-                {
-                  name: '2', optionName: '2', title: 'PDF', type: 'boolean',
-                  dataBindings: true, defaultValue: false, required: false,
-                  help: 'Export Grid data as PDF file.'
+                  name: '1', optionName: '1', title: 'Format', type: 'droplist',
+                  dataBindings: true, defaultValue: 'csv', required: false,
+                  "values": [
+                  {title: 'CSV', value: 'csv'},
+                  {title: 'PDF', value: 'pdf'},
+                  {title: 'XLS', value: 'xls'}
+                  ],
+                  help: 'Export Grid data as CSV, PDF, or XLS file.'
                 }
               ]
             }
@@ -3911,6 +3919,10 @@
         {
           "src": "../../../node_modules/pdfmake/build/vfs_fonts.js",
           "dst": "js/vfs_fonts.js"
+        },
+        {
+          "src": "../../../node_modules/exceljs/dist/exceljs.min.js",
+          "dst": "js/exceljs.min.js"
         }
       ],
       "linkFiles": [
@@ -3954,6 +3966,11 @@
           "type": "js",
           "defer": true
         },
+        {
+          "src": "js/exceljs.min.js",
+          "type": "js",
+          "defer": true
+        },
         {
           "src": "css/ag-theme-alpine.css",
           "type": "css"
@@ -4318,6 +4335,40 @@
         "dmx-ag-grid": true
       }
     },
+    {
+      "name": "dmx-ag-grid-export-xls-filename",
+      "attributeStartsWith": "dmx-bind",
+      "attribute": "export_xls_filename",
+      "title": "Export XLS Filename",
+      "type": "boolean",
+      "display": "fieldset",
+      "icon": "fa fa-lg fa-chevron-right",
+      "groupTitle": "Grid Config",
+      "groupIcon": "fa fa-lg fa-cubes",
+      "defaultValue": false,
+      "show": [
+        "exportXlsFilename"
+      ],
+      "noChangeOnHide": true,
+      "groupEnabler": true,
+      "children": [
+        {
+          "name": "exportXlsFilename",
+          "attributeStartsWith": "dmx-bind",
+          "attribute": "export_xls_filename",
+          "isValue": true,
+          "dataBindings": true,
+          "title": "XLS Filename",
+          "type": "text",
+          "help": "Export XLS filename.",
+          "defaultValue": "export.xlsx",
+          "initDisplay": "none"
+        }
+      ],
+      "allowedOn": {
+        "dmx-ag-grid": true
+      }
+    },
     {
       "name": "dmx-ag-grid-dark-mode",
       "attributeStartsWith": "dmx-bind",

package/dmx-ag-grid.js

@@ -94,6 +94,8 @@ dmx.Component('ag-grid', {
     export_csv_filename: { type: String, default: 'export.csv' },
     export_to_pdf: { type: Boolean, default: false },
     export_pdf_filename: { type: String, default: 'export.pdf' },
+    export_to_xls: { type: Boolean, default: false },
+    export_xls_filename: { type: String, default: 'export.xlsx' },
     fixed_header: { type: Boolean, default: false },
     topbar_class: { type: String, default: 'topbar' },
     fixed_header_offset: { type: Number, default: 100 },
@@ -353,20 +355,27 @@ dmx.Component('ag-grid', {
       if (gridInstance) gridInstance.destroy();
       }, this);
     },
-    exportGrid: function (Csv, Pdf) {
-      // Default Csv to true if both Csv and Pdf are false
-      if (!Csv && !Pdf) {
-        Csv = true;
-      }
+    exportGrid: function (format) {
+      // Default to csv if no format specified
+      format = (format || 'csv')
       dmx.nextTick(() => {
         const gridInst = this.get('gridInstance');
         const gridCfg = this.get('gridConfig');
-        if (Csv) {
-          exportGridData(gridInst, gridCfg);
-        } else if (Pdf) {
-          exportGridDataToPDF(gridInst, gridCfg);
-        } else {
+        if (!gridInst || !gridCfg) {
           console.error('Grid not loaded to perform the requested export');
+          return;
+        }
+        switch (format) {
+          case 'pdf':
+            exportGridDataToPDF(gridInst, gridCfg);
+            break;
+          case 'xls':
+            exportGridDataToXLS(gridInst, gridCfg);
+            break;
+          case 'csv':
+          default:
+            exportGridData(gridInst, gridCfg);
+            break;
         }
       }, this);
     },
@@ -607,6 +616,7 @@ dmx.Component('ag-grid', {
     let groupedColumnDefs = [];
     let exportToCSV = this.props.export_to_csv;
     let exportToPDF = this.props.export_to_pdf;
+    let exportToXLS = this.props.export_to_xls;
     let cellRenderer;
     
     const gridThemeClass = options.dark_mode ? `${options.grid_theme}-dark` : options.grid_theme;
@@ -2049,6 +2059,7 @@ dmx.Component('ag-grid', {
         exportConfig: {
           export_csv_filename: options.export_csv_filename,
           export_pdf_filename: options.export_pdf_filename,
+          export_xls_filename: options.export_xls_filename,
           export_remove_html: options.export_remove_html,
           export_trim_data: options.export_trim_data,
           export_exclude_fields: options.export_exclude_fields,
@@ -2660,6 +2671,221 @@ dmx.Component('ag-grid', {
         exportPdfButton.style.marginBottom = '10px';
       }
     }
+    // XLS Export Function using ExcelJS
+    exportGridDataToXLS = async (currentGridInstance, currentGridConfig) => {
+      if (!currentGridInstance || currentGridInstance.isDestroyed()) {
+        console.error('Grid API is destroyed or not initialized.');
+        return;
+      }
+      if (typeof ExcelJS === 'undefined') {
+        console.error('ExcelJS library is not loaded. Make sure exceljs.min.js is included.');
+        return;
+      }
+      const exportConfig = currentGridConfig.context.exportConfig;
+      const excludedColumnIds = ['checkboxColumn', 'actionsColumn'];
+      const exportExcludeFieldsArray = exportConfig.export_exclude_fields ? exportConfig.export_exclude_fields.split(',') : [];
+
+      // Determine fields to export (reuse same logic as CSV)
+      let fieldsToExport = [];
+      const pageId = getPageId();
+      const storageKey = exportConfig.column_state_storage_key || pageId;
+      const savedColumnState = localStorage.getItem(`dmxState-${storageKey}`);
+
+      if (savedColumnState) {
+        try {
+          const parsedState = JSON.parse(savedColumnState);
+          fieldsToExport = parsedState
+            .filter((col) => {
+              if (excludedColumnIds.includes(col.colId)) return false;
+              if (col.hide) return false;
+              return true;
+            })
+            .map((col) => {
+              const columnDef = findColumnDefByColId(col.colId, exportConfig, currentGridConfig);
+              return columnDef ? columnDef.field : col.colId;
+            })
+            .filter((field) => !exportExcludeFieldsArray.includes(field));
+        } catch (err) {
+          console.warn(`Failed to parse saved column state for key: dmxState-${storageKey}`, err);
+          fieldsToExport = [];
+        }
+      }
+
+      function findColumnDefByColId(colId, expConfig, gridCfg) {
+        if (expConfig.group_config) {
+          const traverseColumns = (columns) => {
+            for (const column of columns) {
+              if (column.children) {
+                const result = traverseColumns(column.children);
+                if (result) return result;
+              } else if (column.colId === colId) {
+                return column;
+              }
+            }
+            return null;
+          };
+          return traverseColumns(gridCfg.columnDefs);
+        } else {
+          return gridCfg.columnDefs.find((column) => column.colId === colId);
+        }
+      }
+
+      if (!fieldsToExport || fieldsToExport.length === 0) {
+        let fieldsAndColIds;
+        if (exportConfig.group_config) {
+          const traverseColumns = (columns) => {
+            const result = [];
+            columns.forEach((column) => {
+              if (column.children) {
+                result.push(...traverseColumns(column.children));
+              } else {
+                result.push({ field: column.field, colId: column.colId, hide: column.hide });
+              }
+            });
+            return result;
+          };
+          fieldsAndColIds = traverseColumns(currentGridConfig.columnDefs);
+        } else {
+          fieldsAndColIds = currentGridConfig.columnDefs.map((column) => ({
+            field: column.field, colId: column.colId, hide: column.hide,
+          }));
+        }
+        fieldsToExport = fieldsAndColIds.filter((column) => {
+          return !excludedColumnIds.includes(column.colId) &&
+                 (!exportConfig.export_exclude_hidden_fields || !column.hide) &&
+                 !exportExcludeFieldsArray.includes(column.field);
+        }).map((column) => column.field);
+      }
+
+      // Build headers
+      const headers = fieldsToExport.map(field => {
+        return cnames.hasOwnProperty(field) ? cnames[field].custom_name : humanize(field);
+      });
+
+      // Build rows
+      const rows = [];
+      currentGridInstance.forEachNode(node => {
+        const row = fieldsToExport.map(field => {
+          const columns = currentGridInstance.getColumnState();
+          const col = columns.find(c => c.colId === field);
+          const colDef = col ? currentGridInstance.getColumnDefs().find(def => def.colId === col.colId) : {};
+          const params = {
+            value: currentGridInstance.getCellValue({ rowNode: node, colKey: field }) ?? '-',
+            data: node.data,
+            node,
+            colDef,
+            column: col,
+            api: currentGridInstance,
+            context: currentGridInstance.getContext ? currentGridInstance.getContext() : undefined,
+          };
+
+          let displayValue;
+          if (colDef.cellRenderer && typeof colDef.cellRenderer === 'function') {
+            displayValue = colDef.cellRenderer(params);
+          } else if (colDef.valueFormatter && typeof colDef.valueFormatter === 'function') {
+            displayValue = colDef.valueFormatter(params);
+          } else {
+            displayValue = params.value;
+          }
+
+          if (exportConfig.export_remove_html && typeof displayValue === 'string') {
+            displayValue = removeHtmlTags(displayValue);
+          }
+          if (exportConfig.export_trim_data && typeof displayValue === 'string') {
+            displayValue = displayValue.trim();
+          }
+          return displayValue;
+        });
+        rows.push(row);
+      });
+
+      // Create workbook and worksheet using ExcelJS
+      const workbook = new ExcelJS.Workbook();
+      const worksheet = workbook.addWorksheet('Export');
+
+      // Add header row
+      worksheet.addRow(headers);
+      // Style header row
+      const headerRow = worksheet.getRow(1);
+      headerRow.font = { bold: true };
+      headerRow.eachCell((cell) => {
+        cell.fill = {
+          type: 'pattern',
+          pattern: 'solid',
+          fgColor: { argb: 'FFE0E0E0' }
+        };
+      });
+
+      // Add data rows
+      rows.forEach(row => worksheet.addRow(row));
+
+      // Auto-fit column widths
+      worksheet.columns.forEach((column, i) => {
+        let maxLength = headers[i] ? headers[i].length : 10;
+        rows.forEach(row => {
+          const cellValue = row[i];
+          if (cellValue != null) {
+            const len = String(cellValue).length;
+            if (len > maxLength) maxLength = len;
+          }
+        });
+        column.width = Math.min(maxLength + 2, 50);
+      });
+
+      // Generate and download
+      const buffer = await workbook.xlsx.writeBuffer();
+      const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = exportConfig.export_xls_filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      window.URL.revokeObjectURL(url);
+    };
+    if (exportToXLS) {
+      let exportXlsButton = document.getElementById(`exportXlsButton-${options.id}`);
+      let isNewXlsButton = false;
+      if (!exportXlsButton) {
+        isNewXlsButton = true;
+        exportXlsButton = document.createElement('button');
+        exportXlsButton.id = `exportXlsButton-${options.id}`;
+        const icon = document.createElement('i');
+        icon.classList.add('fas', 'fa-file-excel');
+        exportXlsButton.appendChild(icon);
+
+        const buttonText = document.createElement('span');
+        buttonText.innerText = ' Export to XLS';
+        exportXlsButton.appendChild(buttonText);
+        exportXlsButton.style.backgroundColor = '#4CAF50';
+        exportXlsButton.style.border = 'none';
+        exportXlsButton.style.color = 'white';
+        exportXlsButton.style.padding = '5px 10px';
+        exportXlsButton.style.textAlign = 'center';
+        exportXlsButton.style.textDecoration = 'none';
+        exportXlsButton.style.display = 'inline-block';
+        exportXlsButton.style.fontSize = '14px';
+        exportXlsButton.style.borderRadius = '5px';
+        exportXlsButton.style.cursor = 'pointer';
+        exportXlsButton.style.marginBottom = '10px';
+      }
+
+      exportXlsButton.onclick = () => {
+        const currentGridInstance = this.get('gridInstance');
+        const currentGridConfig = this.get('gridConfig');
+        if (currentGridInstance && currentGridConfig) {
+          exportGridDataToXLS(currentGridInstance, currentGridConfig);
+        } else {
+          console.error('Grid instance or configuration not available for export');
+        }
+      };
+
+      if (isNewXlsButton) {
+        gridContainer.parentNode.insertBefore(exportXlsButton, gridContainer);
+        exportXlsButton.style.marginBottom = '10px';
+      }
+    }
     const paginationPanelCss = `
       /* Flexbox layout for pagination panel */
       .ag-paging-panel {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cdmx/wappler_ag_grid",
-    "version": "2.1.0",
+    "version": "2.1.2",
     "type": "module",
     "description": "App Connect module for AG Grid v35 - Advanced data grid with enhanced editing, filtering, and tree data capabilities.",
     "license": "MIT",
@@ -16,6 +16,7 @@
     "dependencies": {
         "@ag-grid-community/locale": "~35.1.0",
         "ag-grid-community": "~35.1.0",
+        "exceljs": "^4.4.0",
         "papaparse": "~5.5.2",
         "pdfmake": "~0.2.18",
         "read-excel-file": "~5.8.7"