@cdmx/wappler_ag_grid 1.2.5 → 1.2.7

package/README.md

@@ -3,6 +3,10 @@
 
 The AG Grid module allows you to create a flexible and customizable data grid with various options and properties. Below, you'll find the list of properties and options available for configuring the AG Grid module:
 
+**Important Changes in v1.2.5:**
+With the update to AG Grid v31, a built-in page limit dropdown feature has been introduced. Consequently, when utilizing external page limit selectors, it is necessary to configure the page selector settings accordingly. The defaults are 20, 50, and 100. If you wish to use values other than these defaults, kindly utilize the Page Size Selectors settings to define your preferred selections.
+
+
 ## AG Grid Properties
 
 1. **ID**: Unique ID for the grid. (Required)
@@ -12,8 +16,10 @@ The AG Grid module allows you to create a flexible and customizable data grid wi
    - "Alpine" (Default)
    - "Balham"
    - "Material"
+   - "Quartz"
    - "Custom"
-5. **Locale**: Select the locale for the grid. Currently supported locales: English (EN), Russian (RU) and Hebrew (HE). (Default: EN)
+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)
 
 **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.
@@ -23,6 +29,7 @@ The overrides for the "Custom" theme can be applied in the ag-theme-custom.css f
 
 To use the "Custom" theme, copy "ag-theme-custom.css" to public/css/ag-theme-custom.css and include it in your layout file.
 
+
 ## AG Grid Options
 1. **Minimum Width**: The minimum width of the column. (Default: 150)
 2. **Resizable**: Specifies if the column can be resized. (Default: true)
@@ -34,40 +41,41 @@ To use the "Custom" theme, copy "ag-theme-custom.css" to public/css/ag-theme-cus
 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).
+11. **Auto Pagination**: Enables automatic pagination. (Default: false)
+12. **Page Size Selectors**: Allowed selectors for for page size. (Default: [20,50,100] ).
+13. **Pagination Page Size**: Number of rows to show per page. (Default: 20)
+14. **Row Selection**: Row Selection (single or multiple).
    - "Single"
    - "Multiple" (Default)
-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.
+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.
    - 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%)
-16. **Row Height**: Height of each row in pixels. (Default: 25)
-17. **Header Height**: Height of the header row in pixels. (Default: 30)
-18. **Wrap Header Text**: This will cause long headers to wrap. (Default: true)
-19. **Auto Header Height**: The column header height is automatically set based on the content of the header cells. (Default: true)
-20. **Wrap Text**: This will cause long texts to wrap in the cells. (Default: false)
-21. **Suppress Row Click Selection**: Disables row selection on row click. (Default: false)
-22. **Suppress Menu Hide**: Prevents hiding the column menu. (Default: false)
-23. **Suppress Movable Columns**: Disables moving columns. (Default: false)
-24. **Enable Cell Expressions**: Enables expressions in cell values. (Default: false)
-25. **Animate Rows**: Enables row animation on data changes. (Default: false)
-26. **Suppress Aggregation Function in Header**: Hides the aggregation function in column headers. (Default: false)
-27. **Suppress Aggregation at Root Level**: Disables aggregation at the root level. (Default: false)
-28. **Suppress Clipboard Paste**: Disables pasting data from the clipboard. (Default: false)
-29. **Suppress Scroll on New Data**: Prevents scrolling to newly added data. (Default: false)
-30. **Suppress Property Names Check**: Disables checking for duplicate property names. (Default: false)
-31. **Hide ID Field**: Hides the ID Field in the Grid. (Default: false)
-33. **Numeric Column Align**: Align numeric columns to the right. (Default: false)
-34. **Row Click Events**: Enables row click events. This can be used in Dynamic events => Grid Events => Row Clicked. (Default: false)
-35. **Row Double Click Events**: Enables row double click events. This can be used in Dynamic events => Grid Events => Row Double Clicked. (Default: false)
-36. **Enable Row Selection**: Enables row selection. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
-37. **Enable Row Status Toggle**: Enables row status toggle events. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
+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)
+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)
+26. **Suppress Movable Columns**: Disables moving columns. (Default: false)
+27. **Enable Cell Expressions**: Enables expressions in cell values. (Default: false)
+28. **Animate Rows**: Enables row animation on data changes. (Default: false)
+29. **Suppress Aggregation Function in Header**: Hides the aggregation function in column headers. (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. **Numeric Column Align**: Align numeric columns to the right. (Default: false)
+35. **Row Click Events**: Enables row click events. This can be used in Dynamic events => Grid Events => Row Clicked. (Default: false)
+36. **Row Double Click Events**: Enables row double click events. This can be used in Dynamic events => Grid Events => Row Double Clicked. (Default: false)
+37. **Enable Row Selection**: Enables row selection. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
+38. **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

@@ -23,6 +23,16 @@
           "title": "Data",
           "type": "object"
         },
+        {
+          "name": "state",
+          "title": "state",
+          "type": "object",
+          sub: [
+              {name: "gridReady", type: "boolean"},
+              {name: "firstDataRendered", type: "boolean"},
+              {name: "rowDataUpdated", type: "boolean"}
+          ]
+        },
         {
           "name": "count",
           "title": "Count",
@@ -96,7 +106,7 @@
               "attribute": "dmx-bind:dark_mode",
               "title": "Dark Mode",
               "type": "boolean",
-              "defaultValue": true,
+              "defaultValue": false,
               "help": "Enables dark mode"
             },
             {
@@ -197,6 +207,22 @@
               "defaultValue": true,
               "help": "Enables pagination"
             },
+            {
+              "name": "paginationAutoPageSize",
+              "attribute": "pagination_auto_page_size",
+              "title": "Auto Pagination",
+              "type": "boolean",
+              "defaultValue": false,
+              "help": "Built-in pagination size as per page size."
+            },
+            {
+              "name": "paginationPageSizeSelector",
+              "attribute": "dmx-bind:pagination_page_size_selector",
+              "title": "Pagination Size Selectors",
+              "type": "text",
+              "defaultValue": "[20,50,100]",
+              "help": "Allowed selectors for for page size."
+            },
             {
               "name": "paginationPageSize",
               "attribute": "pagination_page_size",
@@ -443,14 +469,6 @@
               "defaultValue": false,
               "help": "Hides the aggregation function in column headers"
             },
-            {
-              "name": "suppressAggAtRootLevel",
-              "attribute": "dmx-bind:suppress_agg_at_root_level",
-              "title": "Suppress Aggregation at Root Level",
-              "type": "boolean",
-              "defaultValue": false,
-              "help": "Disables aggregation at the root level"
-            },
             {
               "name": "suppressClipboardPaste",
               "attribute": "dmx-bind:suppress_clipboard_paste",
@@ -840,7 +858,8 @@
               "display": "fieldset",
               "show": [
                 "dataChanges",
-                "amountFields"
+                "amountFields",
+                "amountFieldsPrecision"
               ],
               "noChangeOnHide": true,
               "groupEnabler": true,
@@ -902,7 +921,17 @@
                   "attribute": "amount_fields",
                   "title": "Amount Fields",
                   "type": "text",
+                  "initDisplay": "none",
+                  "help": "Fields (numeric/float data fields) where you desire currency formatting to be applied."
+                },
+                {
+                  "name": "amountFieldsPrecision",
+                  "attribute": "amount_field_precision",
+                  "title": "Amount Field Precision",
+                  "type": "number",
+                  "defaultValue": 2,
                   "initDisplay": "none"
+                  "help": "Setting precision digits after the decimal"
                 }
               ]
             }
@@ -2595,6 +2624,39 @@
       "allowedOn": {
         "dmx-ag-grid": true
       }
+    },
+    {
+      "name": "dmx-ag-grid-dark-mode",
+      "attributeStartsWith": "dmx-bind",
+      "attribute": "dark_mode",
+      "title": "Dark Mode",
+      "type": "boolean",
+      "display": "fieldset",
+      "icon": "fa fa-lg fa-chevron-right",
+      "groupTitle": "Grid Config",
+      "groupIcon": "fa fa-lg fa-cubes",
+      "defaultValue": false,
+      "show": [
+        "darkMode"
+      ],
+      "noChangeOnHide": true,
+      "groupEnabler": true,
+      "children": [
+        {
+          "name": "darkMode",
+          "attributeStartsWith": "dmx-bind",
+          "attribute": "dark_mode",
+          "isValue": true,
+          "dataBindings": true,
+          "title": "Dark Mode",
+          "type": "text",
+          "help": "Enables dark mode.",
+          "initDisplay": "none"
+        }
+      ],
+      "allowedOn": {
+        "dmx-ag-grid": true
+      }
     }
   ],
   "events": [

package/dmx-ag-grid.js

@@ -38,6 +38,8 @@ dmx.Component('ag-grid', {
     row_selection: { type: String, default: 'multiple' },
     suppress_row_deselection: { type: Boolean, default: false },
     pagination: { type: Boolean, default: true },
+    pagination_auto_page_size: { type: Boolean, default: false },
+    pagination_page_size_selector: { type: Array, default: [20,50,100] },
     pagination_page_size: { type: Number, default: 20 },
     row_height: { type: Number, default: null },
     header_height: { type: Number, default: null },
@@ -60,6 +62,7 @@ dmx.Component('ag-grid', {
     date_locale: { type: String, default: 'en-US' },
     date_format: { type: String, default: 'dd/MM/yyyy hh:mm A' },
     amount_fields: { type: String, default: null },
+    amount_field_precision: { type: Number, default: 2 },
     min_width: { type: Number, default: 150 },
     sortable: { type: Boolean, default: true },
     resizable: { type: Boolean, default: true },
@@ -933,8 +936,8 @@ dmx.Component('ag-grid', {
               valueFormatter = function (params) {
                 if (params.value != null) {
                   return Number(params.value).toLocaleString(options.date_locale, {
-                    minimumFractionDigits: 2,
-                    maximumFractionDigits: 2,
+                    minimumFractionDigits: options.amount_field_precision,
+                    maximumFractionDigits: options.amount_field_precision
                   });
                 }
                 return '-';
@@ -1255,7 +1258,9 @@ dmx.Component('ag-grid', {
       rowSelection: this.props.row_selection,
       suppressRowDeselection: this.props.suppress_row_deselection,
       pagination: this.props.pagination,
+      paginationAutoPageSize: this.props.pagination_auto_page_size,
       paginationPageSize: this.props.pagination_page_size,
+      paginationPageSizeSelector: options.pagination_page_size_selector,
       rowHeight: this.props.row_height,
       headerHeight: this.props.header_height,
       suppressRowClickSelection: this.props.suppress_row_click_selection,
@@ -1264,12 +1269,20 @@ dmx.Component('ag-grid', {
       enableCellExpressions: this.props.enable_cell_expressions,
       animateRows: this.props.animate_rows,
       suppressAggFuncInHeader: this.props.suppress_agg_func_in_header,
-      suppressAggAtRootLevel: this.props.suppress_agg_at_root_level,
       suppressClipboardPaste: this.props.suppress_clipboard_paste,
       suppressScrollOnNewData: this.props.suppress_scroll_on_new_data,
       suppressPropertyNamesCheck: this.props.suppress_property_names_check,
       suppressRowDeselection: this.props.suppress_row_deselection,
       columnHoverHighlight: this.props.column_hover_highlight,
+      onGridReady: () => {
+        this.set("state", { gridReady: true });
+      },
+      onFirstDataRendered: () => {
+        this.set("state", { firstDataRendered: true });
+      },
+      onRowDataUpdated: (event) => {
+        this.set("state", { rowDataUpdated: true });
+      },
       onGridSizeChanged: function(params) {
         // This function is called whenever the grid's size changes
         adjustHeaderWidth();
@@ -1401,7 +1414,7 @@ dmx.Component('ag-grid', {
       };
     }
     // Create ag-Grid instance
-    gridInstance = new agGrid.Grid(gridDiv, gridConfig);
+    gridInstance = agGrid.createGrid(gridDiv, gridConfig);
 
     if (options.cfilters && options.cfilters.length > 0) {
     var filterModel = {};
@@ -1659,5 +1672,9 @@ dmx.Component('ag-grid', {
       let gridInstance = this.refreshGrid();
       this.set('gridInstance', gridInstance);
     }
+    if (!dmx.equal(this.props.dark_mode, props.dark_mode)) {
+      let gridInstance = this.refreshGrid();
+      this.set('gridInstance', gridInstance);
+    }
   },
 });

package/package.json

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