Update column state on resetColumns action

ELM_CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Added `flex`, `pivot`, `pivotIndex`, `rowGroupIndex`, `sort`, and `sortIndex` to `ColumnSettings`
 - Using `ColumnState` passed to `GridConfig` to override the `ColumnDefs` passed to the grid view. This allows the `ColumnDefs` to be updated after the component is rendered without overwriting the column states. This resolves a column state caching issue.
+- Added `ResetColumns` as column state event
 
 ## [18.0.0]
 

NPM_CHANGELOG.md

@@ -1,5 +1,9 @@
 # NPM Changelog
 
+## [3.5.0]
+
+- Menu items on column headers have been updated slightly to customize the default action "resetColumns". It now triggers a column state change event, besides the usual action.
+
 ## [3.4.2]
 
 - Set initial cell editor value

README.md

@@ -44,7 +44,8 @@ The latest [Elm package version](https://package.elm-lang.org/packages/mercuryme
 | 10.0.0 - 11.0.0 |       3.3.0        |
 |     12.0.0      |       3.3.1        |
 |     13.0.0      |       3.3.2        |
-|   14.0.0 - \*   |     3.4.0 - \*     |
+| 14.0.0 - 18.0.0 |   3.4.0 - 3.4.2    |
+|   19.0.0 - \*   |     3.5.0 - \*     |
 
 ## Ag Grid Enterprise
 

ag-grid-webcomponent/index.js

@@ -246,6 +246,32 @@ class AgGrid extends HTMLElement {
       },
 
       aggFuncs: CUSTOM_AGGREGATIONS,
+      getMainMenuItems: (params) => {
+        // Override the default resetColumns actions to additionally trigger an explicit column state change event on the webcomponent
+        let defaultItems = params.defaultItems.filter(
+          (item) => item != "resetColumns"
+        );
+
+        const localeTextFunc =
+          params.api.navigationService.localeService.getLocaleTextFunc();
+
+        // Original implemenation of the "resetColumns" actions
+        // https://github.com/ag-grid/ag-grid/blob/latest/grid-enterprise-modules/menu/src/menu/menuItemMapper.ts#L155
+        defaultItems.push({
+          name: localeTextFunc("resetColumns", "Reset Columns"),
+          action: function () {
+            const changeEvent = columnStateChangedEvent(
+              { type: "resetColumns" },
+              []
+            );
+
+            self.dispatchEvent(changeEvent);
+            return params.columnApi.columnModel.resetColumnState("contextMenu");
+          },
+        });
+
+        return defaultItems;
+      },
 
       isRowSelectable: (params) => {
         return !!params.data && params.data.rowCallbackValues.isRowSelectable;
@@ -304,12 +330,11 @@ class AgGrid extends HTMLElement {
 
     columnEvents.map((event) =>
       this._addEventHandler(event, "columnEvents", function (params) {
-        const stateChangeEvent = new CustomEvent("columnStateChanged", {
-          detail: {
-            event: params,
-            columnState: params.columnApi.getColumnState(),
-          },
-        });
+        const stateChangeEvent = columnStateChangedEvent(
+          params,
+          params.columnApi.getColumnState()
+        );
+
         _this.dispatchEvent(stateChangeEvent);
       })
     );
@@ -353,3 +378,12 @@ export default class ElmAgGrid {
     customElements.define("ag-grid", AgGrid);
   }
 }
+
+function columnStateChangedEvent(params, columnState) {
+  return new CustomEvent("columnStateChanged", {
+    detail: {
+      event: params,
+      columnState: columnState,
+    },
+  });
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mercurymedia/elm-ag-grid",
-  "version": "3.4.2",
+  "version": "3.5.0",
   "description": "",
   "main": "ag-grid-webcomponent/index.js",
   "files": [

src/AgGrid.elm

@@ -102,6 +102,7 @@ type EventType
     | ColumnPinned
     | ColumnRowGroupChanged
     | ColumnValueChanged
+    | ResetColumns
 
 
 {-| Possible configuration for the Excel export.
@@ -1264,6 +1265,9 @@ eventTypeDecoder =
                     "columnValueChanged" ->
                         Decode.succeed ColumnValueChanged
 
+                    "resetColumns" ->
+                        Decode.succeed ResetColumns
+
                     unexpectedType ->
                         Decode.fail ("unexpected event type: " ++ unexpectedType)
             )