@cdmx/wappler_ag_grid 1.8.12 → 1.8.14

package/dmx-ag-grid.js

@@ -863,15 +863,29 @@ dmx.Component('ag-grid', {
     }
     // comparator for case-insensitive sorting
     const caseInsensitiveComparator = (valueA, valueB) => {
-      if (valueA === null || valueA === undefined || valueA === '' || typeof valueA === 'number') {
-        return valueB === null || valueB === undefined || valueB === '' || typeof valueB === 'number' ? 0 : -1;
+      // Check for null, undefined, or empty strings
+      if (valueA === null || valueA === undefined || valueA === '') {
+        return valueB === null || valueB === undefined || valueB === '' ? 0 : -1;
       }
-      
-      if (valueB === null || valueB === undefined || valueB === '' || typeof valueB === 'number') {
+    
+      if (valueB === null || valueB === undefined || valueB === '') {
         return 1;
       }
-      
-      return valueA.toLowerCase().localeCompare(valueB.toLowerCase());
+    
+      // Convert values to numbers if they are numeric
+      const numA = Number(valueA);
+      const numB = Number(valueB);
+    
+      // If both values are numbers
+      if (!isNaN(numA) && !isNaN(numB)) {
+        return numA - numB;
+      }
+    
+      // Convert non-number values to strings for case-insensitive comparison
+      const strA = typeof valueA === 'string' ? valueA : String(valueA);
+      const strB = typeof valueB === 'string' ? valueB : String(valueB);
+    
+      return strA.toLowerCase().localeCompare(strB.toLowerCase());
     };
     //Custom Row Styles
     function createRowStyleFunction(rstyles) {
@@ -2226,6 +2240,42 @@ dmx.Component('ag-grid', {
       gridContainer.parentNode.insertBefore(exportPdfButton, gridContainer);
       exportPdfButton.style.marginBottom = '10px';
     }
+    const paginationPanelCss = `
+      /* Flexbox layout for pagination panel */
+      .ag-paging-panel {
+        display: flex;
+        flex-wrap: wrap;
+      }
+      
+      /* Adjust layout for tablets and smaller devices */
+      @media (max-width: 768px) {
+        .ag-paging-panel {
+          height: 100px !important;
+        }
+        .ag-paging-page-size {
+          width: 60%; /* Ensure it takes up 60% width */
+          display: flex;
+          align-items: center;
+          order: 2; /* Force it to be positioned after the summary panel */
+          margin-top: 20px;
+      }
+      
+        /* Ensure to/from, next/previous are visible */
+        .ag-paging-row-summary-panel,
+        .ag-paging-page-summary-panel {
+            display: inline-block;
+            width: 100%; /* Ensure it takes full width */
+            flex-wrap: wrap;
+            justify-content: space-between;
+            text-align: center;
+        }
+      }
+    `;
+
+    const paginationPanelStyle = document.createElement('style');
+    paginationPanelStyle.innerHTML = paginationPanelCss;
+    document.appendChild(paginationPanelStyle);
+
     // Return grid instance
     return gridInstance;
     

package/package.json

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