@cdmx/wappler_ag_grid 0.3.2 → 0.3.4

package/app_connect/components.hjson

@@ -91,7 +91,7 @@
           "variables": [
             {
               "name": "minWidth",
-              "attribute": "minWidth",
+              "attribute": "min_width",
               "title": "Minimum Width",
               "type": "number",
               "defaultValue": 150,
@@ -123,7 +123,7 @@
             },
             {
               "name": "floatingFilter",
-              "attribute": "dmx-bind:floatingFilter",
+              "attribute": "dmx-bind:floating_filter",
               "title": "Floating Filter",
               "type": "boolean",
               "defaultValue": true,
@@ -131,7 +131,7 @@
             },
             {
               "name": "exportToCSV",
-              "attribute": "dmx-bind:exportToCSV",
+              "attribute": "dmx-bind:export_to_csv",
               "title": "CSV Export",
               "type": "boolean",
               "defaultValue": true,
@@ -147,7 +147,7 @@
             },
             {
               "name": "columnHoverHighlight",
-              "attribute": "dmx-bind:columnHoverHighlight",
+              "attribute": "dmx-bind:column_hover_highlight",
               "title": "Column Hover Highlight",
               "type": "boolean",
               "defaultValue": true,
@@ -155,7 +155,7 @@
             },
             {
               "name": "suppressRowDeselection",
-              "attribute": "dmx-bind:suppressRowDeselection",
+              "attribute": "dmx-bind:suppress_row_deselection",
               "title": "Supress Row Deselection",
               "type": "boolean",
               "defaultValue": false,
@@ -171,7 +171,7 @@
             },
             {
               "name": "paginationPageSize",
-              "attribute": "paginationPageSize",
+              "attribute": "pagination_page_size",
               "title": "Pagination Page Size",
               "type": "number",
               "defaultValue": 20,
@@ -247,7 +247,7 @@
             },
             {
               "name": "fixedHeader",
-              "attribute": "dmx-bind:fixedHeader",
+              "attribute": "dmx-bind:fixed_header",
               "title": "Sticky Header",
               "type": "boolean",
               "display": "fieldset",
@@ -262,7 +262,7 @@
               "children": [
                 {
                   "name": "fixedHeaderOffset",
-                  "attribute": "fixedHeaderOffset",
+                  "attribute": "fixed_header_offset",
                   "title": "Header Offset",
                   "type": "number",
                   "initDisplay": "none",
@@ -271,7 +271,7 @@
                 },
                 {
                   "name": "topbarClass",
-                  "attribute": "topbarClass",
+                  "attribute": "topbar_class",
                   "title": "Topbar Class",
                   "type": "text",
                   "initDisplay": "none",
@@ -280,7 +280,7 @@
                 },
                 {
                   "name": "fixedTopOffset",
-                  "attribute": "fixedTopOffset",
+                  "attribute": "fixed_top_offset",
                   "title": "Topbar Offset",
                   "type": "number",
                   "initDisplay": "none",
@@ -291,7 +291,7 @@
             },
             {
               "name": "rowHeight",
-              "attribute": "rowHeight",
+              "attribute": "row_height",
               "title": "Row Height",
               "type": "number",
               "defaultValue": 25,
@@ -299,7 +299,7 @@
             },
             {
               "name": "headerHeight",
-              "attribute": "headerHeight",
+              "attribute": "header_height",
               "title": "Header Height",
               "type": "number",
               "defaultValue": 30,
@@ -307,7 +307,7 @@
             },
             {
               "name": "suppressRowClickSelection",
-              "attribute": "dmx-bind:suppressRowClickSelection",
+              "attribute": "dmx-bind:suppress_row_click_selection",
               "title": "Suppress Row Click Selection",
               "type": "boolean",
               "defaultValue": false,
@@ -315,7 +315,7 @@
             },
             {
               "name": "suppressMenuHide",
-              "attribute": "dmx-bind:suppressMenuHide",
+              "attribute": "dmx-bind:suppress_menu_hide",
               "title": "Suppress Menu Hide",
               "type": "boolean",
               "defaultValue": false,
@@ -323,7 +323,7 @@
             },
             {
               "name": "suppressMovableColumns",
-              "attribute": "dmx-bind:suppressMovableColumns",
+              "attribute": "dmx-bind:suppress_movable_columns",
               "title": "Suppress Movable Columns",
               "type": "boolean",
               "defaultValue": false,
@@ -331,7 +331,7 @@
             },
             {
               "name": "enableCellExpressions",
-              "attribute": "dmx-bind:enableCellExpressions",
+              "attribute": "dmx-bind:enable_cell_expressions",
               "title": "Enable Cell Expressions",
               "type": "boolean",
               "defaultValue": false,
@@ -339,7 +339,7 @@
             },
             {
               "name": "animateRows",
-              "attribute": "dmx-bind:animateRows",
+              "attribute": "dmx-bind:animate_rows",
               "title": "Animate Rows",
               "type": "boolean",
               "defaultValue": false,
@@ -347,7 +347,7 @@
             },
             {
               "name": "suppressAggFuncInHeader",
-              "attribute": "dmx-bind:suppressAggFuncInHeader",
+              "attribute": "dmx-bind:suppress_agg_func_in_header",
               "title": "Suppress Aggregation Function in Header",
               "type": "boolean",
               "defaultValue": false,
@@ -355,7 +355,7 @@
             },
             {
               "name": "suppressAggAtRootLevel",
-              "attribute": "dmx-bind:suppressAggAtRootLevel",
+              "attribute": "dmx-bind:suppress_agg_at_root_level",
               "title": "Suppress Aggregation at Root Level",
               "type": "boolean",
               "defaultValue": false,
@@ -363,7 +363,7 @@
             },
             {
               "name": "suppressClipboardPaste",
-              "attribute": "dmx-bind:suppressClipboardPaste",
+              "attribute": "dmx-bind:suppress_clipboard_paste",
               "title": "Suppress Clipboard Paste",
               "type": "boolean",
               "defaultValue": false,
@@ -371,7 +371,7 @@
             },
             {
               "name": "suppressScrollOnNewData",
-              "attribute": "dmx-bind:suppressScrollOnNewData",
+              "attribute": "dmx-bind:suppress_scroll_on_new_data",
               "title": "Suppress Scroll on New Data",
               "type": "boolean",
               "defaultValue": false,
@@ -379,7 +379,7 @@
             },
             {
               "name": "suppressPropertyNamesCheck",
-              "attribute": "dmx-bind:suppressPropertyNamesCheck",
+              "attribute": "dmx-bind:suppress_property_names_check",
               "title": "Suppress Property Names Check",
               "type": "boolean",
               "defaultValue": false,
@@ -980,6 +980,40 @@
         "dmx-ag-grid": true
       }
     },
+    {
+      "name": "dmx-ag-grid-pagination-page-size",
+      "attributeStartsWith": "dmx-bind",
+      "attribute": "pagination_page_size",
+      "title": "Pagination Page Size",
+      "type": "boolean",
+      "display": "fieldset",
+      "icon": "fa fa-lg fa-chevron-right",
+      "groupTitle": "Grid Config",
+      "groupIcon": "fa fa-lg fa-cubes",
+      "defaultValue": false,
+      "show": [
+        "paginationPageSize"
+      ],
+      "noChangeOnHide": true,
+      "groupEnabler": true,
+      "children": [
+        {
+          "name": "paginationPageSize",
+          "attributeStartsWith": "dmx-bind",
+          "attribute": "pagination_page_size",
+          "isValue": true,
+          "dataBindings": true,
+          "title": "Pagination Page Size:",
+          "type": "text",
+          "help": "Pagination Page Size.",
+          "defaultValue": "",
+          "initDisplay": "none"
+        }
+      ],
+      "allowedOn": {
+        "dmx-ag-grid": true
+      }
+    },
     {
       "name": "dmx-ag-grid-locale",
       "attributeStartsWith": "dmx-bind",

package/dmx-ag-grid.js

@@ -8,7 +8,6 @@ dmx.Component('ag-grid', {
 
   attributes: {
     id: { default: null },
-    rowData: { type: Array, default: [] },
     grid_theme: { type: String, default: 'ag-theme-alpine' },
     column_defs: { type: Array, default: [] },
     cstyles: { type: Array, default: [] },
@@ -16,39 +15,39 @@ dmx.Component('ag-grid', {
     cwidths: { type: Object, default: {} },
     data_changes: { type: Array, default: [] },
     data: { type: Array, default: [] },
-    domLayout: { default: 'autoHeight' },
-    enableCellTextSelection: { type: Boolean, default: true },
-    rowSelection: { type: String, default: 'single' },
-    suppressRowDeselection: { type: Boolean, default: false },
+    dom_layout: { type: String, default: 'autoHeight' },
+    enable_cell_text_selection: { type: Boolean, default: true },
+    row_selection: { type: String, default: 'single' },
+    suppress_row_deselection: { type: Boolean, default: false },
     pagination: { type: Boolean, default: true },
-    paginationPageSize: { default: 20 },
-    rowHeight: { type: Number, default: null },
-    headerHeight: { type: Number, default: null },
-    suppressRowClickSelection: { type: Boolean, default: false },
-    suppressMenuHide: { type: Boolean, default: false },
-    suppressMovableColumns: { type: Boolean, default: false },
-    enableCellExpressions: { type: Boolean, default: false },
-    animateRows: { type: Boolean, default: false },
-    suppressAggFuncInHeader: { type: Boolean, default: false },
-    suppressAggAtRootLevel: { type: Boolean, default: false },
-    suppressClipboardPaste: { type: Boolean, default: false },
-    suppressScrollOnNewData: { type: Boolean, default: false },
-    suppressPropertyNamesCheck: { type: Boolean, default: false },
+    pagination_page_size: { type: Number, default: 20 },
+    row_height: { type: Number, default: null },
+    header_height: { type: Number, default: null },
+    suppress_row_click_selection: { type: Boolean, default: false },
+    suppress_menu_hide: { type: Boolean, default: false },
+    suppress_movable_columns: { type: Boolean, default: false },
+    enable_cell_expressions: { type: Boolean, default: false },
+    animate_rows: { type: Boolean, default: false },
+    suppress_agg_func_in_header: { type: Boolean, default: false },
+    suppress_agg_at_root_level: { type: Boolean, default: false },
+    suppress_clipboard_paste: { type: Boolean, default: false },
+    suppress_scroll_on_new_data: { type: Boolean, default: false },
+    suppress_property_names_check: { type: Boolean, default: false },
     hide_id_field: { type: Boolean, default: false },
     enable_rtl: { type: Boolean, default: false },
     locale_text: { type: Text, default: null },
-    minWidth: { type: Number, default: 150 },
+    min_width: { type: Number, default: 150 },
     sortable: { type: Boolean, default: true },
     resizable: { type: Boolean, default: true },
     filter: { type: Boolean, default: true },
-    floatingFilter: { type: Boolean, default: true },
-    columnHoverHighlight: { type: Boolean, default: true },
-    exportToCSV: { type: Boolean, default: true },
-    fixedHeader: { type: Boolean, default: false },
-    topbarClass: { type: Text, default: 'topbar' },
-    fixedHeaderOffset: { type: Number, default: 100 },
-    fixedTopOffset: { type: Number, default: 80 },
-    fixedHorizonatalScroll: { type: Boolean, default: false },
+    floating_filter: { type: Boolean, default: true },
+    column_hover_highlight: { type: Boolean, default: true },
+    export_to_csv: { type: Boolean, default: true },
+    fixed_header: { type: Boolean, default: false },
+    topbar_class: { type: Text, default: 'topbar' },
+    fixed_header_offset: { type: Number, default: 100 },
+    fixed_top_offset: { type: Number, default: 80 },
+    fixed_horizonatal_scroll: { type: Boolean, default: false },
     timezone: {type: Text, default: '' },
     cell_click_event: {type: Boolean, default: false },
     row_click_event: {type: Boolean, default: false },
@@ -67,7 +66,6 @@ dmx.Component('ag-grid', {
     view_action_icon_class: {type: String, default: 'fas fa-eye' },
     view_action_btn_class: {type: String, default: 'btn-info btn-xs' },
     data_binded_changes: {type: Array, default: [] }
-    
   },
 
   methods: {
@@ -86,8 +84,13 @@ dmx.Component('ag-grid', {
     const options = this.props
     const rowData = this.props.data;
     const timezone = this.props.timezone || false;
+    const cnames = this.props.cnames
+    const cwidths = this.props.cwidths
+    const enableRowClickEvent = this.props.row_click_event;
+    const enableCellClickEvent = this.props.cell_click_event;
+    let localeText;
     let columnDefs = [];
-    let exportToCSV = this.props.exportToCSV;
+    let exportToCSV = this.props.export_to_csv;
     this.$node.innerHTML = `<div id=${options.id}-grid class="${options.grid_theme}"></div>`;
     if (!rowData || rowData.length === 0) {
       console.error('No row data provided.');
@@ -431,10 +434,7 @@ dmx.Component('ag-grid', {
         
           return null;
           }
-        cnames = this.props.cnames
-        cwidths = this.props.cwidths
-        enableRowClickEvent = this.props.row_click_event;
-        enableCellClickEvent = this.props.cell_click_event;
+
         if (cnames.hasOwnProperty(key)) {
         const cname = cnames[key]
         headerName = cname ? cname.custom_name : humanize(key);         
@@ -540,7 +540,6 @@ dmx.Component('ag-grid', {
     
       columnDefs.push(actionsColumn);
     }
-    let localeText;
     if (options.locale_text == 'HE') {
       localeText = AG_GRID_LOCALE_HE
     }
@@ -553,32 +552,32 @@ dmx.Component('ag-grid', {
       rowStyle: enableRowClickEvent ? { cursor: 'pointer' } : undefined,
       defaultColDef: {
         flex: 1,
-        minWidth: this.props.minWidth,
+        minWidth: this.props.min_width,
         resizable: this.props.resizable,
         filter: this.props.filter,
         sortable: this.props.sortable,
-        floatingFilter: this.props.floatingFilter
+        floatingFilter: this.props.floating_filter
       },
-      domLayout: 'autoHeight',
+      domLayout: this.props.dom_layout,
       enableCellTextSelection: true,
-      rowSelection: this.props.rowSelection,
-      suppressRowDeselection: this.props.suppressRowDeselection,
+      rowSelection: this.props.row_selection,
+      suppressRowDeselection: this.props.suppress_row_deselection,
       pagination: this.props.pagination,
-      paginationPageSize: this.props.paginationPageSize,
-      rowHeight: this.props.rowHeight,
-      headerHeight: this.props.headerHeight,
-      suppressRowClickSelection: this.props.suppressRowClickSelection,
-      suppressMenuHide: this.props.suppressMenuHide,
-      suppressMovableColumns: this.props.suppressMovableColumns,
-      enableCellExpressions: this.props.enableCellExpressions,
-      animateRows: this.props.animateRows,
-      suppressAggFuncInHeader: this.props.suppressAggFuncInHeader,
-      suppressAggAtRootLevel: this.props.suppressAggAtRootLevel,
-      suppressClipboardPaste: this.props.suppressClipboardPaste,
-      suppressScrollOnNewData: this.props.suppressScrollOnNewData,
-      suppressPropertyNamesCheck: this.props.suppressPropertyNamesCheck,
-      suppressRowDeselection: this.props.suppressRowDeselection,
-      columnHoverHighlight: this.props.columnHoverHighlight,
+      paginationPageSize: this.props.pagination_page_size,
+      rowHeight: this.props.row_height,
+      headerHeight: this.props.header_height,
+      suppressRowClickSelection: this.props.suppress_row_click_selection,
+      suppressMenuHide: this.props.suppress_menu_hide,
+      suppressMovableColumns: this.props.suppress_movable_columns,
+      enableCellExpressions: this.props.enable_cell_expressions,
+      animateRows: this.props.animate_rows,
+      suppressAggFuncInHeader: this.props.suppress_agg_func_in_header,
+      suppressAggAtRootLevel: this.props.suppress_agg_at_root_level,
+      suppressClipboardPaste: this.props.suppress_clipboard_paste,
+      suppressScrollOnNewData: this.props.suppress_scroll_on_new_data,
+      suppressPropertyNamesCheck: this.props.suppress_property_names_check,
+      suppressRowDeselection: this.props.suppress_row_deselection,
+      columnHoverHighlight: this.props.column_hover_highlight,
       components: {
         clickCellRenderer: clickCellRenderer,
         checkboxCellRenderer: checkboxCellRenderer,
@@ -626,10 +625,10 @@ dmx.Component('ag-grid', {
       console.error('Grid container not found.');
       return;
     }
-    if (options.fixedHeader) {
+    if (options.fixed_header) {
       window.addEventListener('scroll', function () {
         const header = document.querySelector('.ag-header');
-        const topbar = document.querySelector('.' + options.topbarClass);
+        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;
 

package/package.json

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