@cdmx/wappler_ag_grid 1.3.6 → 1.3.8

package/README.md

@@ -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 },
@@ -714,6 +715,10 @@ dmx.Component('ag-grid', {
         return '-'
       }
     }
+    // comparator for case-insensitive sorting
+    const caseInsensitiveComparator = (valueA, valueB) => {
+      return valueA.toLowerCase().localeCompare(valueB.toLowerCase())
+      }
     dateFilterParams = {
         comparator: function (filterLocalDateAtMidnight, cellValue) {
           var cellDate = new Date(cellValue);
@@ -932,6 +937,7 @@ dmx.Component('ag-grid', {
         let filterValueGetter;
         let valueFormatter;
         let filterParams;
+        let comparator;
         let minWidth;
         let hide;
         let type;
@@ -968,6 +974,7 @@ dmx.Component('ag-grid', {
           filter = 'agTextColumnFilter';
           valueFormatter = blankOrNullValueFormatter;
           filterParams = undefined;
+          comparator = options.ci_sort ? caseInsensitiveComparator : undefined;
           minWidth = undefined;
         }
         // Check if custom definition exists for the current field
@@ -1090,6 +1097,7 @@ dmx.Component('ag-grid', {
           sortable: sortable,
           filterValueGetter: filterValueGetter,
           filterParams: filterParams,
+          comparator: comparator,
           tooltipValueGetter: tooltipValueGetter,
           cellStyle: applyCellStyle,
           ...(cwidths.hasOwnProperty(key) && {

package/package.json

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