@cdmx/wappler_ag_grid 2.0.14 → 2.0.16

package/app_connect/components.hjson

@@ -253,6 +253,14 @@
               "type": "text",
               "help": "Specifies fields to be excluded in CSV export (comma-seperated)."
             },
+            {
+              "name": "exportRemoveHtml",
+              "attribute": "dmx-bind:export_remove_html",
+              "title": "Remove HTML from Export",
+              "type": "boolean",
+              "defaultValue": false,
+              "help": "Removes HTML tags from exported data (CSV/PDF). Converts <br> tags to newlines."
+            },
             {
               "name": "paginationPageSizeSelector",
               "attribute": "dmx-bind:pagination_page_size_selector",

package/dmx-ag-grid.js

@@ -87,6 +87,7 @@ dmx.Component('ag-grid', {
     export_trim_data: { type: Boolean, default: false },
     export_exclude_hidden_fields: { type: Boolean, default: false },
     export_exclude_fields: { type: String, default: null },
+    export_remove_html: { type: Boolean, default: false },
     export_to_csv: { type: Boolean, default: true },
     export_csv_filename: { type: String, default: 'export.csv' },
     export_to_pdf: { type: Boolean, default: false },
@@ -1312,6 +1313,8 @@ dmx.Component('ag-grid', {
             const amountFieldsArray = options.amount_fields.split(',');
             if (amountFieldsArray.includes(key)) {
               valueFormatter = function (params) {
+                const num = Number(params.value);
+                if (isNaN(num)) return '-';
                 if (params.value != null) {
                   return Number(params.value).toLocaleString(options.date_locale, {
                     minimumFractionDigits: options.amount_field_precision,
@@ -1324,6 +1327,7 @@ dmx.Component('ag-grid', {
           } else {
             valueFormatter = blankOrNullValueFormatter;
           }
+          comparator = options.ci_sort ? caseInsensitiveComparator : undefined;
         } else if (dataType === 'date') {
           filter = 'agDateColumnFilter';
           valueFormatter = (params) => formatTime(params, timezone);
@@ -2154,6 +2158,21 @@ dmx.Component('ag-grid', {
     updateHoveringBarStyles();
 
     //CSV Export Function
+    // Helper function to remove HTML tags from string
+    const removeHtmlTags = (htmlString) => {
+      if (typeof htmlString !== 'string') return htmlString;
+      // Remove all HTML tags and decode common HTML entities
+      return htmlString
+        .replace(/<br\s*\/?>/gi, '\n')  // Replace <br> tags with newlines
+        .replace(/<[^>]*>/g, '')         // Remove all other HTML tags
+        .replace(/&nbsp;/g, ' ')         // Replace non-breaking space
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&amp;/g, '&')
+        .replace(/&quot;/g, '"')
+        .replace(/&#39;/g, "'");
+    };
+
     exportGridData = (currentGridInstance, currentGridConfig) => {
       const excludedColumnIds = ['checkboxColumn', 'actionsColumn'];
       const exportExcludeFieldsArray = options.export_exclude_fields ? options.export_exclude_fields.split(',') : [];
@@ -2287,6 +2306,11 @@ dmx.Component('ag-grid', {
             }
           }
     
+          // Remove HTML tags if export_remove_html is true
+          if (options.export_remove_html && typeof value === 'string') {
+            value = removeHtmlTags(value);
+          }
+    
           // Trim value if export_trim is true
           if (options.export_trim_data && typeof value === 'string') {
             return value.trim();
@@ -2446,12 +2470,19 @@ dmx.Component('ag-grid', {
               cnames[field].custom_name : 
               humanize(field)
             ) : '';
+            let cellValue = !isHeader ? (
+              (colDef.cellRenderer && typeof colDef.cellRenderer === 'function') ? colDef.cellRenderer(params) : 
+              (colDef.valueFormatter && typeof colDef.valueFormatter === 'function') ? colDef.valueFormatter(params) : 
+              gInstance.getValue(column, gInstance.getDisplayedRowAtIndex(0)) ?? ''
+            ) : headerName;
+            
+            // Remove HTML tags if export_remove_html is true
+            if (options.export_remove_html && typeof cellValue === 'string') {
+              cellValue = removeHtmlTags(cellValue);
+            }
+            
             return {
-              text: !isHeader ? (
-                (colDef.cellRenderer && typeof colDef.cellRenderer === 'function') ? colDef.cellRenderer(params) : 
-                (colDef.valueFormatter && typeof colDef.valueFormatter === 'function') ? colDef.valueFormatter(params) : 
-                gInstance.getValue(column, gInstance.getDisplayedRowAtIndex(0)) ?? ''
-              ) : headerName,
+              text: cellValue,
               color: cellStyle?.color ?? 'black',
               fillColor: cellStyle?.backgroundColor ? cellStyle.backgroundColor.replace('#', '') : undefined,
             };
@@ -2474,11 +2505,20 @@ dmx.Component('ag-grid', {
             api: currentGridInstance,
           };
           const cellStyle = applyCellStyle(params);
-          const value = currentGridInstance.getCellValue({ rowNode: node, colKey: col.colId }) ?? '-';
+          let value = currentGridInstance.getCellValue({ rowNode: node, colKey: col.colId }) ?? '-';
+          
+          // Get the rendered value
+          let displayValue = (colDef.cellRenderer && typeof colDef.cellRenderer === 'function') ? colDef.cellRenderer(params) : 
+                            (colDef.valueFormatter && typeof colDef.valueFormatter === 'function') ? colDef.valueFormatter(params) : 
+                            value;
+          
+          // Remove HTML tags if export_remove_html is true
+          if (options.export_remove_html && typeof displayValue === 'string') {
+            displayValue = removeHtmlTags(displayValue);
+          }
+          
           return {
-            text: (colDef.cellRenderer && typeof colDef.cellRenderer === 'function') ? colDef.cellRenderer(params) : 
-                  (colDef.valueFormatter && typeof colDef.valueFormatter === 'function') ? colDef.valueFormatter(params) : 
-                  value,
+            text: displayValue,
             color: cellStyle?.color ?? 'black',
             fillColor: cellStyle?.backgroundColor ? cellStyle.backgroundColor.replace('#', '') : undefined,
           };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cdmx/wappler_ag_grid",
-    "version": "2.0.14",
+    "version": "2.0.16",
     "type": "module",
     "description": "App Connect module for AG Grid v34 - Advanced data grid with enhanced editing, filtering, and tree data capabilities.",
     "license": "MIT",