@cdmx/wappler_ag_grid 0.5.3 → 0.5.5

package/README.md

@@ -15,42 +15,45 @@ The AG Grid module allows you to create a flexible and customizable data grid wi
 5. **Locale**: Select the locale for the grid. Currently supported locales: English (EN) and Hebrew (HE). (Default: EN)
 
 ## AG Grid Options
-6. **Minimum Width**: The minimum width of the column. (Default: 150)
-7. **Resizable**: Specifies if the column can be resized. (Default: true)
-8. **Sortable**: Specifies if the columns are sortable. (Default: true)
-9. **Filter**: Specifies if the column has a filter. (Default: true)
-10. **Floating Filter**: Specifies if the column has a floating filter. (Default: true)
-11. **CSV Export**: Specifies if Export to CSV is enabled. (Default: true)
-12. **Enable RTL**: Enabled Right to Left, used for Hebrew and Arabic. (Default: false)
-13. **Column Hover Highlight**: Specifies column hover highlighting. (Default: true)
-14. **Suppress Row Deselection**: Specifies if rows can be deselected. (Default: false)
-15. **Pagination**: Enables pagination. (Default: true)
-16. **Pagination Page Size**: Number of rows to show per page. (Default: 20)
-17. **Row Selection**: Row Selection (single or multiple).
+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. **Pagination Page Size**: Number of rows to show per page. (Default: 20)
+12. **Row Selection**: Row Selection (single or multiple).
    - "Single"
    - "Multiple" (Default)
-18. **Timezone**: Timezone for Date Fields. Select the appropriate timezone from the dropdown list. (Default: Local)
-19. **Date Format**: Date Format for displaying date values. (Default: "dd/MM/yyyy hh:mm A")
-20. **Sticky Header**: Enable sticky header. Optionally specify the header offset and topbar class.
+13. **Timezone**: Timezone for Date Fields. Select the appropriate timezone from the dropdown list. (Default: Local)
+14. **Date Format**: Date Format for displaying date values. (Default: "dd/MM/yyyy hh:mm A")
+15. **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)
-21. **Row Height**: Height of each row in pixels. (Default: 25)
-22. **Header Height**: Height of the header row in pixels. (Default: 30)
-23. **Suppress Row Click Selection**: Disables row selection on row click. (Default: false)
-24. **Suppress Menu Hide**: Prevents hiding the column menu. (Default: false)
-25. **Suppress Movable Columns**: Disables moving columns. (Default: false)
-26. **Enable Cell Expressions**: Enables expressions in cell values. (Default: false)
-27. **Animate Rows**: Enables row animation on data changes. (Default: false)
-28. **Suppress Aggregation Function in Header**: Hides the aggregation function in column headers. (Default: false)
-29. **Suppress Aggregation at Root Level**: Disables aggregation at the root level. (Default: false)
-30. **Suppress Clipboard Paste**: Disables pasting data from the clipboard. (Default: false)
-31. **Suppress Scroll on New Data**: Prevents scrolling to newly added data. (Default: false)
-32. **Suppress Property Names Check**: Disables checking for duplicate property names. (Default: false)
-33. **Hide ID Field**: Hides the ID Field in the Grid. (Default: false)
-34. **Row Click Events**: Enables row click events. This can be used in Dynamic events => Grid Events => Row Clicked. (Default: false)
-35. **Enable Row Selection**: Enables row selection. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
-36. **Enable Row Status Toggle**: Enables row status toggle events. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
+   - 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%)
+16. **Row Height**: Height of each row in pixels. (Default: 25)
+17. **Header Height**: Height of the header row in pixels. (Default: 30)
+18. **Suppress Row Click Selection**: Disables row selection on row click. (Default: false)
+19. **Suppress Menu Hide**: Prevents hiding the column menu. (Default: false)
+20. **Suppress Movable Columns**: Disables moving columns. (Default: false)
+21. **Enable Cell Expressions**: Enables expressions in cell values. (Default: false)
+22. **Animate Rows**: Enables row animation on data changes. (Default: false)
+23. **Suppress Aggregation Function in Header**: Hides the aggregation function in column headers. (Default: false)
+24. **Suppress Aggregation at Root Level**: Disables aggregation at the root level. (Default: false)
+25. **Suppress Clipboard Paste**: Disables pasting data from the clipboard. (Default: false)
+26. **Suppress Scroll on New Data**: Prevents scrolling to newly added data. (Default: false)
+27. **Suppress Property Names Check**: Disables checking for duplicate property names. (Default: false)
+28. **Hide ID Field**: Hides the ID Field in the Grid. (Default: false)
+29. **Row Click Events**: Enables row click events. This can be used in Dynamic events => Grid Events => Row Clicked. (Default: false)
+30. **Enable Row Selection**: Enables row selection. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
+31. **Enable Row Status Toggle**: Enables row status toggle events. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
 
 # Data Type Overrides
 

package/app_connect/components.hjson

@@ -263,7 +263,7 @@
             },
             {
               "name": "fixedHeader",
-              "title": "Sticky Header and Horizonal Scrollbar",
+              "title": "Sticky Header and Horizontal Scrollbar",
               "type": "boolean",
               "display": "fieldset",
               "noChangeOnHide": true,
@@ -315,18 +315,18 @@
                   "help": "Specify topbar offset, Default: 80"
                 },
                 {
-                  "name": "fixedHorizonalScroll",
-                  "attribute": "dmx-bind:fixed_horizonatal_scroll",
-                  "title": "Fixed Horizonal Scroll",
+                  "name": "fixedHorizontalScroll",
+                  "attribute": "dmx-bind:fixed_horizontal_scroll",
+                  "title": "Fixed Horizontal Scroll",
                   "type": "boolean",
                   "initDisplay": "none",
                   "defaultValue": false,
                   "help": "Enables bottom fixed horizontal scroll"
                 },
                 {
-                  "name": "fixedHorizonalScrollWidth",
-                  "attribute": "dmx-bind:fixed_horizonatal_scroll_width",
-                  "title": "Fixed Horizonal Scroll Width",
+                  "name": "fixedHorizontalScrollWidth",
+                  "attribute": "dmx-bind:fixed_horizontal_scroll_width",
+                  "title": "Fixed Horizontal Scroll Width",
                   "type": "number",
                   "initDisplay": "none",
                   "defaultValue": 80,
@@ -1017,6 +1017,33 @@
             }
           ]
         },
+        {
+          "group": "📒 Amount Fields",
+          "variables": [
+            {
+              "name": "amount_fields",
+              "title": "Amount Fields Config",
+              "type": "boolean",
+              "defaultValue": false,
+              "display": "fieldset",
+              "show": [
+                "amountFields"
+              ],
+              "noChangeOnHide": true,
+              "groupEnabler": true,
+              "help": "Configure amount fields to have comma-seperation implemented"
+              "children": [
+                {
+                  "name": "amountFields",
+                  "attribute": "amount_fields",
+                  "title": "Amount Fields",
+                  "type": "text",
+                  "initDisplay": "none"
+                }
+              ]
+            }
+          ]
+        },
         {
           "group": "📒 Configure Actions Column",
           "variables": [
@@ -1029,6 +1056,7 @@
               "display": "fieldset",
               "show": [
                 "enableActions",
+                "pinActions",
                 "editActionBtn",
                 "editActionTitle",
                 "editActionTooltip",
@@ -1058,7 +1086,7 @@
                   "help": "Enable Actions"
                 },
                 {
-                  "name": "pingActions",
+                  "name": "pinActions",
                   "attribute": "dmx-bind:pin_actions",
                   "title": "Pin Actions Column",
                   "type": "boolean",

package/dmx-ag-grid.js

@@ -42,6 +42,7 @@ dmx.Component('ag-grid', {
     locale_text: { type: String, default: null },
     date_locale: { type: String, default: 'en-IN' },
     date_format: { type: String, default: 'dd/MM/yyyy hh:mm A' },
+    amount_fields: { type: Array, default: [] },
     min_width: { type: Number, default: 150 },
     sortable: { type: Boolean, default: true },
     resizable: { type: Boolean, default: true },
@@ -50,12 +51,12 @@ dmx.Component('ag-grid', {
     column_hover_highlight: { type: Boolean, default: true },
     export_to_csv: { type: Boolean, default: true },
     fixed_header: { type: Boolean, default: false },
-    topbar_class: { type: Text, default: 'topbar' },
+    topbar_class: { type: String, default: 'topbar' },
     fixed_header_offset: { type: Number, default: 100 },
     fixed_top_offset: { type: Number, default: 80 },
-    fixed_horizonatal_scroll: { type: Boolean, default: false },
-    fixed_horizonatal_scroll_width: { type: Number, default: 80 },
-    timezone: {type: Text, default: '' },
+    fixed_horizontal_scroll: { type: Boolean, default: false },
+    fixed_horizontal_scroll_width: { type: Number, default: 80 },
+    timezone: {type: String, default: '' },
     cell_click_event: {type: Boolean, default: false },
     row_click_event: {type: Boolean, default: false },
     row_checkbox_event: {type: Boolean, default: false },
@@ -533,7 +534,7 @@ dmx.Component('ag-grid', {
         
         if (dataType === 'number') {
           filter = 'agNumberColumnFilter';
-          if (/(amount|amt)$/.test(key)) {
+          if (options.amount_fields && options.amount_fields.includes(key)) {
             valueFormatter = function (params) {
               if (params.value != null) {
                 return Number(params.value).toLocaleString("en-US", {
@@ -889,11 +890,11 @@ dmx.Component('ag-grid', {
     const agGridElement = document.getElementById(gridId);
     function updateHoveringBarStyles() {
       const existingStyle = document.getElementById('hovering-bar-style');
-      if (options.fixed_horizonatal_scroll) {
+      if (options.fixed_horizontal_scroll) {
         // Create a new style element
         const styleElement = document.createElement('style');
         styleElement.id = 'hovering-bar-style';
-        const barWidthPercentage = options.fixed_horizonatal_scroll_width;
+        const barWidthPercentage = options.fixed_horizontal_scroll_width;
         const barWidth = `calc(${barWidthPercentage}vw - 10px)`; 
         // Add the styles for the hovering horizontal bottom bar
         styleElement.innerHTML = `

package/package.json

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