@cdmx/wappler_ag_grid 0.2.2 → 0.2.4

package/dmx-ag-grid.js

@@ -69,6 +69,9 @@ dmx.Component('ag-grid', {
       this.set('rowData', rowData);
       this.set('columnDefs', columnDefs);
       this.refreshGrid();
+    },
+    reloadGrid: function () {
+      this.refreshGrid()
     }
   },
 
@@ -118,6 +121,7 @@ dmx.Component('ag-grid', {
         // Assuming `value` is a boolean representing the status
         const checked = value==true ? "checked" : "";
         return `
+        <div class="col pt-2 pb-1 ps-1 pe-1 d-flex justify-content-center">
           <label class="switch switch-success">
             <input 
               type="checkbox" class="switch-input"
@@ -133,6 +137,7 @@ dmx.Component('ag-grid', {
                 <i class="bx bx-x"></i>
             </span>
         </label>
+        </div>
         `;
     }
     function actionsRenderer(params) {
@@ -584,8 +589,36 @@ dmx.Component('ag-grid', {
 
     // Create the export button
     if (exportToCSV) {
+      const existingExportButton = document.getElementById('exportButton');
+      // If it already exists, just exit the function
+      if (existingExportButton) {
+        return;
+      }
       const exportButton = document.createElement('button');
-      exportButton.innerText = 'Export to CSV';
+      exportButton.id = 'exportButton'; 
+
+        // Add the icon
+      const icon = document.createElement('i');
+      icon.classList.add('fas', 'fa-file-csv'); // Use the Font Awesome icon class here
+      exportButton.appendChild(icon);
+
+      // Add the button text
+      const buttonText = document.createElement('span');
+      buttonText.innerText = ' Export to CSV';
+      exportButton.appendChild(buttonText);
+      // Add some fancy styles to the button
+      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', () => {
         const params = {
           fileName: 'export.csv', // Set the desired file name here
@@ -604,12 +637,11 @@ dmx.Component('ag-grid', {
         };
         gridConfig.api.exportDataAsCsv(params);
       });
-
       // Append the export button to the grid container
       gridContainer.parentNode.insertBefore(exportButton, gridContainer);
-
       exportButton.style.marginBottom = '10px';
     }
+    
   },
 
   events: {

package/package.json

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