@cdmx/wappler_ag_grid 1.1.4 → 1.1.6

package/README.md

@@ -21,6 +21,8 @@ This option allows you to customize the look and feel of the grid to match the d
 You can override the default styles provided by ag-Grid with your own CSS rules by targeting the specific CSS variables and classes used by the grid.
 The overrides for the "Custom" theme can be applied in the ag-theme-custom.css file located in the public/css folder. This file serves as a centralized place for customizing the grid's appearance.
 
+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)

package/app_connect/components.hjson

@@ -2137,10 +2137,6 @@
           "src": "../../../node_modules/moment/min/moment.min.js",
           "dst": "js/moment.min.js"
         },
-        {
-          "src": "ag-theme-custom.css",
-          "dst": "css/ag-theme-custom.css"
-        },
         {
           "src": "switch-toggle-slider.css",
           "dst": "css/switch-toggle-slider.css"
@@ -2206,10 +2202,6 @@
           "src": "css/ag-theme-material.css",
           "type": "css"
         },
-        {
-          "src": "css/ag-theme-custom.css",
-          "type": "css"
-        },
         {
           "src": "css/switch-toggle-slider.css",
           "type": "css"

package/dmx-ag-grid.js

@@ -1161,6 +1161,13 @@ dmx.Component('ag-grid', {
       suppressPropertyNamesCheck: this.props.suppress_property_names_check,
       suppressRowDeselection: this.props.suppress_row_deselection,
       columnHoverHighlight: this.props.column_hover_highlight,
+      onGridSizeChanged: function(params) {
+        // This function is called whenever the grid's size changes
+        adjustHeaderWidth();
+        if (options.fixed_horizontal_scroll) {
+          updateHoveringBarStyles();
+        }
+      },
       components: {
         clickCellRenderer: clickCellRenderer,
         checkboxCellRenderer: checkboxCellRenderer,
@@ -1326,6 +1333,18 @@ dmx.Component('ag-grid', {
       console.error('Grid container not found.');
       return;
     }
+    const agHeader = gridElement.querySelector('.ag-header');
+    const agRootWrapper = gridElement.querySelector('.ag-root-wrapper');
+
+    // Function to adjust the header width
+    function adjustHeaderWidth() {
+      if (agHeader && agRootWrapper) {
+        const rootWrapperWidth = agRootWrapper.clientWidth;
+        const newHeaderWidth = rootWrapperWidth * 1.0;
+        agHeader.style.width = `${newHeaderWidth}px`;
+      }
+    }
+    adjustHeaderWidth();
     if (options.fixed_header) {
       window.addEventListener('scroll', function () {
         const header = gridElement.querySelector('.ag-header');
@@ -1342,19 +1361,6 @@ dmx.Component('ag-grid', {
           document.body.style.marginBottom = '0'; // Reset the margin
         }
       });
-      const agHeader = gridElement.querySelector('.ag-header');
-      const agRootWrapper = gridElement.querySelector('.ag-root-wrapper');
-
-      // Function to adjust the header width
-      function adjustHeaderWidth() {
-        if (agHeader && agRootWrapper) {
-          const rootWrapperWidth = agRootWrapper.clientWidth;
-          const newHeaderWidth = rootWrapperWidth * 1.0;
-          agHeader.style.width = `${newHeaderWidth}px`;
-        }
-      }
-      window.addEventListener('resize', adjustHeaderWidth);
-      adjustHeaderWidth();
     }
     if (options.fixed_footer) {
       window.addEventListener('scroll', function () {
@@ -1394,12 +1400,13 @@ dmx.Component('ag-grid', {
         // Create a new style element
         const styleElement = document.createElement('style');
         styleElement.id = 'hovering-bar-style';
-        const barWidthPercentage = options.fixed_horizontal_scroll_width;
-        const barWidth = `calc(${barWidthPercentage}vw - 10px)`; 
+        const agRootWrapper = gridElement.querySelector('.ag-root-wrapper');
+        const bodyHorizontalScrollElement = gridElement.querySelector('.ag-body-horizontal-scroll');
+        const rootWrapperWidth = agRootWrapper.clientWidth;
+        bodyHorizontalScrollElement.style.width = rootWrapperWidth + 'px';
         // Add the styles for the hovering horizontal bottom bar
         styleElement.innerHTML = `
           .ag-body-horizontal-scroll {
-            width: ${barWidth};
             position: fixed;
             bottom: 0;
           }
@@ -1415,7 +1422,6 @@ dmx.Component('ag-grid', {
       }
     }
     updateHoveringBarStyles();
-    window.addEventListener('resize', updateHoveringBarStyles);
 
     //CSV Export Function
     exportGridData = () => {

package/package.json

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