@cdmx/wappler_ag_grid 2.0.12 → 2.0.14

package/README.md

@@ -609,6 +609,10 @@ 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.
+- **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
+  - If no saved column state exists, the export falls back to the default column configuration
 
 **Save Column State**
 - This action allows you to save the current state of the grid's columns, including their visibility and order, to the browser's local storage.

package/dmx-ag-grid.js

@@ -356,9 +356,11 @@ dmx.Component('ag-grid', {
         Csv = true;
       }
       dmx.nextTick(() => {
-        const exportFunction = Csv ? exportGridData : (Pdf ? exportGridDataToPDF : null);
-        if (typeof exportFunction === 'function') {
-          exportFunction();
+        const gridInst = this.get('gridInstance');
+        if (Csv) {
+          exportGridData(gridInst, this.gridConfig);
+        } else if (Pdf) {
+          exportGridDataToPDF(gridInst, this.gridConfig);
         } else {
           console.error('Grid not loaded to perform the requested export');
         }
@@ -1979,6 +1981,8 @@ dmx.Component('ag-grid', {
       columnDefs: columnDefs,
       ...gridOptions
     };
+    // Store gridConfig on component instance for export functions
+    this.gridConfig = gridConfig;
     // 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.length > 0)) {
       let columnsToSum = options.columns_to_sum ? options.columns_to_sum.split(',') : [];
@@ -2150,42 +2154,107 @@ dmx.Component('ag-grid', {
     updateHoveringBarStyles();
 
     //CSV Export Function
-    exportGridData = () => {
+    exportGridData = (currentGridInstance, currentGridConfig) => {
       const excludedColumnIds = ['checkboxColumn', 'actionsColumn'];
       const exportExcludeFieldsArray = options.export_exclude_fields ? options.export_exclude_fields.split(',') : [];
-      // Extracting fields and colIds from columnDefs
-      let fieldsAndColIds;
-      if (options.group_config) {
-        // Helper function to traverse grouped column structure
-        const traverseColumns = (columns) => {
-          const fieldsAndColIds = [];
-          columns.forEach((column) => {
-            if (column.children) {
-              fieldsAndColIds.push(...traverseColumns(column.children));
-            } else {
-              fieldsAndColIds.push({
-                field: column.field,
-                colId: column.colId,
-                hide: column.hide,
-              });
+      
+      let fieldsToExport = [];
+      
+      // Try to get saved column state from localStorage
+      const pageId = getPageId();
+      const storageKey = options.column_state_storage_key || pageId;
+      const savedColumnState = localStorage.getItem(`dmxState-${storageKey}`);
+      
+      // If saved column state exists, use it
+      if (savedColumnState) {
+        try {
+          const parsedState = JSON.parse(savedColumnState);
+          // Use the saved state to determine column order and visibility
+          fieldsToExport = parsedState
+            .filter((col) => {
+              // Skip excluded columns
+              if (excludedColumnIds.includes(col.colId)) {
+                return false;
+              }
+              // Skip hidden columns (respecting the hide property from saved state)
+              if (col.hide) {
+                return false;
+              }
+              return true;
+            })
+            .map((col) => {
+              // Map colId to field from columnDefs
+              const columnDef = findColumnDefByColId(col.colId);
+              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 = [];
+        }
+      }
+      
+      // Helper function to find column definition by colId
+      function findColumnDefByColId(colId) {
+        if (options.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 fieldsAndColIds;
-        };
-        // Traverse columnDefs to gather fields and colIds
-        fieldsAndColIds = traverseColumns(gridConfig.columnDefs);
-      } else {
-        fieldsAndColIds = gridConfig.columnDefs.map((column) => ({
-          field: column.field,
-          colId: column.colId,
-          hide: column.hide,
-        }));
+            return null;
+          };
+          return traverseColumns(currentGridConfig.columnDefs);
+        } else {
+          return currentGridConfig.columnDefs.find((column) => column.colId === colId);
+        }
+      }
+      
+      // Fallback to current logic if no saved state or if fieldsToExport is empty
+      if (!fieldsToExport || fieldsToExport.length === 0) {
+        fieldsToExport = getDefaultExportFields();
+      }
+      
+      function getDefaultExportFields() {
+        // Extracting fields and colIds from columnDefs
+        let fieldsAndColIds;
+        if (options.group_config) {
+          // Helper function to traverse grouped column structure
+          const traverseColumns = (columns) => {
+            const fieldsAndColIds = [];
+            columns.forEach((column) => {
+              if (column.children) {
+                fieldsAndColIds.push(...traverseColumns(column.children));
+              } else {
+                fieldsAndColIds.push({
+                  field: column.field,
+                  colId: column.colId,
+                  hide: column.hide,
+                });
+              }
+            });
+            return fieldsAndColIds;
+          };
+          // Traverse columnDefs to gather fields and colIds
+          fieldsAndColIds = traverseColumns(currentGridConfig.columnDefs);
+        } else {
+          fieldsAndColIds = currentGridConfig.columnDefs.map((column) => ({
+            field: column.field,
+            colId: column.colId,
+            hide: column.hide,
+          }));
+        }
+        const result = fieldsAndColIds.filter((column) => {
+          return !excludedColumnIds.includes(column.colId) &&
+                 (!options.export_exclude_hidden_fields || !column.hide) &&
+                 !exportExcludeFieldsArray.includes(column.field);
+        }).map((column) => column.field);
+        return result;
       }
-      const fieldsToExport = fieldsAndColIds.filter((column) => {
-        return !excludedColumnIds.includes(column.colId) &&
-               (!options.export_exclude_hidden_fields || !column.hide) &&
-               !exportExcludeFieldsArray.includes(column.field);
-      }).map((column) => column.field);
     
       const params = {
         fileName: options.export_csv_filename,
@@ -2226,46 +2295,57 @@ dmx.Component('ag-grid', {
           return value;
         },
       };
-      gridInstance.exportDataAsCsv(params);
+      currentGridInstance.exportDataAsCsv(params);
     };
     // Create the export button
     if (exportToCSV) {
-      const existingExportButton = document.getElementById('exportButton');
-      if (existingExportButton) {
-        return;
-      }
-      const exportButton = document.createElement('button');
-      exportButton.id = 'exportButton'; 
-      const icon = document.createElement('i');
-      icon.classList.add('fas', 'fa-file-csv');
-      exportButton.appendChild(icon);
+      let exportButton = document.getElementById(`exportButton-${options.id}`);
+      let isNewButton = false;
+      if (!exportButton) {
+        isNewButton = true;
+        exportButton = document.createElement('button');
+        exportButton.id = `exportButton-${options.id}`; 
+        const icon = document.createElement('i');
+        icon.classList.add('fas', 'fa-file-csv');
+        exportButton.appendChild(icon);
 
-      // Add the button text
-      const buttonText = document.createElement('span');
-      buttonText.innerText = ' Export to CSV';
-      exportButton.appendChild(buttonText);
-      exportButton.style.backgroundColor = '#4CAF50';
-      exportButton.style.border = 'none';
-      exportButton.style.color = 'white';
-      exportButton.style.padding = '5px 10px';
-      exportButton.style.textAlign = 'center';
-      exportButton.style.textDecoration = 'none';
-      exportButton.style.display = 'inline-block';
-      exportButton.style.fontSize = '14px'; 
-      exportButton.style.borderRadius = '5px';
-      exportButton.style.cursor = 'pointer';
-      exportButton.style.marginBottom = '10px';
-
-      exportButton.addEventListener('click', () => {
-        exportGridData()
-      })
-      // Append the export button to the grid container
-      gridContainer.parentNode.insertBefore(exportButton, gridContainer);
-      exportButton.style.marginBottom = '10px';
+        // Add the button text
+        const buttonText = document.createElement('span');
+        buttonText.innerText = ' Export to CSV';
+        exportButton.appendChild(buttonText);
+        exportButton.style.backgroundColor = '#4CAF50';
+        exportButton.style.border = 'none';
+        exportButton.style.color = 'white';
+        exportButton.style.padding = '5px 10px';
+        exportButton.style.textAlign = 'center';
+        exportButton.style.textDecoration = 'none';
+        exportButton.style.display = 'inline-block';
+        exportButton.style.fontSize = '14px'; 
+        exportButton.style.borderRadius = '5px';
+        exportButton.style.cursor = 'pointer';
+        exportButton.style.marginBottom = '10px';
+      }
+      
+      // Always update the click handler to ensure it has the latest gridInstance and gridConfig
+      exportButton.onclick = () => {
+        const currentGridInstance = this.get('gridInstance');
+        const currentGridConfig = this.gridConfig;
+        if (currentGridInstance && currentGridConfig) {
+          exportGridData(currentGridInstance, currentGridConfig);
+        } else {
+          console.error('Grid instance or configuration not available for export');
+        }
+      };
+      
+      if (isNewButton) {
+        // Append the export button to the grid container
+        gridContainer.parentNode.insertBefore(exportButton, gridContainer);
+        exportButton.style.marginBottom = '10px';
+      }
     }
     // Export AG Grid data to PDF
-    exportGridDataToPDF = async () => {
-      if (!gridInstance || gridInstance.isDestroyed()) {
+    exportGridDataToPDF = async (currentGridInstance, currentGridConfig) => {
+      if (!currentGridInstance || currentGridInstance.isDestroyed()) {
         console.error('Grid API is destroyed or not initialized.');
         return;
       }
@@ -2290,9 +2370,9 @@ dmx.Component('ag-grid', {
           return fieldsAndColIds;
         };
         // Traverse columnDefs to gather fields and colIds
-        fieldsAndColIds = traverseColumns(gridConfig.columnDefs);
+        fieldsAndColIds = traverseColumns(currentGridConfig.columnDefs);
       } else {
-        fieldsAndColIds = gridConfig.columnDefs.map((column) => ({
+        fieldsAndColIds = currentGridConfig.columnDefs.map((column) => ({
           field: column.field,
           colId: column.colId,
           hide: column.hide,
@@ -2344,19 +2424,19 @@ dmx.Component('ag-grid', {
         return options.wrap_text ? { whiteSpace: 'normal' } : null;
       };
     
-      const getColumnData = (gridInstance, isHeader) => 
-        gridInstance.getAllDisplayedColumns()
+      const getColumnData = (gInstance, isHeader) => 
+        gInstance.getAllDisplayedColumns()
           .filter(column => fieldsToExport.includes(column.getColDef().field))
           .map(column => {
             const colDef = column.getColDef();
             const field = colDef.field;
             const params = {
-              value: isHeader ? null : gridInstance.getValue(column, gridInstance.getDisplayedRowAtIndex(0)),
-              data: isHeader ? null : gridInstance.getDisplayedRowAtIndex(0).data,
-              node: isHeader ? null : gridInstance.getDisplayedRowAtIndex(0),
+              value: isHeader ? null : gInstance.getValue(column, gInstance.getDisplayedRowAtIndex(0)),
+              data: isHeader ? null : gInstance.getDisplayedRowAtIndex(0).data,
+              node: isHeader ? null : gInstance.getDisplayedRowAtIndex(0),
               colDef,
               column,
-              api: gridInstance,
+              api: gInstance,
               context: params.context,
             };
             const cellStyle = applyCellStyle(params);
@@ -2370,31 +2450,31 @@ dmx.Component('ag-grid', {
               text: !isHeader ? (
                 (colDef.cellRenderer && typeof colDef.cellRenderer === 'function') ? colDef.cellRenderer(params) : 
                 (colDef.valueFormatter && typeof colDef.valueFormatter === 'function') ? colDef.valueFormatter(params) : 
-                gridInstance.getValue(column, gridInstance.getDisplayedRowAtIndex(0)) ?? ''
+                gInstance.getValue(column, gInstance.getDisplayedRowAtIndex(0)) ?? ''
               ) : headerName,
               color: cellStyle?.color ?? 'black',
               fillColor: cellStyle?.backgroundColor ? cellStyle.backgroundColor.replace('#', '') : undefined,
             };
-          });
+          });;
     
-      const columns = gridInstance.getColumnState();
+      const columns = currentGridInstance.getColumnState();
       const columnMap = new Map(columns.map(col => [col.colId, col]));
     
       const rows = [];
-      gridInstance.forEachNode(node => {
+      currentGridInstance.forEachNode(node => {
         const row = fieldsToExport.map(field => {
           const col = columnMap.get(field);
-          const colDef = col ? gridInstance.getColumnDefs().find(def => def.colId === col.colId) : {};
+          const colDef = col ? currentGridInstance.getColumnDefs().find(def => def.colId === col.colId) : {};
           const params = {
-            value: gridInstance.getCellValue({ rowNode: node, colKey: col.colId }) ?? '-',
+            value: currentGridInstance.getCellValue({ rowNode: node, colKey: col.colId }) ?? '-',
             data: node.data,
             node,
             colDef,
-            column: gridInstance.getColumnState().find(col => col.colId === col.colId),
-            api: gridInstance,
+            column: currentGridInstance.getColumnState().find(col => col.colId === col.colId),
+            api: currentGridInstance,
           };
           const cellStyle = applyCellStyle(params);
-          const value = gridInstance.getCellValue({ rowNode: node, colKey: col.colId }) ?? '-';
+          const value = currentGridInstance.getCellValue({ rowNode: node, colKey: col.colId }) ?? '-';
           return {
             text: (colDef.cellRenderer && typeof colDef.cellRenderer === 'function') ? colDef.cellRenderer(params) : 
                   (colDef.valueFormatter && typeof colDef.valueFormatter === 'function') ? colDef.valueFormatter(params) : 
@@ -2411,7 +2491,7 @@ dmx.Component('ag-grid', {
           table: {
             headerRows: 1,
             widths: fieldsToExport.map(() => `${100 / fieldsToExport.length}%`),
-            body: [getColumnData(gridInstance, true), ...rows],
+            body: [getColumnData(currentGridInstance, true), ...rows],
             heights: (rowIndex) => (rowIndex === 0 ? 40 : 15),
             fillColor: (rowIndex, colIndex) => rows[rowIndex][colIndex].fillColor,
             color: (rowIndex, colIndex) => rows[rowIndex][colIndex].color,
@@ -2421,39 +2501,49 @@ dmx.Component('ag-grid', {
       pdfMake.createPdf(documentDefinition).download(options.export_pdf_filename);
     };
     if (exportToPDF) {
-      const existingPdfExportButton = document.getElementById('exportPdfButton');
-      if (existingPdfExportButton) {
-        return;
-      }
-      const exportPdfButton = document.createElement('button');
-      exportPdfButton.id = 'exportPdfButton'; 
-      const icon = document.createElement('i');
-      icon.classList.add('fas', 'fa-file-pdf');
-      exportPdfButton.appendChild(icon);
-
-      // Add the button text
-      const buttonText = document.createElement('span');
-      buttonText.innerText = ' Export to PDF';
-      exportPdfButton.appendChild(buttonText);
-      exportPdfButton.style.backgroundColor = '#4CAF50';
-      exportPdfButton.style.border = 'none';
-      exportPdfButton.style.color = 'white';
-      exportPdfButton.style.padding = '5px 10px';
-      exportPdfButton.style.textAlign = 'center';
-      exportPdfButton.style.textDecoration = 'none';
-      exportPdfButton.style.display = 'inline-block';
-      exportPdfButton.style.fontSize = '14px'; 
-      exportPdfButton.style.borderRadius = '5px';
-      exportPdfButton.style.cursor = 'pointer';
-      exportPdfButton.style.marginBottom = '10px';
+      let exportPdfButton = document.getElementById(`exportPdfButton-${options.id}`);
+      let isNewPdfButton = false;
+      if (!exportPdfButton) {
+        isNewPdfButton = true;
+        exportPdfButton = document.createElement('button');
+        exportPdfButton.id = `exportPdfButton-${options.id}`; 
+        const icon = document.createElement('i');
+        icon.classList.add('fas', 'fa-file-pdf');
+        exportPdfButton.appendChild(icon);
 
-      exportPdfButton.addEventListener('click', () => {
-        exportGridDataToPDF(this)
-      })
+        // Add the button text
+        const buttonText = document.createElement('span');
+        buttonText.innerText = ' Export to PDF';
+        exportPdfButton.appendChild(buttonText);
+        exportPdfButton.style.backgroundColor = '#4CAF50';
+        exportPdfButton.style.border = 'none';
+        exportPdfButton.style.color = 'white';
+        exportPdfButton.style.padding = '5px 10px';
+        exportPdfButton.style.textAlign = 'center';
+        exportPdfButton.style.textDecoration = 'none';
+        exportPdfButton.style.display = 'inline-block';
+        exportPdfButton.style.fontSize = '14px'; 
+        exportPdfButton.style.borderRadius = '5px';
+        exportPdfButton.style.cursor = 'pointer';
+        exportPdfButton.style.marginBottom = '10px';
+      }
+      
+      // Always update the click handler to ensure it has the latest gridInstance and gridConfig
+      exportPdfButton.onclick = () => {
+        const currentGridInstance = this.get('gridInstance');
+        const currentGridConfig = this.gridConfig;
+        if (currentGridInstance && currentGridConfig) {
+          exportGridDataToPDF(currentGridInstance, currentGridConfig);
+        } else {
+          console.error('Grid instance or configuration not available for export');
+        }
+      };
     
-      // Append the export button to the grid container
-      gridContainer.parentNode.insertBefore(exportPdfButton, gridContainer);
-      exportPdfButton.style.marginBottom = '10px';
+      if (isNewPdfButton) {
+        // Append the export button to the grid container
+        gridContainer.parentNode.insertBefore(exportPdfButton, gridContainer);
+        exportPdfButton.style.marginBottom = '10px';
+      }
     }
     const paginationPanelCss = `
       /* Flexbox layout for pagination panel */

package/package.json

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