@cdmx/wappler_ag_grid 0.8.0 → 0.8.2

package/README.md

@@ -1,4 +1,4 @@
-#### Developed and Maintained by: Roney Dsilva
+#### Developed and Maintained by: Roney Dsilva
 # AG Grid Module Documentation
 
 The AG Grid module allows you to create a flexible and customizable data grid with various options and properties. Below, you'll find the list of properties and options available for configuring the AG Grid module:
@@ -195,6 +195,9 @@ This will display the "Configure Actions" options for the buttons in the Actions
 **Pin Actions Column**
 This will keep the Actions Column fixed when scrolling horizontally.
 
+**Actions Column Position**
+This will set the position of the Actions Column.(Default: Right)
+
 **Edit Action Button**
 This will display the "Edit Action Button" options.
 
@@ -236,6 +239,68 @@ Specify the tooltip text for the Delete Action button.
 Specify the CSS class for styling the Delete Action button.
 Specify the CSS class for styling the icon of the Delete Action button.
 
+# Custom Action Buttons
+
+**Button1 Class**
+Specify the CSS class for Button 1.
+
+**Button1 Tooltip**
+Specify the tooltip text for Button 1.
+
+**Button2 Class**
+Specify the CSS class for Button 2.
+
+**Button2 Tooltip**
+Specify the tooltip text for Button 2.
+
+**Button3 Class**
+Specify the CSS class for Button 3.
+
+**Button3 Tooltip**
+Specify the tooltip text for Button 3.
+
+**Button4 Class**
+Specify the CSS class for Button 4.
+
+**Button4 Tooltip**
+Specify the tooltip text for Button 4.
+
+**Button5 Class**
+Specify the CSS class for Button 5.
+
+**Button5 Tooltip**
+Specify the tooltip text for Button 5.
+
+**Button6 Class**
+Specify the CSS class for Button 6.
+
+**Button6 Tooltip**
+Specify the tooltip text for Button 6.
+
+**Button7 Class**
+Specify the CSS class for Button 7.
+
+**Button7 Tooltip**
+Specify the tooltip text for Button 7.
+
+**Button8 Class**
+Specify the CSS class for Button 8.
+
+**Button8 Tooltip**
+Specify the tooltip text for Button 8.
+
+**Button9 Class**
+Specify the CSS class for Button 9.
+
+**Button9 Tooltip**
+Specify the tooltip text for Button 9.
+
+**Button10 Class**
+Specify the CSS class for Button 10.
+
+**Button10 Tooltip**
+Specify the tooltip text for Button 10.
+
 # Action Attributes
 
 **Load**

package/app_connect/components.hjson

@@ -1154,6 +1154,7 @@
               "show": [
                 "enableActions",
                 "pinActions",
+                "ActionsColumnPosition",
                 "editActionBtn",
                 "editActionTitle",
                 "editActionTooltip",
@@ -1190,6 +1191,18 @@
                   "defaultValue": true,
                   "help": "Pin Actions Column"
                 },
+                {
+                  "name": "ActionsColumnPosition",
+                  "attribute": "actions_column_position",
+                  "title": "Actions Column Position",
+                  "type": "droplist",
+                  "defaultValue": 'right',
+                  "values": [
+                  {title: 'Right', value: 'right'},
+                  {title: 'Left', value: 'left'}
+                  ],
+                  "help": "Actions Column Position"
+                },
                 {
                   "name": "editActionBtn",
                   "attribute": "dmx-bind:edit_action_btn",
@@ -1296,6 +1309,431 @@
                   "defaultValue": 'fas fa-trash'
                 }
               ]
+            },
+            {
+              "name": "customActionButtons",
+              "attribute": "custom_action_buttons",
+              "title": "Custom Action Buttons",
+              "type": "boolean",
+              "defaultValue": false,
+              "display": "fieldset",
+              "show": [
+                "enableCustomActions",
+                "button1ActionBtn",
+                "button1ActionTitle",
+                "button1ActionTooltip",
+                "button1ActionBtnClass",
+                "button1ActionIconClass",
+                "button2ActionBtn",
+                "button2ActionTitle",
+                "button2ActionTooltip",
+                "button2ActionBtnClass",
+                "button2ActionIconClass",
+                "button3ActionBtn",
+                "button3ActionTitle",
+                "button3ActionTooltip",
+                "button3ActionBtnClass",
+                "button3ActionIconClass",
+                "button4ActionBtn",
+                "button4ActionTitle",
+                "button4ActionTooltip",
+                "button4ActionBtnClass",
+                "button4ActionIconClass",
+                "button5ActionBtn",
+                "button5ActionTitle",
+                "button5ActionTooltip",
+                "button5ActionBtnClass",
+                "button5ActionIconClass",
+                "button6ActionBtn",
+                "button6ActionTitle",
+                "button6ActionTooltip",
+                "button6ActionBtnClass",
+                "button6ActionIconClass",
+                "button7ActionBtn",
+                "button7ActionTitle",
+                "button7ActionTooltip",
+                "button7ActionBtnClass",
+                "button7ActionIconClass",
+                "button8ActionBtn",
+                "button8ActionTitle",
+                "button8ActionTooltip",
+                "button8ActionBtnClass",
+                "button8ActionIconClass",
+                "button9ActionBtn",
+                "button9ActionTitle",
+                "button9ActionTooltip",
+                "button9ActionBtnClass",
+                "button9ActionIconClass",
+                "button10ActionBtn",
+                "button10ActionTitle",
+                "button10ActionTooltip",
+                "button10ActionBtnClass",
+                "button10ActionIconClass"
+              ],
+              "noChangeOnHide": true,
+              "groupEnabler": true,
+              "help": "Configure Custom Action buttons in Actions Column"
+              "children": [
+                {
+                  "name": "enableCustomActions",
+                  "attribute": "dmx-bind:enable_custom_action_btns",
+                  "title": "Custom Action Buttons",
+                  "type": "boolean",
+                  "defaultValue": false,
+                  "help": "Enable Custom Action Buttons"
+                },
+                {
+                  "name": "button1ActionBtn",
+                  "attribute": "dmx-bind:button1_action_btn",
+                  "title": "Button1 Action Button",
+                  "type": "boolean",
+                  "defaultValue": false
+                },
+                {
+                  "name": "button1ActionTitle",
+                  "attribute": "button1_action_title",
+                  "title": "Button1 Title",
+                  "type": "text",
+                  "defaultValue": ""
+                },
+                {
+                  "name": "button1ActionTooltip",
+                  "attribute": "button1_action_tooltip",
+                  "title": "Button1 Tooltip",
+                  "type": "text",
+                  "defaultValue": ""
+                },
+                {
+                  "name": "button1ActionBtnClass",
+                  "attribute": "button1_action_btn_class",
+                  "title": "Button1 Class",
+                  "type": "text",
+                  "defaultValue": "btn-primary btn-xs"
+                },
+                {
+                  "name": "button1ActionIconClass",
+                  "attribute": "button1_action_icon_class",
+                  "title": "Button1 Icon Class",
+                  "type": "text",
+                  "defaultValue": "fas fa-wrench"
+                },
+                {
+                  "name": "button2ActionBtn",
+                  "attribute": "dmx-bind:button2_action_btn",
+                  "title": "Button2 Action Button",
+                  "type": "boolean",
+                  "defaultValue": false
+                },
+                {
+                  "name": "button2ActionTitle",
+                  "attribute": "button2_action_title",
+                  "title": "Button2 Title",
+                  "type": "text",
+                  "defaultValue": ""
+                },
+                {
+                  "name": "button2ActionTooltip",
+                  "attribute": "button2_action_tooltip",
+                  "title": "Button2 Tooltip",
+                  "type": "text",
+                  "defaultValue": ""
+                },
+                {
+                  "name": "button2ActionBtnClass",
+                  "attribute": "button2_action_btn_class",
+                  "title": "Button2 Class",
+                  "type": "text",
+                  "defaultValue": "btn-info btn-xs"
+                },
+                {
+                  "name": "button2ActionIconClass",
+                  "attribute": "button2_action_icon_class",
+                  "title": "Button2 Icon Class",
+                  "type": "text",
+                  "defaultValue": "fas fa-search-plus"
+                },
+                {
+                  "name": "button3ActionBtn",
+                  "attribute": "dmx-bind:button3_action_btn",
+                  "title": "Button3 Action Button",
+                  "type": "boolean",
+                  "defaultValue": false
+                },
+                {
+                  "name": "button3ActionTitle",
+                  "attribute": "button3_action_title",
+                  "title": "Button3 Title",
+                  "type": "text",
+                  "defaultValue": ""
+                },
+                {
+                  "name": "button3ActionTooltip",
+                  "attribute": "button3_action_tooltip",
+                  "title": "Button3 Tooltip",
+                  "type": "text",
+                  "defaultValue": ""
+                },
+                {
+                  "name": "button3ActionBtnClass",
+                  "attribute": "button3_action_btn_class",
+                  "title": "Button3 Class",
+                  "type": "text",
+                  "defaultValue": "btn-success btn-xs"
+                },
+                {
+                  "name": "button3ActionIconClass",
+                  "attribute": "button3_action_icon_class",
+                  "title": "Button3 Icon Class",
+                  "type": "text",
+                  "defaultValue": "fas fa-check-circle"
+                },
+                {
+                  "name": "button4ActionBtn",
+                  "attribute": "dmx-bind:button4_action_btn",
+                  "title": "Button4 Action Button",
+                  "type": "boolean",
+                  "defaultValue": false
+                },
+                {
+                  "name": "button4ActionTitle",
+                  "attribute": "button4_action_title",
+                  "title": "Button4 Title",
+                  "type": "text",
+                  "defaultValue": ""
+                },
+                {
+                  "name": "button4ActionTooltip",
+                  "attribute": "button4_action_tooltip",
+                  "title": "Button4 Tooltip",
+                  "type": "text",
+                  "defaultValue": ""
+                },
+                {
+                  "name": "button4ActionBtnClass",
+                  "attribute": "button4_action_btn_class",
+                  "title": "Button4 Class",
+                  "type": "text",
+                  "defaultValue": "btn-warning btn-xs"
+                },
+                {
+                  "name": "button4ActionIconClass",
+                  "attribute": "button4_action_icon_class",
+                  "title": "Button4 Icon Class",
+                  "type": "text",
+                  "defaultValue": "fas fa-exclamation-triangle"
+                },
+                {
+                  "name": "button5ActionBtn",
+                  "attribute": "dmx-bind:button5_action_btn",
+                  "title": "Button5 Action Button",
+                  "type": "boolean",
+                  "defaultValue": false
+                },
+                {
+                  "name": "button5ActionTitle",
+                  "attribute": "button5_action_title",
+                  "title": "Button5 Title",
+                  "type": "text",
+                  "defaultValue": ""
+                },
+                {
+                  "name": "button5ActionTooltip",
+                  "attribute": "button5_action_tooltip",
+                  "title": "Button5 Tooltip",
+                  "type": "text",
+                  "defaultValue": ""
+                },
+                {
+                  "name": "button5ActionBtnClass",
+                  "attribute": "button5_action_btn_class",
+                  "title": "Button5 Class",
+                  "type": "text",
+                  "defaultValue": "btn-danger btn-xs"
+                },
+                {
+                  "name": "button5ActionIconClass",
+                  "attribute": "button5_action_icon_class",
+                  "title": "Button5 Icon Class",
+                  "type": "text",
+                  "defaultValue": "fas fa-times-circle"
+                },
+                {
+                  "name": "button6ActionBtn",
+                  "attribute": "dmx-bind:button6_action_btn",
+                  "title": "Button6 Action Button",
+                  "type": "boolean",
+                  "defaultValue": false
+                },
+                {
+                  "name": "button6ActionTitle",
+                  "attribute": "button6_action_title",
+                  "title": "Button6 Title",
+                  "type": "text",
+                  "defaultValue": ""
+                },
+                {
+                  "name": "button6ActionTooltip",
+                  "attribute": "button6_action_tooltip",
+                  "title": "Button6 Tooltip",
+                  "type": "text",
+                  "defaultValue": ""
+                },
+                {
+                  "name": "button6ActionBtnClass",
+                  "attribute": "button6_action_btn_class",
+                  "title": "Button6 Class",
+                  "type": "text",
+                  "defaultValue": "btn-secondary btn-xs"
+                },
+                {
+                  "name": "button6ActionIconClass",
+                  "attribute": "button6_action_icon_class",
+                  "title": "Button6 Icon Class",
+                  "type": "text",
+                  "defaultValue": "fas fa-link"
+                },
+                {
+                  "name": "button7ActionBtn",
+                  "attribute": "dmx-bind:button7_action_btn",
+                  "title": "Button7 Action Button",
+                  "type": "boolean",
+                  "defaultValue": false
+                },
+                {
+                  "name": "button7ActionTitle",
+                  "attribute": "button7_action_title",
+                  "title": "Button7 Title",
+                  "type": "text",
+                  "defaultValue": ""
+                },
+                {
+                  "name": "button7ActionTooltip",
+                  "attribute": "button7_action_tooltip",
+                  "title": "Button7 Tooltip",
+                  "type": "text",
+                  "defaultValue": ""
+                },
+                {
+                  "name": "button7ActionBtnClass",
+                  "attribute": "button7_action_btn_class",
+                  "title": "Button7 Class",
+                  "type": "text",
+                  "defaultValue": "btn-primary btn-xs"
+                },
+                {
+                  "name": "button7ActionIconClass",
+                  "attribute": "button7_action_icon_class",
+                  "title": "Button7 Icon Class",
+                  "type": "text",
+                  "defaultValue": "fas fa-download"
+                },
+                {
+                  "name": "button8ActionBtn",
+                  "attribute": "dmx-bind:button8_action_btn",
+                  "title": "Button8 Action Button",
+                  "type": "boolean",
+                  "defaultValue": false
+                },
+                {
+                  "name": "button8ActionTitle",
+                  "attribute": "button8_action_title",
+                  "title": "Button8 Title",
+                  "type": "text",
+                  "defaultValue": ""
+                },
+                {
+                  "name": "button8ActionTooltip",
+                  "attribute": "button8_action_tooltip",
+                  "title": "Button8 Tooltip",
+                  "type": "text",
+                  "defaultValue": ""
+                },
+                {
+                  "name": "button8ActionBtnClass",
+                  "attribute": "button8_action_btn_class",
+                  "title": "Button8 Class",
+                  "type": "text",
+                  "defaultValue": "btn-info btn-xs"
+                },
+                {
+                  "name": "button8ActionIconClass",
+                  "attribute": "button8_action_icon_class",
+                  "title": "Button8 Icon Class",
+                  "type": "text",
+                  "defaultValue": "fas fa-file-pdf"
+                },
+                {
+                  "name": "button9ActionBtn",
+                  "attribute": "dmx-bind:button9_action_btn",
+                  "title": "Button9 Action Button",
+                  "type": "boolean",
+                  "defaultValue": false
+                },
+                {
+                  "name": "button9ActionTitle",
+                  "attribute": "button9_action_title",
+                  "title": "Button9 Title",
+                  "type": "text",
+                  "defaultValue": ""
+                },
+                {
+                  "name": "button9ActionTooltip",
+                  "attribute": "button9_action_tooltip",
+                  "title": "Button9 Tooltip",
+                  "type": "text",
+                  "defaultValue": ""
+                },
+                {
+                  "name": "button9ActionBtnClass",
+                  "attribute": "button9_action_btn_class",
+                  "title": "Button9 Class",
+                  "type": "text",
+                  "defaultValue": "btn-success btn-xs"
+                },
+                {
+                  "name": "button9ActionIconClass",
+                  "attribute": "button9_action_icon_class",
+                  "title": "Button9 Icon Class",
+                  "type": "text",
+                  "defaultValue": "fas fa-star"
+                },
+                {
+                  "name": "button10ActionBtn",
+                  "attribute": "dmx-bind:button10_action_btn",
+                  "title": "Button10 Action Button",
+                  "type": "boolean",
+                  "defaultValue": false
+                },
+                {
+                  "name": "button10ActionTitle",
+                  "attribute": "button10_action_title",
+                  "title": "Button10 Title",
+                  "type": "text",
+                  "defaultValue": ""
+                },
+                {
+                  "name": "button10ActionTooltip",
+                  "attribute": "button10_action_tooltip",
+                  "title": "Button10 Tooltip",
+                  "type": "text",
+                  "defaultValue": ""
+                },
+                {
+                  "name": "button10ActionBtnClass",
+                  "attribute": "button10_action_btn_class",
+                  "title": "Button10 Class",
+                  "type": "text",
+                  "defaultValue": "btn-danger btn-xs"
+                },
+                {
+                  "name": "button10ActionIconClass",
+                  "attribute": "button10_action_icon_class",
+                  "title": "Button10 Icon Class",
+                  "type": "text",
+                  "defaultValue": "fas fa-trash-alt"
+                }
+
+              ]
             }
           ]
         }
@@ -1809,8 +2247,348 @@
       ],
       "allowedOn": {
         "dmx-ag-grid": true
-      }
-    }
+        }
+      },
+        {
+        "name": "dmx-ag-grid-button1-clicked",
+        "attributeStartsWith": "dmx-on",
+        "attribute": "row_action_button1",
+        "display": "fieldset",
+        "title": "Button1 Clicked",
+        "icon": "fa fa-lg fa-chevron-right",
+        "groupTitle": "Custom Buttons",
+        "groupIcon": "fa fa-lg fa-hand-pointer",
+        "defaultValue": false,
+        "show": [
+          "button1ActionEvent"
+        ],
+        "noChangeOnHide": true,
+        "type": "boolean",
+        "groupEnabler": true,
+        "children": [
+          {
+            "name": "button1ActionEvent",
+            "attributeStartsWith": "dmx-on",
+            "attribute": "row_action_button1",
+            "isValue": true,
+            "actionsPicker": true,
+            "title": "Action:",
+            "type": "text",
+            "help": "Choose the action to execute.",
+            "defaultValue": "",
+            "initDisplay": "none"
+          }
+        ],
+        "allowedOn": {
+          "dmx-ag-grid": true
+        }
+      },
+      {
+        "name": "dmx-ag-grid-button2-clicked",
+        "attributeStartsWith": "dmx-on",
+        "attribute": "row_action_button2",
+        "display": "fieldset",
+        "title": "Button2 Clicked",
+        "icon": "fa fa-lg fa-chevron-right",
+        "groupTitle": "Custom Buttons",
+        "groupIcon": "fa fa-lg fa-hand-pointer",
+        "defaultValue": false,
+        "show": [
+          "button2ActionEvent"
+        ],
+        "noChangeOnHide": true,
+        "type": "boolean",
+        "groupEnabler": true,
+        "children": [
+          {
+            "name": "button2ActionEvent",
+            "attributeStartsWith": "dmx-on",
+            "attribute": "row_action_button2",
+            "isValue": true,
+            "actionsPicker": true,
+            "title": "Action:",
+            "type": "text",
+            "help": "Choose the action to execute.",
+            "defaultValue": "",
+            "initDisplay": "none"
+          }
+        ],
+        "allowedOn": {
+          "dmx-ag-grid": true
+        }
+      },
+      {
+        "name": "dmx-ag-grid-button3-clicked",
+        "attributeStartsWith": "dmx-on",
+        "attribute": "row_action_button3",
+        "display": "fieldset",
+        "title": "Button3 Clicked",
+        "icon": "fa fa-lg fa-chevron-right",
+        "groupTitle": "Custom Buttons",
+        "groupIcon": "fa fa-lg fa-hand-pointer",
+        "defaultValue": false,
+        "show": [
+          "button3ActionEvent"
+        ],
+        "noChangeOnHide": true,
+        "type": "boolean",
+        "groupEnabler": true,
+        "children": [
+          {
+            "name": "button3ActionEvent",
+            "attributeStartsWith": "dmx-on",
+            "attribute": "row_action_button3",
+            "isValue": true,
+            "actionsPicker": true,
+            "title": "Action:",
+            "type": "text",
+            "help": "Choose the action to execute.",
+            "defaultValue": "",
+            "initDisplay": "none"
+          }
+        ],
+        "allowedOn": {
+          "dmx-ag-grid": true
+        }
+      },
+      {
+        "name": "dmx-ag-grid-button4-clicked",
+        "attributeStartsWith": "dmx-on",
+        "attribute": "row_action_button4",
+        "display": "fieldset",
+        "title": "Button4 Clicked",
+        "icon": "fa fa-lg fa-chevron-right",
+        "groupTitle": "Custom Buttons",
+        "groupIcon": "fa fa-lg fa-hand-pointer",
+        "defaultValue": false,
+        "show": [
+          "button4ActionEvent"
+        ],
+        "noChangeOnHide": true,
+        "type": "boolean",
+        "groupEnabler": true,
+        "children": [
+          {
+            "name": "button4ActionEvent",
+            "attributeStartsWith": "dmx-on",
+            "attribute": "row_action_button4",
+            "isValue": true,
+            "actionsPicker": true,
+            "title": "Action:",
+            "type": "text",
+            "help": "Choose the action to execute.",
+            "defaultValue": "",
+            "initDisplay": "none"
+          }
+        ],
+        "allowedOn": {
+          "dmx-ag-grid": true
+        }
+      },
+      {
+        "name": "dmx-ag-grid-button5-clicked",
+        "attributeStartsWith": "dmx-on",
+        "attribute": "row_action_button5",
+        "display": "fieldset",
+        "title": "Button5 Clicked",
+        "icon": "fa fa-lg fa-chevron-right",
+        "groupTitle": "Custom Buttons",
+        "groupIcon": "fa fa-lg fa-hand-pointer",
+        "defaultValue": false,
+        "show": [
+          "button5ActionEvent"
+        ],
+        "noChangeOnHide": true,
+        "type": "boolean",
+        "groupEnabler": true,
+        "children": [
+          {
+            "name": "button5ActionEvent",
+            "attributeStartsWith": "dmx-on",
+            "attribute": "row_action_button5",
+            "isValue": true,
+            "actionsPicker": true,
+            "title": "Action:",
+            "type": "text",
+            "help": "Choose the action to execute.",
+            "defaultValue": "",
+            "initDisplay": "none"
+          }
+        ],
+        "allowedOn": {
+          "dmx-ag-grid": true
+        }
+      },
+      {
+        "name": "dmx-ag-grid-button6-clicked",
+        "attributeStartsWith": "dmx-on",
+        "attribute": "row_action_button6",
+        "display": "fieldset",
+        "title": "Button6 Clicked",
+        "icon": "fa fa-lg fa-chevron-right",
+        "groupTitle": "Custom Buttons",
+        "groupIcon": "fa fa-lg fa-hand-pointer",
+        "defaultValue": false,
+        "show": [
+          "button6ActionEvent"
+        ],
+        "noChangeOnHide": true,
+        "type": "boolean",
+        "groupEnabler": true,
+        "children": [
+          {
+            "name": "button6ActionEvent",
+            "attributeStartsWith": "dmx-on",
+            "attribute": "row_action_button6",
+            "isValue": true,
+            "actionsPicker": true,
+            "title": "Action:",
+            "type": "text",
+            "help": "Choose the action to execute.",
+            "defaultValue": "",
+            "initDisplay": "none"
+          }
+        ],
+        "allowedOn": {
+          "dmx-ag-grid": true
+        }
+      },
+      {
+        "name": "dmx-ag-grid-button7-clicked",
+        "attributeStartsWith": "dmx-on",
+        "attribute": "row_action_button7",
+        "display": "fieldset",
+        "title": "Button7 Clicked",
+        "icon": "fa fa-lg fa-chevron-right",
+        "groupTitle": "Custom Buttons",
+        "groupIcon": "fa fa-lg fa-hand-pointer",
+        "defaultValue": false,
+        "show": [
+          "button7ActionEvent"
+        ],
+        "noChangeOnHide": true,
+        "type": "boolean",
+        "groupEnabler": true,
+        "children": [
+          {
+            "name": "button7ActionEvent",
+            "attributeStartsWith": "dmx-on",
+            "attribute": "row_action_button7",
+            "isValue": true,
+            "actionsPicker": true,
+            "title": "Action:",
+            "type": "text",
+            "help": "Choose the action to execute.",
+            "defaultValue": "",
+            "initDisplay": "none"
+          }
+        ],
+        "allowedOn": {
+          "dmx-ag-grid": true
+        }
+      },
+      {
+        "name": "dmx-ag-grid-button8-clicked",
+        "attributeStartsWith": "dmx-on",
+        "attribute": "row_action_button8",
+        "display": "fieldset",
+        "title": "Button8 Clicked",
+        "icon": "fa fa-lg fa-chevron-right",
+        "groupTitle": "Custom Buttons",
+        "groupIcon": "fa fa-lg fa-hand-pointer",
+        "defaultValue": false,
+        "show": [
+          "button8ActionEvent"
+        ],
+        "noChangeOnHide": true,
+        "type": "boolean",
+        "groupEnabler": true,
+        "children": [
+          {
+            "name": "button8ActionEvent",
+            "attributeStartsWith": "dmx-on",
+            "attribute": "row_action_button8",
+            "isValue": true,
+            "actionsPicker": true,
+            "title": "Action:",
+            "type": "text",
+            "help": "Choose the action to execute.",
+            "defaultValue": "",
+            "initDisplay": "none"
+          }
+        ],
+        "allowedOn": {
+          "dmx-ag-grid": true
+        }
+      },
+      {
+        "name": "dmx-ag-grid-button9-clicked",
+        "attributeStartsWith": "dmx-on",
+        "attribute": "row_action_button9",
+        "display": "fieldset",
+        "title": "Button9 Clicked",
+        "icon": "fa fa-lg fa-chevron-right",
+        "groupTitle": "Custom Buttons",
+        "groupIcon": "fa fa-lg fa-hand-pointer",
+        "defaultValue": false,
+        "show": [
+          "button9ActionEvent"
+        ],
+        "noChangeOnHide": true,
+        "type": "boolean",
+        "groupEnabler": true,
+        "children": [
+          {
+            "name": "button9ActionEvent",
+            "attributeStartsWith": "dmx-on",
+            "attribute": "row_action_button9",
+            "isValue": true,
+            "actionsPicker": true,
+            "title": "Action:",
+            "type": "text",
+            "help": "Choose the action to execute.",
+            "defaultValue": "",
+            "initDisplay": "none"
+          }
+        ],
+        "allowedOn": {
+          "dmx-ag-grid": true
+        }
+      },
+      {
+        "name": "dmx-ag-grid-button10-clicked",
+        "attributeStartsWith": "dmx-on",
+        "attribute": "row_action_button10",
+        "display": "fieldset",
+        "title": "Button10 Clicked",
+        "icon": "fa fa-lg fa-chevron-right",
+        "groupTitle": "Custom Buttons",
+        "groupIcon": "fa fa-lg fa-hand-pointer",
+        "defaultValue": false,
+        "show": [
+          "button10ActionEvent"
+        ],
+        "noChangeOnHide": true,
+        "type": "boolean",
+        "groupEnabler": true,
+        "children": [
+          {
+            "name": "button10ActionEvent",
+            "attributeStartsWith": "dmx-on",
+            "attribute": "row_action_button10",
+            "isValue": true,
+            "actionsPicker": true,
+            "title": "Action:",
+            "type": "text",
+            "help": "Choose the action to execute.",
+            "defaultValue": "",
+            "initDisplay": "none"
+          }
+        ],
+        "allowedOn": {
+          "dmx-ag-grid": true
+        }
+      },
   ],
   "static_events": []
 }

package/dmx-ag-grid.js

@@ -65,7 +65,8 @@ dmx.Component('ag-grid', {
     row_checkbox_event: {type: Boolean, default: false },
     row_status_event: {type: Boolean, default: false },
     enable_actions: {type: Boolean, default: false },
-    pin_actions: {type: String, default: 'right' },
+    actions_column_position: {type: String, default: 'right' },
+    pin_actions: { type: Boolean, default: true },
     edit_action_btn: { type: Boolean, default: false },
     edit_action_title: {type: String, default: '' },
     edit_action_tooltip: {type: String, default: 'Edit' },
@@ -81,6 +82,57 @@ dmx.Component('ag-grid', {
     delete_action_tooltip: {type: String, default: 'Delete' },
     delete_action_icon_class: {type: String, default: 'fas fa-trash' },
     delete_action_btn_class: {type: String, default: 'btn-danger btn-xs' },
+    enable_custom_action_btns: { type: Boolean, default: false },
+    button1_action_btn: { type: "Boolean", default: false },
+    button1_action_title: { type: "String", default: "" },
+    button1_action_tooltip: { type: "String", default: "" },
+    button1_action_icon_class: { type: "String", default: "fas fa-wrench" },
+    button1_action_btn_class: { type: "String", default: "btn-primary btn-xs" },
+    button2_action_btn: { type: "Boolean", default: false },
+    button2_action_title: { type: "String", default: "" },
+    button2_action_tooltip: { type: "String", default: "" },
+    button2_action_icon_class: { type: "String", default: "fas fa-search-plus" },
+    button2_action_btn_class: { type: "String", default: "btn-info btn-xs" },
+    button3_action_btn: { type: "Boolean", default: false },
+    button3_action_title: { type: "String", default: "" },
+    button3_action_tooltip: { type: "String", default: "" },
+    button3_action_icon_class: { type: "String", default: "fas fa-check-circle" },
+    button3_action_btn_class: { type: "String", default: "btn-success btn-xs" },
+    button4_action_btn: { type: "Boolean", default: false },
+    button4_action_title: { type: "String", default: "" },
+    button4_action_tooltip: { type: "String", default: "" },
+    button4_action_icon_class: { type: "String", default: "fas fa-exclamation-triangle" },
+    button4_action_btn_class: { type: "String", default: "btn-warning btn-xs" },
+    button5_action_btn: { type: "Boolean", default: false },
+    button5_action_title: { type: "String", default: "" },
+    button5_action_tooltip: { type: "String", default: "Edit" },
+    button5_action_icon_class: { type: "String", default: "fas fa-times-circle" },
+    button5_action_btn_class: { type: "String", default: "btn-danger btn-xs" },
+    button6_action_btn: { type: "Boolean", default: false },
+    button6_action_title: { type: "String", default: "" },
+    button6_action_tooltip: { type: "String", default: "" },
+    button6_action_icon_class: { type: "String", default: "fas fa-link" },
+    button6_action_btn_class: { type: "String", default: "btn-secondary btn-xs" },
+    button7_action_btn: { type: "Boolean", default: false },
+    button7_action_title: { type: "String", default: "" },
+    button7_action_tooltip: { type: "String", default: "" },
+    button7_action_icon_class: { type: "String", default: "fas fa-download" },
+    button7_action_btn_class: { type: "String", default: "btn-primary btn-xm" },
+    button8_action_btn: { type: "Boolean", default: false },
+    button8_action_title: { type: "String", default: "" },
+    button8_action_tooltip: { type: "String", default: "" },
+    button8_action_icon_class: { type: "String", default: "fas fa-file-pdf" },
+    button8_action_btn_class: { type: "String", default: "btn-info btn-xs" },
+    button9_action_btn: { type: "Boolean", default: false },
+    button9_action_title: { type: "String", default: "" },
+    button9_action_tooltip: { type: "String", default: "" },
+    button9_action_icon_class: { type: "String", default: "fas fa-star" },
+    button9_action_btn_class: { type: "String", default: "btn-success btn-xs" },
+    button10_action_btn: { type: "Boolean", default: false },
+    button10_action_title: { type: "String", default: "" },
+    button10_action_tooltip: { type: "String", default: "" },
+    button10_action_icon_class: { type: "String", default: "fas fa-trash-alt" },
+    button10_action_btn_class: { type: "String", default: "btn-danger btn-xs" },
     data_binded_changes: {type: Array, default: [] },
     hide_fields: {type: String, default: null },
     hide_filters: {type: String, default: null },
@@ -233,15 +285,24 @@ dmx.Component('ag-grid', {
         `;
     }
     function actionsRenderer(params) {
-      // Default button configurations (Edit and View)
+      // Default button configurations (Edit, View and Delete)
       const defaultButtons = [
         { action: 'Edit', classNames: 'btn-primary btn-xs', tooltip: 'Edit', icon: 'fas fa-pencil-alt' },
         { action: 'View', classNames: 'btn-info btn-xs', tooltip: 'View', icon: 'fas fa-eye' },
         { action: 'Delete', classNames: 'btn-danger btn-xs', tooltip: 'Delete', icon: 'fas fa-trash' },
+        { action: 'Button1', classNames: 'btn-primary btn-xs', tooltip: 'Button1', icon: 'fas fa-wrench' },
+        { action: 'Button2', classNames: 'btn-info btn-xs', tooltip: 'Button2', icon: 'fas fa-search-plus' },
+        { action: 'Button3', classNames: 'btn-success btn-xs', tooltip: 'Button3', icon: 'fas fa-check-circle' },
+        { action: 'Button4', classNames: 'btn-warning btn-xs', tooltip: 'Button4', icon: 'fas fa-exclamation-triangle' },
+        { action: 'Button5', classNames: 'btn-danger btn-xs', tooltip: 'Button5', icon: 'fas fa-times-circle' },
+        { action: 'Button6', classNames: 'btn-secondary btn-xs', tooltip: 'Button6', icon: 'fas fa-link' },
+        { action: 'Button7', classNames: 'btn-primary btn-sm', tooltip: 'Button7', icon: 'fas fa-download' },
+        { action: 'Button8', classNames: 'btn-info btn-sm', tooltip: 'Button8', icon: 'fas fa-file-pdf' },
+        { action: 'Button9', classNames: 'btn-success btn-sm', tooltip: 'Button9', icon: 'fas fa-star' },
+        { action: 'Button10', classNames: 'btn-danger btn-sm', tooltip: 'Button10', icon: 'fas fa-trash-alt' }
       ];
       // User-defined button configurations (if any)
       const buttons = params.buttons || defaultButtons;
-  
       // Create a new container element to hold the buttons
       const container = document.createElement('div');
   
@@ -831,7 +892,7 @@ dmx.Component('ag-grid', {
         filter: null,
         sortable: false,
         cellRenderer: actionsRenderer,
-        pinned: options.pin_actions,
+        pinned: (options.pin_actions ? options.actions_column_position: undefined),
         cellRendererParams: {
           buttons: [],
         },
@@ -864,21 +925,30 @@ dmx.Component('ag-grid', {
           },
         });
       }
-      if (options.delete_action_btn) {
-        actionsColumn.cellRendererParams.buttons.push({
-          action: options.delete_action_title,
-          classNames: options.delete_action_btn_class,
-          tooltip: options.delete_action_tooltip,
-          icon: options.delete_action_icon_class,
-          onClick: (rowData) => {
-            this.set('data', rowData);
-            this.set('id', rowData.id);
-            this.dispatchEvent('row_action_delete');
-          },
-        });
-      }
-    
-      columnDefs.push(actionsColumn);
+      if (options.enable_custom_action_btns) {
+        for (let i = 1; i <= 10; i++) {
+          const buttonActionKey = `button${i}_action_btn`;
+          const buttonTitleKey = `button${i}_action_title`;
+          const buttonClassKey = `button${i}_action_btn_class`;
+          const buttonTooltipKey = `button${i}_action_tooltip`;
+          const buttonIconClassKey = `button${i}_action_icon_class`;
+        
+          if (options[buttonActionKey]) {
+            actionsColumn.cellRendererParams.buttons.push({
+              action: options[buttonTitleKey],
+              classNames: options[buttonClassKey],
+              tooltip: options[buttonTooltipKey],
+              icon: options[buttonIconClassKey],
+              onClick: (rowData) => {
+                this.set('data', rowData);
+                this.set('id', rowData.id);
+                this.dispatchEvent(`row_action_button${i}`);
+              },
+            });
+          }
+        }
+    }
+      options.actions_column_position=='right' ? columnDefs.push(actionsColumn):columnDefs.unshift(actionsColumn);
     }
     if (options.locale_text == 'HE') {
       localeText = AG_GRID_LOCALE_HE
@@ -1124,9 +1194,19 @@ dmx.Component('ag-grid', {
     row_status_disabled: Event,
     row_action_edit: Event,
     row_action_view: Event,
-    row_action_delete: Event
+    row_action_delete: Event,
+    row_action_button1: Event,
+    row_action_button2: Event,
+    row_action_button3: Event,
+    row_action_button4: Event,
+    row_action_button5: Event,
+    row_action_button6: Event,
+    row_action_button7: Event,
+    row_action_button8: Event,
+    row_action_button9: Event,
+    row_action_button10: Event
   },
-
+  
   render: function(node) {
     if (this.$node) {
       this.$parse();

package/package.json

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