@cdmx/wappler_ag_grid 1.0.2 → 1.0.4

package/README.md

@@ -47,20 +47,22 @@ The overrides for the "Custom" theme can be applied in the ag-theme-custom.css f
    - 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)
+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. **Suppress Row Click Selection**: Disables row selection on row click. (Default: false)
+21. **Suppress Menu Hide**: Prevents hiding the column menu. (Default: false)
+22. **Suppress Movable Columns**: Disables moving columns. (Default: false)
+23. **Enable Cell Expressions**: Enables expressions in cell values. (Default: false)
+24. **Animate Rows**: Enables row animation on data changes. (Default: false)
+25. **Suppress Aggregation Function in Header**: Hides the aggregation function in column headers. (Default: false)
+26. **Suppress Aggregation at Root Level**: Disables aggregation at the root level. (Default: false)
+27. **Suppress Clipboard Paste**: Disables pasting data from the clipboard. (Default: false)
+28. **Suppress Scroll on New Data**: Prevents scrolling to newly added data. (Default: false)
+29. **Suppress Property Names Check**: Disables checking for duplicate property names. (Default: false)
+30. **Hide ID Field**: Hides the ID Field in the Grid. (Default: false)
+31. **Row Click Events**: Enables row click events. This can be used in Dynamic events => Grid Events => Row Clicked. (Default: false)
+32. **Enable Row Selection**: Enables row selection. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
+33. **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
 
@@ -204,13 +206,15 @@ Configuration includes:
 
 ---
 
-### Set Filters
+# Set Filters
 
 The "Set Filters" feature allows you to enable the setting of filters for columns in a user interface. This feature allows to preset filters when the grid is rendered.
 
 Configuration includes:
-- **Set Filters**: Toggle to enable or disable the feature. When enabled, users can set filters for columns. (Default: false)
-- **Custom Filters**: A grid that allows you to define custom filters.
+### Set Filters
+Toggle to enable or disable the feature. When enabled, users can set filters for columns. (Default: false)
+
+  **Custom Filters**: A grid that allows you to define custom filters.
   - **Field**: The column name to filter.
   - **Filter Type**: The type of filter to apply, options available are: "Starts With," "Less Than," "Date From," "Greater Than," "Equals," and "Contains."
   - **Filter Value**: The Value/Filter to be applied.

package/app_connect/components.hjson

@@ -361,6 +361,22 @@
               "defaultValue": null,
               "help": "Height of the header row in pixels"
             },
+            {
+              "name": "wrapHeaderText",
+              "attribute": "dmx-bind:wrap_header_text",
+              "title": "Wrap Header Text",
+              "type": "boolean",
+              "defaultValue": true,
+              "help": "This will cause long headers to wrap."
+            },
+            {
+              "name": "autoHeaderHeight",
+              "attribute": "dmx-bind:auto_header_height",
+              "title": "Auto Header Height",
+              "type": "boolean",
+              "defaultValue": true,
+              "help": "The column header height is automatically set based on the content of the header cells."
+            },
             {
               "name": "suppressRowClickSelection",
               "attribute": "dmx-bind:suppress_row_click_selection",

package/dmx-ag-grid.js

@@ -20,6 +20,8 @@ dmx.Component('ag-grid', {
     cwidths: { type: Object, default: {} },
     ctypes: { type: Array, default: [] },
     cfilters: { type: Array, default: [] },
+    wrap_header_text: { type: Boolean, default: true },
+    auto_header_height: { type: Boolean, default: true },
     data_changes: { type: Array, default: [] },
     data: { type: Array, default: [] },
     dom_layout: { type: String, default: 'autoHeight' },
@@ -1088,6 +1090,8 @@ dmx.Component('ag-grid', {
         flex: 1,
         minWidth: options.min_width,
         resizable: options.resizable,
+        wrapHeaderText: options.wrap_header_text,
+        autoHeaderHeight: options.auto_header_height,
         filter: options.filter,
         sortable: options.sortable,
         floatingFilter: options.floating_filter
@@ -1287,12 +1291,25 @@ dmx.Component('ag-grid', {
           header.style.position = 'fixed';
           header.style.top = `${topbarHeight}px`;
           header.style.zIndex = '1';
-          document.body.style.marginBottom = `${header.offsetHeight}px`; // Add margin to the bottom of the page
+          document.body.style.marginBottom = `${header.offsetHeight}px`;
         } else {
           header.style.position = 'static';
           document.body.style.marginBottom = '0'; // Reset the margin
         }
       });
+      const agHeader = document.querySelector('.ag-header');
+      const agRootWrapper = document.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 () {
@@ -1408,7 +1425,6 @@ dmx.Component('ag-grid', {
       };
       gridConfig.api.exportDataAsCsv(params);
     };
-
     // Create the export button
     if (exportToCSV) {
       const existingExportButton = document.getElementById('exportButton');

package/package.json

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