@cdmx/wappler_ag_grid 0.5.0 → 0.5.2

package/README.md

@@ -7,12 +7,11 @@ The AG Grid module allows you to create a flexible and customizable data grid wi
 
 1. **ID**: Unique ID for the grid. (Required)
 2. **Data Source**: Data source for the grid. Enter the data source to populate the grid. (Required)
-3. **No Auto Load**: Set to true to disable auto-load of the grid. (Default: true)
+3. **No Auto Load**: Set to true to disable auto-load of the grid. (Default: false)
 4. **Theme**: Select a theme for the grid.
-   - "Alpine"
+   - "Alpine" (Default)
    - "Balham"
    - "Material"
-   - "Base" (Default)
 5. **Locale**: Select the locale for the grid. Currently supported locales: English (EN) and Hebrew (HE). (Default: EN)
 
 ## AG Grid Options
@@ -30,7 +29,7 @@ The AG Grid module allows you to create a flexible and customizable data grid wi
 17. **Row Selection**: Row Selection (single or multiple).
    - "Single"
    - "Multiple" (Default)
-18. **Timezone**: Timezone for Date Fields. Select the appropriate timezone from the dropdown list.
+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.
    - Header Offset: Specifies offset from the top of the viewport area (Optional). (Default: 100)

package/app_connect/components.hjson

@@ -263,19 +263,30 @@
             },
             {
               "name": "fixedHeader",
-              "attribute": "dmx-bind:fixed_header",
-              "title": "Sticky Header",
+              "title": "Sticky Header and Horizonal Scrollbar",
               "type": "boolean",
               "display": "fieldset",
               "noChangeOnHide": true,
               "groupEnabler": true,
               "defaultValue": false,
               "show": [
+                "enableFixedHeader",
                 "fixedHeaderOffset",
                 "topbarClass",
-                "fixedTopOffset"
+                "fixedTopOffset",
+                "fixedHorizonalScroll",
+                "fixedHorizonalScrollWidth"
               ],
               "children": [
+                {
+                  "name": "enableFixedHeader",
+                  "attribute": "dmx-bind:fixed_header",
+                  "title": "Fixed Header",
+                  "type": "boolean",
+                  "initDisplay": "none",
+                  "defaultValue": false,
+                  "help": "Enables Sticky header"
+                },
                 {
                   "name": "fixedHeaderOffset",
                   "attribute": "fixed_header_offset",
@@ -302,6 +313,24 @@
                   "initDisplay": "none",
                   "defaultValue": 80,
                   "help": "Specify topbar offset, Default: 80"
+                },
+                {
+                  "name": "fixedHorizonalScroll",
+                  "attribute": "dmx-bind:fixed_horizonatal_scroll",
+                  "title": "Fixed Horizonal 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",
+                  "type": "number",
+                  "initDisplay": "none",
+                  "defaultValue": 80,
+                  "help": "Fixed horizontal scroll width percentage (Default: 80%)"
                 }
               ]
             },

package/dmx-ag-grid.js

@@ -54,6 +54,7 @@ dmx.Component('ag-grid', {
     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: '' },
     cell_click_event: {type: Boolean, default: false },
     row_click_event: {type: Boolean, default: false },
@@ -107,8 +108,8 @@ dmx.Component('ag-grid', {
     const cnames = this.props.cnames
     const cwidths = this.props.cwidths
     const ctypes = this.props.ctypes
-    const enableRowClickEvent = this.props.row_click_event && !this.props.row_action_edit  && !this.props.row_action_view && !this.props.row_checkbox_event;
-    const enableCellClickEvent = this.props.row_click_event && (this.props.row_action_edit  || this.props.row_action_view || this.props.row_checkbox_event); 
+    const enableRowClickEvent = this.props.row_click_event && !this.props.enable_actions && !this.props.row_checkbox_event;
+    const enableCellClickEvent = this.props.row_click_event && (this.props.enable_actions || this.props.row_checkbox_event); 
     let localeText;
     let columnDefs = [];
     let exportToCSV = this.props.export_to_csv;
@@ -867,13 +868,13 @@ dmx.Component('ag-grid', {
       console.error('Grid container not found.');
       return;
     }
+    console.log(options.fixed_header)
     if (options.fixed_header) {
       window.addEventListener('scroll', function () {
         const header = document.querySelector('.ag-header');
         const topbar = document.querySelector('.' + options.topbar_class);
-        const topbarHeight = (topbar ? topbar.getBoundingClientRect().height : 0) + options.fixedTopOffset;
-        const headerPos = (topbar ? topbar.getBoundingClientRect().bottom : 0) + options.fixedHeaderOffset;
-
+        const topbarHeight = (topbar ? topbar.getBoundingClientRect().height : 0) + options.fixed_top_offset;
+        const headerPos = (topbar ? topbar.getBoundingClientRect().bottom : 0) + options.fixed_header_offset;
         if (window.pageYOffset > headerPos) {
           header.style.position = 'fixed';
           header.style.top = `${topbarHeight}px`;
@@ -885,6 +886,36 @@ dmx.Component('ag-grid', {
         }
       });
     }
+    const gridId = `${options.id}-grid`;
+    const agGridElement = document.getElementById(gridId);
+    function updateHoveringBarStyles() {
+      const existingStyle = document.getElementById('hovering-bar-style');
+      if (options.fixed_horizonatal_scroll) {
+        // Create a new style element
+        const styleElement = document.createElement('style');
+        styleElement.id = 'hovering-bar-style';
+        const barWidthPercentage = options.fixed_horizonatal_scroll_width;
+        const barWidth = `calc(${barWidthPercentage}vw - 10px)`; 
+        // Add the styles for the hovering horizontal bottom bar
+        styleElement.innerHTML = `
+          .ag-body-horizontal-scroll {
+            width: ${barWidth};
+            position: fixed;
+            bottom: 0;
+          }
+        `;
+        if (existingStyle) {
+          existingStyle.parentNode.replaceChild(styleElement, existingStyle);
+        } else {
+          document.head.appendChild(styleElement);
+        }
+      } else if (existingStyle) {
+        // Remove the style element if it exists
+        existingStyle.parentNode.removeChild(existingStyle);
+      }
+    }
+    updateHoveringBarStyles();
+    window.addEventListener('resize', updateHoveringBarStyles);
 
     // Create the export button
     if (exportToCSV) {

package/package.json

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