@cdmx/wappler_ag_grid 1.5.6 → 1.5.8

package/app_connect/components.hjson

@@ -316,6 +316,14 @@
               "defaultValue": "dd/MM/yyyy hh:mm A",
               "help": "Date Format"
             },
+            {
+              "name": "quickFilterField",
+              "attribute": "quick_filter_field",
+              "title": "Filter Field ID",
+              "type": "text",
+              "defaultValue": "search_field",
+              "help": "Specifies the field ID of the search field when using grid quick filter"
+            },
             {
               "name": "loadingOverlay",
               "attribute": "dmx-bind:loading_overlay",
@@ -2324,6 +2332,15 @@
           state: 'opened',
           help: 'Get Selected Rows',
           properties: []
+        },
+        {
+          addTitle: 'quickFilter',
+          title: 'Quick Filter',
+          name: 'quickFilter',
+          icon: 'fas fa-lg fa-search',
+          state: 'opened',
+          help: 'Quick Search',
+          properties: []
         }
       ],
       "children": [],

package/dmx-ag-grid.js

@@ -71,6 +71,7 @@ dmx.Component('ag-grid', {
     filter: { type: Boolean, default: true },
     floating_filter: { type: Boolean, default: true },
     column_hover_highlight: { type: Boolean, default: true },
+    quick_filter_field: { type: String, default: 'search_field' },
     export_to_csv: { type: Boolean, default: true },
     export_csv_filename: { type: String, default: 'export.csv' },
     fixed_header: { type: Boolean, default: false },
@@ -241,6 +242,9 @@ dmx.Component('ag-grid', {
     },
     getSelectedRows: function () {
       exportSelectedRows();
+    },
+    quickFilter: function () {
+      onFilterTextBoxChanged();
     }
   },
 
@@ -501,7 +505,8 @@ dmx.Component('ag-grid', {
       const buttons = params.buttons || defaultButtons;
       // Create a new container element to hold the buttons
       const container = document.createElement('div');
-      
+      container.style.display = 'flex';
+      container.style.flexWrap = 'wrap';
       buttons.forEach((buttonConfig) => {
           const button = document.createElement('button');
           button.classList.add('btn');
@@ -1196,6 +1201,7 @@ dmx.Component('ag-grid', {
         cellRenderer: actionsRendererForPinnedBottom,
         minWidth: options.actions_column_min_width,
         maxWidth: options.actions_column_max_width,
+        autoHeight: true,
         pinned: (options.pin_actions ? options.actions_column_position: undefined),
         cellRendererParams: {
           buttons: [],
@@ -1473,7 +1479,7 @@ dmx.Component('ag-grid', {
       gridConfig.onFirstDataRendered = function (e) {
         totalRow(e.api, columnsToSum, columnsToCount);
       };
-gridConfig.postSortRows = function (e) {
+      gridConfig.postSortRows = function (e) {
         totalRow(e.api, columnsToSum, columnsToCount);
       };
     }
@@ -1486,7 +1492,7 @@ gridConfig.postSortRows = function (e) {
         gridInstance.hideOverlay()
       }, options.loading_overlay_duration);
     }
-
+    
     if (options.cfilters && options.cfilters.length > 0) {
         var filterModel = {};
         const customFilters = options.cfilters
@@ -1587,6 +1593,14 @@ gridConfig.postSortRows = function (e) {
       const selectedRows = gridInstance.getSelectedRows();
       this.set('selectedRows', selectedRows);
     }
+    onFilterTextBoxChanged = () => {
+      if (gridInstance) {
+        gridInstance.setGridOption(
+          'quickFilterText',
+          document.getElementById(options.quick_filter_field).value
+        );
+      }
+    }
     function updateHoveringBarStyles() {
       const existingStyle = document.getElementById('hovering-bar-style');
       if (options.fixed_horizontal_scroll) {

package/package.json

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