@cdmx/wappler_ag_grid 1.2.4 → 1.2.6

package/README.md

@@ -13,7 +13,8 @@ The AG Grid module allows you to create a flexible and customizable data grid wi
    - "Balham"
    - "Material"
    - "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.
@@ -34,40 +35,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. **Pagination 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",
@@ -85,11 +95,20 @@
               {title: 'Alpine', value: 'ag-theme-alpine'},
               {title: 'Balham', value: 'ag-theme-balham'},
               {title: 'Material', value: 'ag-theme-material'},
+              {title: 'Quartz', value: 'ag-theme-quartz'},
               {title: 'Custom', value: 'ag-theme-alpine ag-theme-custom'},
               {title: 'Base', value: 'ag-grid'}
               ],
               "help": "Select a theme for the grid"
             },
+            {
+              "name": "dark_mode",
+              "attribute": "dmx-bind:dark_mode",
+              "title": "Dark Mode",
+              "type": "boolean",
+              "defaultValue": false,
+              "help": "Enables dark mode"
+            },
             {
               "name": "locale_text",
               "attribute": "locale_text",
@@ -188,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",
@@ -434,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",
@@ -2264,6 +2291,10 @@
           "src": "../../../node_modules/ag-grid-community/styles/ag-theme-material.css",
           "dst": "css/ag-theme-material.css"
         },
+        {
+          "src": "../../../node_modules/ag-grid-community/styles/ag-theme-quartz.css",
+          "dst": "css/ag-theme-quartz.css"
+        },
         {
           "src": "../../../node_modules/moment/min/moment.min.js",
           "dst": "js/moment.min.js"
@@ -2333,6 +2364,10 @@
           "src": "css/ag-theme-material.css",
           "type": "css"
         },
+        {
+          "src": "css/ag-theme-quartz.css",
+          "type": "css"
+        },
         {
           "src": "css/switch-toggle-slider.css",
           "type": "css"
@@ -2578,6 +2613,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

@@ -5,13 +5,19 @@ dmx.Component('ag-grid', {
     count: Number,
     fields: {},
     fileData: [],
-    selectedRows: []
+    selectedRows: [],
+    state: {
+      gridReady: !1,
+      firstDataRendered: !1,
+      rowDataUpdated: !1
+    }
   },
 
   attributes: {
     id: { default: null },
     noload: { type: Boolean, default: false },
     grid_theme: { type: String, default: 'ag-theme-alpine' },
+    dark_mode: { type: Boolean, default: false},
     column_defs: { type: Array, default: [] },
     tooltip_config: { type: Array, default: [] },
     custom_tooltip: { type: String, default: null },
@@ -32,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 },
@@ -359,7 +367,8 @@ dmx.Component('ag-grid', {
     let exportToCSV = this.props.export_to_csv;
     let gridInstance = null; 
     let cellRenderer;
-    this.$node.innerHTML = `<div id=${options.id}-grid class="${options.grid_theme}"></div>`;
+    const gridThemeClass = options.dark_mode ? `${options.grid_theme}-dark` : options.grid_theme;
+    this.$node.innerHTML = `<div id=${options.id}-grid class="${gridThemeClass}"></div>`;
     if (!rowData || rowData.length === 0) {
       console.error('No row data provided.');
       return;
@@ -1248,7 +1257,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,
@@ -1257,12 +1268,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();
@@ -1394,7 +1413,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 = {};
@@ -1652,5 +1671,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.4",
+    "version": "1.2.6",
     "type": "module",
     "description": "App Connect module for AG Grid Table Generation.",
     "license": "MIT",
@@ -14,7 +14,7 @@
         "ag-grid"
     ],
     "dependencies": {
-        "ag-grid-community": "30.2.x",
+        "ag-grid-community": "31.0.x",
         "exceljs": "4.3.x",
         "moment": "2.29.x",
         "papaparse": "5.4.x"