@cdmx/wappler_ag_grid 0.8.7 → 0.8.9

package/README.md

@@ -12,8 +12,15 @@ The AG Grid module allows you to create a flexible and customizable data grid wi
    - "Alpine" (Default)
    - "Balham"
    - "Material"
+   - "Custom"
 5. **Locale**: Select the locale for the grid. Currently supported locales: English (EN) and Hebrew (HE). (Default: EN)
 
+**Note for Custom Theme:**
+When you select the "Custom" theme option, you have the flexibility to define your own unique styling for the ag-Grid components.
+This option allows you to customize the look and feel of the grid to match the design requirements of you pages and layouts.
+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.
+
 ## 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)
@@ -326,6 +333,14 @@ Specify the tooltip text for Button 10.
 - To be used if you wish to use a separate Export button instead of using the inbuilt top left-cornered Export button.
 - Trigger this action to call Export Data to CSV download action.
 
+**Save Column State**
+- This action allows you to save the current state of the grid's columns, including their visibility and order, to the browser's local storage.
+- It is useful when you want to remember and restore a specific column configuration for the grid.
+
+**Reset Column State**
+- This action enables you to reset the grid's column state to default state.
+- It is useful when you want to revert the column configuration to a default configuration.
+
 ## License
 
 The AG Grid module is licensed under the MIT License. Please refer to the license file for more details.

package/ag-theme-custom.css

@@ -0,0 +1,79 @@
+.ag-theme-custom.ag-theme-alpine {
+  --ag-odd-row-background-color: blue; /* Background color for odd rows */
+  --ag-alpine-active-color: red; /* Active color for Alpine theme */
+  --ag-data-color: #333; /* Color of text in grid cells */
+  --ag-header-foreground-color: rgb(12, 10, 10); /* Color of text and icons in the header */
+  --ag-header-background-color: rgb(226, 226, 219); /* Background color for all headers */
+  --ag-tooltip-background-color: #f6f8f1; /* Background color for tooltips */
+  --ag-disabled-foreground-color: gray; /* Color of disabled elements */
+  --ag-subheader-background-color: lightgray; /* Background color for second level headings */
+  --ag-subheader-toolbar-background-color: #ccc; /* Background color for toolbars under subheadings */
+  --ag-control-panel-background-color: #f5f5f5; /* Background for UI control areas */
+  --ag-side-button-selected-background-color: #007acc; /* Background for active side panel tab */
+  --ag-selected-row-background-color: #e6f7ff; /* Background color of selected rows */
+  --ag-odd-row-background-color: #f9f9f9; /* Background color applied to every other row */
+  --ag-modal-overlay-background-color: rgba(0, 0, 0, 0.5); /* Overlay background color */
+  --ag-row-hover-color: #e0e0e0; /* Background color when hovering over rows */
+  --ag-column-hover-color: #f0f0f0; /* Background color when hovering over columns */
+  --ag-range-selection-border-color: #007acc; /* Color around selected cell ranges */
+  --ag-range-selection-background-color: rgba(0, 122, 204, 0.2); /* Background color of selected cell ranges */
+  --ag-range-selection-background-color-2: rgba(0, 122, 204, 0.4); /* Background when 2 selected ranges overlap */
+  --ag-range-selection-background-color-3: rgba(0, 122, 204, 0.6); /* Background when 3 selected ranges overlap */
+  --ag-range-selection-background-color-4: rgba(0, 122, 204, 0.8); /* Background when 4+ selected ranges overlap */
+  --ag-range-selection-highlight-color: #007acc; /* Background color when copying/pasting ranges */
+  --ag-selected-tab-underline-color: #007acc; /* Color of the border under selected tabs */
+  /* --ag-borders: solid 1px grey; /* Enable borders around most UI elements */
+  /* --ag-border-color: #ccc; /* Color for border around major UI components */
+  /* --ag-borders-critical: solid 1px #ff6347; /* Enable borders critical to UX */
+  /* --ag-borders-secondary: solid 1px #eee; /* Draw decorative borders separating UI elements */
+  /* --ag-secondary-border-color: #eee; /* Color for decorative borders */
+  /* --ag-row-border-style: solid; /* Default border style for grid rows */
+  /* --ag-row-border-width: 1px; /* Thickness of the border between grid rows */
+  /* --ag-row-border-color: #ccc; /* Color of the border between grid rows
+  /* --ag-cell-horizontal-border: solid transparent; /* Default border for cells */
+  /* --ag-input-focus-border-color: #007acc; /* Border color around focused inputs */
+  /* --ag-checkbox-background-color: white; /* Background of checkboxes */
+  /* --ag-checkbox-border-radius: 3px; /* Border radius for checkboxes */
+  /* --ag-checkbox-checked-color: #007acc; /* Color of checked checkbox icon */
+  /* --ag-checkbox-unchecked-color: #ccc; /* Color of unchecked checkbox icon */
+  /* --ag-checkbox-indeterminate-color: #007acc; /* Color of indeterminate checkbox icon */
+  /* --ag-input-border-color: #ccc; /* Border color around inputs */
+  /* --ag-input-border-color-invalid: #ff6347; /* Border color around invalid inputs */
+  /* --ag-chip-background-color: #007acc; /* Background color for column drag indicator */
+  /* --ag-borders-input: solid 1px #ccc; /* Borders around inputs */
+  /* --ag-borders-input-invalid: solid 2px #ff6347; /* Borders around invalid inputs */
+  /* --ag-toggle-button-border-width: 1px; /* Thickness of the toggle button border */
+  /* --ag-toggle-button-on-border-color: #007acc; /* Border color of the toggle button in the 'on' state */
+  /* --ag-toggle-button-off-border-color: #ccc; /* Border color of the toggle button in the 'off' state */
+  /* --ag-toggle-button-on-background-color: #007acc; /* Background color of the toggle button in the 'on' state */
+  /* --ag-toggle-button-off-background-color: #ccc; /* Background color of the toggle button in the 'off' state */
+  /* --ag-toggle-button-switch-background-color: white; /* Background color of the toggle button switch */
+  /* --ag-toggle-button-switch-border-color: #ccc; /* Border color of the toggle button switch */
+  /* --ag-toggle-button-width: 40px; /* Width of the toggle button */
+  /* --ag-toggle-button-height: 20px; /* Height of the toggle button */
+  /* --ag-grid-size: 8px; /* Grid size for spacing */
+  /* --ag-icon-size: 16px; /* Size of icons */
+  /* --ag-widget-container-horizontal-padding: 8px; /* Horizontal padding for widget containers */
+  /* --ag-widget-container-vertical-padding: 8px; /* Vertical padding for widget containers */
+  /* --ag-widget-horizontal-spacing: 8px; /* Horizontal spacing between widgets */
+  /* --ag-widget-vertical-spacing: 8px; /* Vertical spacing between widgets */
+  /* --ag-cell-horizontal-padding: 8px; /* Horizontal padding for grid cells */
+  /* --ag-cell-widget-spacing: 4px; /* Horizontal spacing between widgets inside cells */
+  /* --ag-row-height: 32px; /* Height of grid rows */
+  /* --ag-header-height: 40px; /* Height of header rows */
+  /* --ag-list-item-height: 24px; /* Height of items in lists */
+  /* --ag-header-column-separator-display: block; /* Display header column separator */
+  /* --ag-header-column-separator-height: 100%; /* Height of header column separator */
+  /* --ag-header-column-separator-width: 1px; /* Width of header column separator */
+  /* --ag-header-column-separator-color: #ccc; /* Color of header column separator */
+  /* --ag-header-column-resize-handle-display: block; /* Display header column resize handle */
+  /* --ag-header-column-resize-handle-height: 100%; /* Height of header resize handle */
+  /* --ag-header-column-resize-handle-width: 10px; /* Width of header resize handle */
+  /* --ag-header-column-resize-handle-color: grey; /* Color of header resize handle */
+  /* --ag-font-family: 'Helvetica Neue', sans-serif; /* Font family for text */
+  /* --ag-font-size: 14px; /* Default font size */
+  /* --ag-icon-font-family: 'ag-Grid'; /* Icon font used by the grid */
+  /* --ag-card-radius: 4px; /* Border radius for cards */
+  /* --ag-card-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Shadow for cards */
+  /* --ag-popup-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* Shadow for popups */
+}

package/app_connect/components.hjson

@@ -76,6 +76,7 @@
               {title: 'Alpine', value: 'ag-theme-alpine'},
               {title: 'Balham', value: 'ag-theme-balham'},
               {title: 'Material', value: 'ag-theme-material'},
+              {title: 'Custom', value: 'ag-theme-alpine ag-theme-custom'},
               {title: 'Base', value: 'ag-grid'}
               ],
               "help": "Select a theme for the grid"
@@ -1825,6 +1826,24 @@
           state: 'opened',
           help: 'Export AG Grid Data to CSV',
           properties: []
+        },
+        {
+          addTitle: 'SaveColumnState',
+          title: 'Save Column State',
+          name: 'saveColumnState',
+          icon: 'fa fa-lg fa-save',
+          state: 'opened',
+          help: 'Save Column State to Browser Local Storage',
+          properties: []
+        },
+        {
+          addTitle: 'ResetColumnState',
+          title: 'Reset Column State',
+          name: 'resetColumnState',
+          icon: 'fa fa-lg fa-undo',
+          state: 'opened',
+          help: 'Save Column State to Browser Local Storage',
+          properties: []
         }
       ],
       "children": [],
@@ -1846,6 +1865,10 @@
           "src": "../../../node_modules/ag-grid-community/styles/ag-theme-material.css",
           "dst": "css/ag-theme-material.css"
         },
+        {
+          "src": "ag-theme-custom.css",
+          "dst": "css/ag-theme-custom.css"
+        },
         {
           "src": "switch-toggle-slider.css",
           "dst": "css/switch-toggle-slider.css"
@@ -1887,6 +1910,10 @@
           "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

@@ -170,6 +170,22 @@ dmx.Component('ag-grid', {
           console.error('Grid not loaded to perform export');
         }
       }, this);
+    },
+    saveColumnState: function () {
+      dmx.nextTick(function() {
+        if (typeof saveColumnStateToStorage === 'function') {
+          saveColumnStateToStorage();
+        } else {
+          console.error('Grid not loaded to perform saveColumnState');
+        }
+      }, this);
+    },
+    resetColumnState: function () {
+      dmx.nextTick(function() {
+        localStorage.removeItem('columnState');
+        let gridInstance = this.refreshGrid();
+        this.set('gridInstance', gridInstance);
+      }, this);
     }
   },
 
@@ -1061,6 +1077,24 @@ dmx.Component('ag-grid', {
         gridInstance = null;
     }
     const gridConfig = {
+      onGridReady: function (params) {
+        const columnApi = params.columnApi;
+        saveColumnStateToStorage = () => {
+          const columnState = columnApi.getColumnState();
+          localStorage.setItem('columnState', JSON.stringify(columnState));
+        }
+        function restoreColumnState() {
+          const savedColumnState = JSON.parse(localStorage.getItem('columnState'));
+          if (savedColumnState) {
+            columnApi.applyColumnState({
+              state: savedColumnState,
+              applyOrder: true,
+              applyVisibility: true,
+            });
+          }
+        }
+        restoreColumnState();
+      },
       columnDefs: columnDefs,
       rowData: rowData,
       ...gridOptions

package/package.json

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