@cdmx/wappler_ag_grid 1.3.5 → 1.3.7

package/README.md

@@ -19,7 +19,7 @@ With the update to AG Grid v31, a built-in page limit dropdown feature has been
    - "Quartz"
    - "Custom"
 5. **Dark Mode** (Default: false)
-6. **Locale**: Select the locale for the grid. Currently supported locales: English (EN), Russian (RU) and Hebrew (HE). (Default: EN)
+6. **Locale**: Select the locale for the grid. Currently supported locales: English (EN), Russian (RU), Hebrew (HE) and Portuguese (PT). (Default: EN)
 
 **Note for Custom Theme:**
 When you select the "Custom" theme option, you have the flexibility to define your own unique styling for the ag-Grid components.
@@ -34,32 +34,33 @@ To use the "Custom" theme, copy "ag-theme-custom.css" to public/css/ag-theme-cus
 1. **Minimum Width**: The minimum width of the column. (Default: 150)
 2. **Resizable**: Specifies if the column can be resized. (Default: true)
 3. **Sortable**: Specifies if the columns are sortable. (Default: true)
-4. **Filter**: Specifies if the column has a filter. (Default: true)
-5. **Floating Filter**: Specifies if the column has a floating filter. (Default: true)
-6. **CSV Export**: Specifies if Export to CSV is enabled. (Default: true)
-7. **Enable RTL**: Enabled Right to Left, used for Hebrew and Arabic. (Default: false)
-8. **Column Hover Highlight**: Specifies column hover highlighting. (Default: true)
-9. **Suppress Row Deselection**: Specifies if rows can be deselected. (Default: false)
-10. **Pagination**: Enables pagination. (Default: true)
-11. **Auto Pagination**: Enables automatic pagination. (Default: false)
-12. **Page Limit Selectors**: Allowed selectors for for page size. (Default: [20,50,100] ).
-13. **Page Limit**: Number of rows to show per page. (Default: 20)
-14. **Row Selection**: Row Selection (single or multiple).
+4. **Case-Insensitive Sort**: Specifies if the columns are sorted in case-insensitive manner. (Default: false)
+5. **Filter**: Specifies if the column has a filter. (Default: true)
+6. **Floating Filter**: Specifies if the column has a floating filter. (Default: true)
+7. **CSV Export**: Specifies if Export to CSV is enabled. (Default: true)
+8. **Enable RTL**: Enabled Right to Left, used for Hebrew and Arabic. (Default: false)
+9. **Column Hover Highlight**: Specifies column hover highlighting. (Default: true)
+10. **Suppress Row Deselection**: Specifies if rows can be deselected. (Default: false)
+11. **Pagination**: Enables pagination. (Default: true)
+12. **Auto Pagination**: Enables automatic pagination. (Default: false)
+13. **Page Limit Selectors**: Allowed selectors for for page size. (Default: [20,50,100] ).
+14. **Page Limit**: Number of rows to show per page. (Default: 20)
+15. **Row Selection**: Row Selection (single or multiple).
    - "Single"
    - "Multiple" (Default)
-15. **Timezone**: Timezone for Date Fields. Select the appropriate timezone from the dropdown list. (Default: Local)
-16. **Date Format**: Date Format for displaying date values. (Default: "dd/MM/yyyy hh:mm A")
-17. **Sticky Header and Horizontal Scrollbar**:  Optionally specify the header offset and topbar class.
+16. **Timezone**: Timezone for Date Fields. Select the appropriate timezone from the dropdown list. (Default: Local)
+17. **Date Format**: Date Format for displaying date values. (Default: "dd/MM/yyyy hh:mm A")
+18. **Sticky Header and Horizontal Scrollbar**:  Optionally specify the header offset and topbar class.
    - Fixed Header: Enables sticky header. (Default: false)
    - Header Offset: Specifies offset from the top of the viewport area (Optional). (Default: 100)
    - Topbar Class: Specify class, e.g., "topbar", to measure the offset from (Optional). (Default: "topbar")
    - Topbar Offset: Specify topbar offset (Default: 80)
    - Fixed Horizontal Scroll: Enables Hovering horizontal scrollbar which stays at the bottom all the time. (Default: false)
    - Fixed Horizontal Scroll Width: Fixed horizontal scroll width percentage. (Default: 80%)
-18. **Row Height**: Height of each row in pixels. (Default: 25)
-19. **Header Height**: Height of the header row in pixels. (Default: 30)
-20. **Wrap Header Text**: This will cause long headers to wrap. (Default: true)
-21. **Auto Header Height**: The column header height is automatically set based on the content of the header cells. (Default: true)
+19. **Row Height**: Height of each row in pixels. (Default: Auto)
+20. **Header Height**: Height of the header row in pixels. (Default: Auto)
+21. **Wrap Header Text**: This will cause long headers to wrap. (Default: true)
+22. **Auto Header Height**: The column header height is automatically set based on the content of the header cells. (Default: true)
 23. **Wrap Text**: This will cause long texts to wrap in the cells. (Default: false)
 24. **Suppress Row Click Selection**: Disables row selection on row click. (Default: false)
 25. **Suppress Menu Hide**: Prevents hiding the column menu. (Default: false)

package/app_connect/components.hjson

@@ -152,6 +152,14 @@
               "defaultValue": true,
               "help": "Specifies if the column are sortable"
             },
+            {
+              "name": "ci_sort",
+              "attribute": "dmx-bind:ci_sort",
+              "title": "Case-Insensitive Sort",
+              "type": "boolean",
+              "defaultValue": false,
+              "help": "Specifies if the columns are sorted in case-insensitive manner"
+            },
             {
               "name": "filter",
               "attribute": "dmx-bind:filter",

package/dmx-ag-grid.js

@@ -65,6 +65,7 @@ dmx.Component('ag-grid', {
     amount_field_precision: { type: Number, default: 2 },
     min_width: { type: Number, default: 150 },
     sortable: { type: Boolean, default: true },
+    ci_sort: { type: Boolean, default: false },
     resizable: { type: Boolean, default: true },
     filter: { type: Boolean, default: true },
     floating_filter: { type: Boolean, default: true },
@@ -593,7 +594,7 @@ dmx.Component('ag-grid', {
               operators.push(part);
           } else {
               const [left, operator, right] = extractConditionParts(part);
-              const result = evaluateCondition(params.data[left], operator, right);
+              const result = params.data[left] !== null ? evaluateCondition(params.data[left], operator, right) : false;
               results.push(result);
           }
       }
@@ -714,6 +715,12 @@ dmx.Component('ag-grid', {
         return '-'
       }
     }
+    // comparator for case-insensitive sorting
+    caseInsensitiveComparator = {
+      comparator: function (valueA, valueB) {
+      return valueA.toLowerCase().localeCompare(valueB.toLowerCase())
+      }
+    };
     dateFilterParams = {
         comparator: function (filterLocalDateAtMidnight, cellValue) {
           var cellDate = new Date(cellValue);
@@ -967,7 +974,7 @@ dmx.Component('ag-grid', {
         } else {
           filter = 'agTextColumnFilter';
           valueFormatter = blankOrNullValueFormatter;
-          filterParams = undefined;
+          filterParams = options.ci_sort ? caseInsensitiveComparator : undefined;
           minWidth = undefined;
         }
         // Check if custom definition exists for the current field
@@ -1001,7 +1008,7 @@ dmx.Component('ag-grid', {
             const [left, operator, right] = extractConditionParts(condition);
             if (
               params.data.hasOwnProperty(left) &&
-              evaluateCondition(params.data[left], operator, right)
+              (params.data[left] !== null ? evaluateCondition(params.data[left], operator, right) : false)
             ) {
               if (area === 'text') {
                 return { color: customColor, fontStyle: font, fontWeight: (font==='bold'?'bold':null) };

package/package.json

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