diff --git a/.eslintrc b/.eslintrc
index 79cad97ce..12d2407b4 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -28,7 +28,6 @@
     "@typescript-eslint/ban-ts-ignore": "off",
     "@typescript-eslint/array-type": "off",
     "@typescript-eslint/ban-types": "error",
-    "@typescript-eslint/class-name-casing": "error",
     "@typescript-eslint/consistent-type-assertions": "off",
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
@@ -52,7 +51,6 @@
         "SwitchCase": 1
       }
     ],
-    "@typescript-eslint/interface-name-prefix": "error",
     "@typescript-eslint/member-ordering": "off",
     "@typescript-eslint/member-delimiter-style": "off",
     "@typescript-eslint/no-empty-function": "off",
diff --git a/package.json b/package.json
index 21093ec5c..d79f2a8a1 100644
--- a/package.json
+++ b/package.json
@@ -35,9 +35,9 @@
     "jest-junit": "^10.0.0",
     "jsdom": "^16.2.2",
     "jsdom-global": "^3.0.2",
-    "lerna": "^3.21.0",
+    "lerna": "^3.22.0",
     "ts-jest": "^26.0.0",
-    "typescript": "^3.9.2"
+    "typescript": "^3.9.3"
   },
   "engines": {
     "node": ">=12.13.1",
diff --git a/packages/common/src/editors/__tests__/autoCompleteEditor.spec.ts b/packages/common/src/editors/__tests__/autoCompleteEditor.spec.ts
index 29cb474a2..99f779581 100644
--- a/packages/common/src/editors/__tests__/autoCompleteEditor.spec.ts
+++ b/packages/common/src/editors/__tests__/autoCompleteEditor.spec.ts
@@ -1,7 +1,7 @@
 import { Editors } from '../index';
 import { AutoCompleteEditor } from '../autoCompleteEditor';
 import { KeyCode, FieldType } from '../../enums/index';
-import { AutocompleteOption, Column, EditorArgs, EditorArguments, GridOption, } from '../../interfaces/index';
+import { AutocompleteOption, Column, DataView, EditorArgs, EditorArguments, GridOption, SlickGrid } from '../../interfaces/index';
 
 const KEY_CHAR_A = 97;
 const containerId = 'demo-container';
@@ -11,7 +11,7 @@ const template = `<div id="${containerId}"></div>`;
 
 const dataViewStub = {
   refresh: jest.fn(),
-};
+} as unknown as DataView;
 
 const gridOptionMock = {
   autoCommitEdit: false,
@@ -28,7 +28,7 @@ const gridStub = {
   getEditorLock: () => getEditorLockMock,
   getHeaderRowColumn: jest.fn(),
   render: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('AutoCompleteEditor', () => {
   let divContainer: HTMLDivElement;
diff --git a/packages/common/src/editors/__tests__/checkboxEditor.spec.ts b/packages/common/src/editors/__tests__/checkboxEditor.spec.ts
index 5c09e0cf8..bbfb7b433 100644
--- a/packages/common/src/editors/__tests__/checkboxEditor.spec.ts
+++ b/packages/common/src/editors/__tests__/checkboxEditor.spec.ts
@@ -1,6 +1,6 @@
 import { Editors } from '../index';
 import { CheckboxEditor } from '../checkboxEditor';
-import { AutocompleteOption, Column, EditorArgs, EditorArguments, GridOption } from '../../interfaces/index';
+import { AutocompleteOption, Column, DataView, EditorArgs, EditorArguments, GridOption, SlickGrid } from '../../interfaces/index';
 
 const KEY_CHAR_SPACE = 32;
 const containerId = 'demo-container';
@@ -10,7 +10,7 @@ const template = `<div id="${containerId}"></div>`;
 
 const dataViewStub = {
   refresh: jest.fn(),
-};
+} as unknown as DataView;
 
 const gridOptionMock = {
   autoCommitEdit: false,
@@ -27,7 +27,7 @@ const gridStub = {
   getEditorLock: () => getEditorLockMock,
   getHeaderRowColumn: jest.fn(),
   render: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('CheckboxEditor', () => {
   let divContainer: HTMLDivElement;
diff --git a/packages/common/src/editors/__tests__/dateEditor.spec.ts b/packages/common/src/editors/__tests__/dateEditor.spec.ts
index 2f9a2fccb..9c78329ec 100644
--- a/packages/common/src/editors/__tests__/dateEditor.spec.ts
+++ b/packages/common/src/editors/__tests__/dateEditor.spec.ts
@@ -3,7 +3,7 @@ import * as moment from 'moment';
 import { Editors } from '../index';
 import { DateEditor } from '../dateEditor';
 import { FieldType } from '../../enums/index';
-import { Column, EditorArgs, EditorArguments, GridOption } from '../../interfaces/index';
+import { Column, DataView, EditorArgs, EditorArguments, GridOption, SlickGrid } from '../../interfaces/index';
 import { TranslateServiceStub } from '../../../../../test/translateServiceStub';
 
 const containerId = 'demo-container';
@@ -13,7 +13,7 @@ const template = `<div id="${containerId}"></div>`;
 
 const dataViewStub = {
   refresh: jest.fn(),
-};
+} as unknown as DataView;
 
 const gridOptionMock = {
   autoCommitEdit: false,
@@ -33,7 +33,7 @@ const gridStub = {
   navigateNext: jest.fn(),
   navigatePrev: jest.fn(),
   render: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('DateEditor', () => {
   let translateService: TranslateServiceStub;
diff --git a/packages/common/src/editors/__tests__/dualInputEditor.spec.ts b/packages/common/src/editors/__tests__/dualInputEditor.spec.ts
index 6c1437bbd..82f4e94e4 100644
--- a/packages/common/src/editors/__tests__/dualInputEditor.spec.ts
+++ b/packages/common/src/editors/__tests__/dualInputEditor.spec.ts
@@ -1,11 +1,10 @@
 import { Editors } from '../index';
 import { DualInputEditor } from '../dualInputEditor';
 import { KeyCode } from '../../enums/index';
-import { Column, EditorArgs, EditorArguments, GridOption, ColumnEditorDualInput } from '../../interfaces/index';
+import { Column, ColumnEditorDualInput, DataView, EditorArgs, EditorArguments, GridOption, SlickGrid } from '../../interfaces/index';
 
 declare const Slick: any;
 const KEY_CHAR_0 = 48;
-const KEY_CHAR_A = 97;
 const containerId = 'demo-container';
 
 // define a <div> container to simulate the grid container
@@ -13,7 +12,7 @@ const template = `<div id="${containerId}"></div>`;
 
 const dataViewStub = {
   refresh: jest.fn(),
-};
+} as unknown as DataView;
 
 const gridOptionMock = {
   autoCommitEdit: false,
@@ -31,7 +30,7 @@ const gridStub = {
   getHeaderRowColumn: jest.fn(),
   onValidationError: new Slick.Event(),
   render: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('DualInputEditor', () => {
   let divContainer: HTMLDivElement;
diff --git a/packages/common/src/editors/__tests__/floatEditor.spec.ts b/packages/common/src/editors/__tests__/floatEditor.spec.ts
index c593fcfeb..383386274 100644
--- a/packages/common/src/editors/__tests__/floatEditor.spec.ts
+++ b/packages/common/src/editors/__tests__/floatEditor.spec.ts
@@ -1,7 +1,7 @@
 import { Editors } from '../index';
 import { FloatEditor } from '../floatEditor';
 import { KeyCode } from '../../enums/index';
-import { Column, EditorArgs, EditorArguments, GridOption, } from '../../interfaces/index';
+import { Column, DataView, EditorArgs, EditorArguments, GridOption, SlickGrid } from '../../interfaces/index';
 
 const KEY_CHAR_0 = 48;
 const containerId = 'demo-container';
@@ -11,7 +11,7 @@ const template = `<div id="${containerId}"></div>`;
 
 const dataViewStub = {
   refresh: jest.fn(),
-};
+} as unknown as DataView;
 
 const gridOptionMock = {
   autoCommitEdit: false,
@@ -28,7 +28,7 @@ const gridStub = {
   getEditorLock: () => getEditorLockMock,
   getHeaderRowColumn: jest.fn(),
   render: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('FloatEditor', () => {
   let divContainer: HTMLDivElement;
diff --git a/packages/common/src/editors/__tests__/integerEditor.spec.ts b/packages/common/src/editors/__tests__/integerEditor.spec.ts
index 9f204a083..2255c4ddb 100644
--- a/packages/common/src/editors/__tests__/integerEditor.spec.ts
+++ b/packages/common/src/editors/__tests__/integerEditor.spec.ts
@@ -1,7 +1,7 @@
 import { Editors } from '../index';
 import { IntegerEditor } from '../integerEditor';
 import { KeyCode } from '../../enums/index';
-import { Column, EditorArgs, EditorArguments, GridOption, } from '../../interfaces/index';
+import { Column, DataView, EditorArgs, EditorArguments, GridOption, SlickGrid } from '../../interfaces/index';
 
 const KEY_CHAR_0 = 48;
 const containerId = 'demo-container';
@@ -11,7 +11,7 @@ const template = `<div id="${containerId}"></div>`;
 
 const dataViewStub = {
   refresh: jest.fn(),
-};
+} as unknown as DataView;
 
 const gridOptionMock = {
   autoCommitEdit: false,
@@ -28,7 +28,7 @@ const gridStub = {
   getEditorLock: () => getEditorLockMock,
   getHeaderRowColumn: jest.fn(),
   render: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('IntegerEditor', () => {
   let divContainer: HTMLDivElement;
diff --git a/packages/common/src/editors/__tests__/longTextEditor.spec.ts b/packages/common/src/editors/__tests__/longTextEditor.spec.ts
index 2769a1b02..dc5821927 100644
--- a/packages/common/src/editors/__tests__/longTextEditor.spec.ts
+++ b/packages/common/src/editors/__tests__/longTextEditor.spec.ts
@@ -1,7 +1,7 @@
 import { Editors } from '../index';
 import { LongTextEditor } from '../longTextEditor';
 import { KeyCode } from '../../enums/index';
-import { AutocompleteOption, Column, EditorArgs, EditorArguments, GridOption } from '../../interfaces/index';
+import { AutocompleteOption, Column, DataView, EditorArgs, EditorArguments, GridOption, SlickGrid } from '../../interfaces/index';
 import { TranslateServiceStub } from '../../../../../test/translateServiceStub';
 
 const KEY_CHAR_A = 97;
@@ -12,7 +12,7 @@ const template = `<div id="${containerId}"></div>`;
 
 const dataViewStub = {
   refresh: jest.fn(),
-};
+} as unknown as DataView;
 
 const gridOptionMock = {
   autoCommitEdit: false,
@@ -32,7 +32,7 @@ const gridStub = {
   navigateNext: jest.fn(),
   navigatePrev: jest.fn(),
   render: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('LongTextEditor', () => {
   let divContainer: HTMLDivElement;
diff --git a/packages/common/src/editors/__tests__/multipleSelectEditor.spec.ts b/packages/common/src/editors/__tests__/multipleSelectEditor.spec.ts
index 149da6367..8cd6f4be9 100644
--- a/packages/common/src/editors/__tests__/multipleSelectEditor.spec.ts
+++ b/packages/common/src/editors/__tests__/multipleSelectEditor.spec.ts
@@ -4,7 +4,7 @@ import 'multiple-select-adapted';
 import { Editors } from '../index';
 import { MultipleSelectEditor } from '../multipleSelectEditor';
 import { CollectionService } from '../../services/collection.service';
-import { Column, EditorArguments, GridOption } from '../../interfaces/index';
+import { Column, DataView, EditorArguments, GridOption, SlickGrid } from '../../interfaces/index';
 import { TranslateServiceStub } from '../../../../../test/translateServiceStub';
 
 const containerId = 'demo-container';
@@ -14,7 +14,7 @@ const template = `<div id="${containerId}"></div>`;
 
 const dataViewStub = {
   refresh: jest.fn(),
-};
+} as unknown as DataView;
 
 const gridOptionMock = {
   autoCommitEdit: false,
@@ -34,7 +34,7 @@ const gridStub = {
   navigateNext: jest.fn(),
   navigatePrev: jest.fn(),
   render: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('MultipleSelectEditor', () => {
   let translateService: TranslateServiceStub;
diff --git a/packages/common/src/editors/__tests__/selectEditor.spec.ts b/packages/common/src/editors/__tests__/selectEditor.spec.ts
index 2236be2d0..fbc1d4129 100644
--- a/packages/common/src/editors/__tests__/selectEditor.spec.ts
+++ b/packages/common/src/editors/__tests__/selectEditor.spec.ts
@@ -5,7 +5,7 @@ import { Editors } from '../index';
 import { SelectEditor } from '../selectEditor';
 import { CollectionService } from './../../services/collection.service';
 import { FieldType, OperatorType } from '../../enums/index';
-import { AutocompleteOption, Column, EditorArgs, EditorArguments, GridOption, } from '../../interfaces/index';
+import { AutocompleteOption, Column, DataView, EditorArgs, EditorArguments, GridOption, SlickGrid } from '../../interfaces/index';
 import { TranslateServiceStub } from '../../../../../test/translateServiceStub';
 
 const containerId = 'demo-container';
@@ -15,7 +15,7 @@ const template = `<div id="${containerId}"></div>`;
 
 const dataViewStub = {
   refresh: jest.fn(),
-};
+} as unknown as DataView;
 
 const gridOptionMock = {
   autoCommitEdit: false,
@@ -35,7 +35,7 @@ const gridStub = {
   navigateNext: jest.fn(),
   navigatePrev: jest.fn(),
   render: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('SelectEditor', () => {
   let translateService: TranslateServiceStub;
diff --git a/packages/common/src/editors/__tests__/singleSelectEditor.spec.ts b/packages/common/src/editors/__tests__/singleSelectEditor.spec.ts
index 95225736f..327aa2f56 100644
--- a/packages/common/src/editors/__tests__/singleSelectEditor.spec.ts
+++ b/packages/common/src/editors/__tests__/singleSelectEditor.spec.ts
@@ -4,7 +4,7 @@ import 'multiple-select-adapted';
 import { Editors } from '../index';
 import { SingleSelectEditor } from '../singleSelectEditor';
 import { CollectionService } from '../../services/collection.service';
-import { Column, EditorArguments, GridOption } from '../../interfaces/index';
+import { Column, DataView, EditorArguments, GridOption, SlickGrid } from '../../interfaces/index';
 import { TranslateServiceStub } from '../../../../../test/translateServiceStub';
 
 const containerId = 'demo-container';
@@ -14,7 +14,7 @@ const template = `<div id="${containerId}"></div>`;
 
 const dataViewStub = {
   refresh: jest.fn(),
-};
+} as unknown as DataView;
 
 const gridOptionMock = {
   autoCommitEdit: false,
@@ -34,7 +34,7 @@ const gridStub = {
   navigateNext: jest.fn(),
   navigatePrev: jest.fn(),
   render: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('SingleSelectEditor', () => {
   let translateService: TranslateServiceStub;
diff --git a/packages/common/src/editors/__tests__/sliderEditor.spec.ts b/packages/common/src/editors/__tests__/sliderEditor.spec.ts
index a55deb205..2937442b3 100644
--- a/packages/common/src/editors/__tests__/sliderEditor.spec.ts
+++ b/packages/common/src/editors/__tests__/sliderEditor.spec.ts
@@ -1,6 +1,6 @@
 import { Editors } from '../index';
 import { SliderEditor } from '../sliderEditor';
-import { Column, EditorArgs, EditorArguments, GridOption } from '../../interfaces/index';
+import { Column, DataView, EditorArgs, EditorArguments, GridOption, SlickGrid } from '../../interfaces/index';
 
 const containerId = 'demo-container';
 
@@ -9,7 +9,7 @@ const template = `<div id="${containerId}"></div>`;
 
 const dataViewStub = {
   refresh: jest.fn(),
-};
+} as unknown as DataView;
 
 const gridOptionMock = {
   autoCommitEdit: false,
@@ -26,7 +26,7 @@ const gridStub = {
   getEditorLock: () => getEditorLockMock,
   getHeaderRowColumn: jest.fn(),
   render: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('SliderEditor', () => {
   let divContainer: HTMLDivElement;
diff --git a/packages/common/src/editors/__tests__/textEditor.spec.ts b/packages/common/src/editors/__tests__/textEditor.spec.ts
index 53ba559aa..4940df8cc 100644
--- a/packages/common/src/editors/__tests__/textEditor.spec.ts
+++ b/packages/common/src/editors/__tests__/textEditor.spec.ts
@@ -1,7 +1,7 @@
 import { Editors } from '../index';
 import { TextEditor } from '../textEditor';
 import { KeyCode } from '../../enums/index';
-import { AutocompleteOption, Column, EditorArgs, EditorArguments, GridOption } from '../../interfaces/index';
+import { AutocompleteOption, Column, DataView, EditorArgs, EditorArguments, GridOption, SlickGrid } from '../../interfaces/index';
 
 const KEY_CHAR_A = 97;
 const containerId = 'demo-container';
@@ -11,7 +11,7 @@ const template = `<div id="${containerId}"></div>`;
 
 const dataViewStub = {
   refresh: jest.fn(),
-};
+} as unknown as DataView;
 
 const gridOptionMock = {
   autoCommitEdit: false,
@@ -28,7 +28,7 @@ const gridStub = {
   getEditorLock: () => getEditorLockMock,
   getHeaderRowColumn: jest.fn(),
   render: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('TextEditor', () => {
   let divContainer: HTMLDivElement;
diff --git a/packages/common/src/editors/autoCompleteEditor.ts b/packages/common/src/editors/autoCompleteEditor.ts
index d3dfa4200..25d46ddae 100644
--- a/packages/common/src/editors/autoCompleteEditor.ts
+++ b/packages/common/src/editors/autoCompleteEditor.ts
@@ -8,8 +8,8 @@ import {
   EditorArguments,
   EditorValidator,
   EditorValidatorOutput,
+  SlickGrid,
 } from './../interfaces/index';
-import { Constants } from './../constants';
 import { findOrDefault, getDescendantProperty, setDeepValue } from '../services/utilities';
 import { textValidator } from '../editorValidators/textValidator';
 
@@ -34,7 +34,7 @@ export class AutoCompleteEditor implements Editor {
   private _$editorElm: any;
 
   /** SlickGrid Grid object */
-  grid: any;
+  grid: SlickGrid;
 
   /** The property name for labels in the collection */
   labelName: string;
diff --git a/packages/common/src/editors/checkboxEditor.ts b/packages/common/src/editors/checkboxEditor.ts
index 9859eeb5a..e739aa625 100644
--- a/packages/common/src/editors/checkboxEditor.ts
+++ b/packages/common/src/editors/checkboxEditor.ts
@@ -1,5 +1,5 @@
 import { Constants } from './../constants';
-import { Column, ColumnEditor, Editor, EditorArguments, EditorValidator, EditorValidatorOutput } from './../interfaces/index';
+import { Column, ColumnEditor, Editor, EditorArguments, EditorValidator, EditorValidatorOutput, SlickGrid } from './../interfaces/index';
 import { getDescendantProperty, setDeepValue } from '../services/utilities';
 
 /*
@@ -11,7 +11,7 @@ export class CheckboxEditor implements Editor {
   originalValue: boolean;
 
   /** SlickGrid Grid object */
-  grid: any;
+  grid: SlickGrid;
 
   constructor(private args: EditorArguments) {
     if (!args) {
diff --git a/packages/common/src/editors/dateEditor.ts b/packages/common/src/editors/dateEditor.ts
index 28707473b..acdef591c 100644
--- a/packages/common/src/editors/dateEditor.ts
+++ b/packages/common/src/editors/dateEditor.ts
@@ -16,6 +16,7 @@ import {
   EditorValidatorOutput,
   FlatpickrOption,
   GridOption,
+  SlickGrid,
 } from './../interfaces/index';
 import { mapFlatpickrDateFormatWithFieldType, mapMomentDateFormatWithFieldType, setDeepValue, getDescendantProperty } from './../services/utilities';
 import { TranslaterService } from '../services/translater.service';
@@ -39,7 +40,7 @@ export class DateEditor implements Editor {
   originalDate: string;
 
   /** SlickGrid Grid object */
-  grid: any;
+  grid: SlickGrid;
 
   /** Grid options */
   gridOptions: GridOption;
diff --git a/packages/common/src/editors/dualInputEditor.ts b/packages/common/src/editors/dualInputEditor.ts
index 43a70a257..33910ed61 100644
--- a/packages/common/src/editors/dualInputEditor.ts
+++ b/packages/common/src/editors/dualInputEditor.ts
@@ -11,6 +11,7 @@ import {
   EditorValidatorOutput,
   GridOption,
   SlickEventHandler,
+  SlickGrid,
 } from '../interfaces/index';
 
 // using external non-typed js libraries
@@ -33,7 +34,7 @@ export class DualInputEditor implements Editor {
   originalRightValue: string | number;
 
   /** SlickGrid Grid object */
-  grid: any;
+  grid: SlickGrid;
 
   /** Grid options */
   gridOptions: GridOption;
diff --git a/packages/common/src/editors/floatEditor.ts b/packages/common/src/editors/floatEditor.ts
index 1c4cbbf26..1613fd996 100644
--- a/packages/common/src/editors/floatEditor.ts
+++ b/packages/common/src/editors/floatEditor.ts
@@ -1,5 +1,5 @@
 import { KeyCode } from '../enums/index';
-import { Column, ColumnEditor, Editor, EditorArguments, EditorValidator, EditorValidatorOutput } from '../interfaces/index';
+import { Column, ColumnEditor, Editor, EditorArguments, EditorValidator, EditorValidatorOutput, SlickGrid } from '../interfaces/index';
 import { setDeepValue, getDescendantProperty } from '../services/utilities';
 import { floatValidator } from '../editorValidators/floatValidator';
 
@@ -15,7 +15,7 @@ export class FloatEditor implements Editor {
   originalValue: number | string;
 
   /** SlickGrid Grid object */
-  grid: any;
+  grid: SlickGrid;
 
   constructor(private args: EditorArguments) {
     if (!args) {
diff --git a/packages/common/src/editors/integerEditor.ts b/packages/common/src/editors/integerEditor.ts
index f4f0a1f09..e24d03ec8 100644
--- a/packages/common/src/editors/integerEditor.ts
+++ b/packages/common/src/editors/integerEditor.ts
@@ -1,6 +1,6 @@
 import { Constants } from './../constants';
 import { KeyCode } from '../enums/index';
-import { Column, ColumnEditor, Editor, EditorArguments, EditorValidator, EditorValidatorOutput } from './../interfaces/index';
+import { Column, ColumnEditor, Editor, EditorArguments, EditorValidator, EditorValidatorOutput, SlickGrid } from './../interfaces/index';
 import { getDescendantProperty, setDeepValue } from '../services/utilities';
 import { integerValidator } from '../editorValidators/integerValidator';
 
@@ -14,7 +14,7 @@ export class IntegerEditor implements Editor {
   originalValue: number | string;
 
   /** SlickGrid Grid object */
-  grid: any;
+  grid: SlickGrid;
 
   constructor(private args: EditorArguments) {
     if (!args) {
diff --git a/packages/common/src/editors/longTextEditor.ts b/packages/common/src/editors/longTextEditor.ts
index 2235ccef7..f10e60da7 100644
--- a/packages/common/src/editors/longTextEditor.ts
+++ b/packages/common/src/editors/longTextEditor.ts
@@ -10,6 +10,7 @@ import {
   GridOption,
   HtmlElementPosition,
   Locale,
+  SlickGrid,
 } from '../interfaces/index';
 import { getDescendantProperty, getHtmlElementOffset, getTranslationPrefix, setDeepValue } from '../services/utilities';
 import { TranslaterService } from '../services/translater.service';
@@ -30,7 +31,7 @@ export class LongTextEditor implements Editor {
   defaultValue: any;
 
   /** SlickGrid Grid object */
-  grid: any;
+  grid: SlickGrid;
 
   /** Grid options */
   gridOptions: GridOption;
diff --git a/packages/common/src/editors/selectEditor.ts b/packages/common/src/editors/selectEditor.ts
index b982ad3b0..13c4529fc 100644
--- a/packages/common/src/editors/selectEditor.ts
+++ b/packages/common/src/editors/selectEditor.ts
@@ -15,6 +15,7 @@ import {
   Locale,
   MultipleSelectOption,
   SelectOption,
+  SlickGrid,
 } from './../interfaces/index';
 import { CollectionService, findOrDefault, TranslaterService } from '../services/index';
 import { charArraysEqual, getDescendantProperty, getTranslationPrefix, htmlEncode, setDeepValue } from '../services/utilities';
@@ -76,7 +77,7 @@ export class SelectEditor implements Editor {
   protected _translaterService: TranslaterService;
 
   /** SlickGrid Grid object */
-  grid: any;
+  grid: SlickGrid;
 
   constructor(protected args: EditorArguments, protected isMultipleSelect: boolean) {
     if (!args) {
diff --git a/packages/common/src/editors/sliderEditor.ts b/packages/common/src/editors/sliderEditor.ts
index 9a2b1c044..875a6a39a 100644
--- a/packages/common/src/editors/sliderEditor.ts
+++ b/packages/common/src/editors/sliderEditor.ts
@@ -1,5 +1,5 @@
 import { Constants } from '../constants';
-import { Column, ColumnEditor, Editor, EditorArguments, EditorValidator, EditorValidatorOutput } from '../interfaces/index';
+import { Column, ColumnEditor, Editor, EditorArguments, EditorValidator, EditorValidatorOutput, SlickGrid } from '../interfaces/index';
 import { getDescendantProperty, setDeepValue } from '../services/utilities';
 import { sliderValidator } from '../editorValidators/sliderValidator';
 
@@ -15,8 +15,8 @@ const DEFAULT_STEP = 1;
  * KeyDown events are also handled to provide handling for Tab, Shift-Tab, Esc and Ctrl-Enter.
  */
 export class SliderEditor implements Editor {
-  private _elementRangeInputId: string = '';
-  private _elementRangeOutputId: string = '';
+  private _elementRangeInputId = '';
+  private _elementRangeOutputId = '';
   private _$editorElm: any;
   private _$input: any;
   $sliderNumber: any;
@@ -24,7 +24,7 @@ export class SliderEditor implements Editor {
   originalValue: any;
 
   /** SlickGrid Grid object */
-  grid: any;
+  grid: SlickGrid;
 
   constructor(private args: EditorArguments) {
     if (!args) {
diff --git a/packages/common/src/editors/textEditor.ts b/packages/common/src/editors/textEditor.ts
index 0fc247f16..0afadf0fe 100644
--- a/packages/common/src/editors/textEditor.ts
+++ b/packages/common/src/editors/textEditor.ts
@@ -1,6 +1,5 @@
-import { Constants } from '../constants';
 import { KeyCode } from '../enums/keyCode.enum';
-import { Column, ColumnEditor, Editor, EditorArguments, EditorValidator, EditorValidatorOutput } from '../interfaces/index';
+import { Column, ColumnEditor, Editor, EditorArguments, EditorValidator, EditorValidatorOutput, SlickGrid } from '../interfaces/index';
 import { getDescendantProperty, setDeepValue } from '../services/utilities';
 import { textValidator } from '../editorValidators/textValidator';
 
@@ -14,7 +13,7 @@ export class TextEditor implements Editor {
   originalValue: string;
 
   /** SlickGrid Grid object */
-  grid: any;
+  grid: SlickGrid;
 
   constructor(private args: EditorArguments) {
     if (!args) {
diff --git a/packages/common/src/extensions/__tests__/autoTooltipExtension.spec.ts b/packages/common/src/extensions/__tests__/autoTooltipExtension.spec.ts
index 16c16ac2c..478be3f3a 100644
--- a/packages/common/src/extensions/__tests__/autoTooltipExtension.spec.ts
+++ b/packages/common/src/extensions/__tests__/autoTooltipExtension.spec.ts
@@ -1,4 +1,4 @@
-import { GridOption } from '../../interfaces/gridOption.interface';
+import { GridOption, SlickGrid } from '../../interfaces/index';
 import { AutoTooltipExtension } from '../autoTooltipExtension';
 import { ExtensionUtility } from '../extensionUtility';
 import { SharedService } from '../../services/shared.service';
@@ -9,7 +9,7 @@ declare const Slick: any;
 const gridStub = {
   getOptions: jest.fn(),
   registerPlugin: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 const mockAddon = jest.fn().mockImplementation(() => ({
   init: jest.fn(),
diff --git a/packages/common/src/extensions/__tests__/cellExternalCopyManagerExtension.spec.ts b/packages/common/src/extensions/__tests__/cellExternalCopyManagerExtension.spec.ts
index 26e587f1f..51275e6a7 100644
--- a/packages/common/src/extensions/__tests__/cellExternalCopyManagerExtension.spec.ts
+++ b/packages/common/src/extensions/__tests__/cellExternalCopyManagerExtension.spec.ts
@@ -1,4 +1,4 @@
-import { GridOption, EditCommand, Formatter, SelectedRange } from '../../interfaces/index';
+import { GridOption, EditCommand, Formatter, SelectedRange, SlickGrid } from '../../interfaces/index';
 import { Formatters } from '../../formatters';
 import { CellExternalCopyManagerExtension } from '../cellExternalCopyManagerExtension';
 import { ExtensionUtility } from '../extensionUtility';
@@ -13,7 +13,7 @@ const gridStub = {
   getOptions: jest.fn(),
   registerPlugin: jest.fn(),
   setSelectionModel: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 const addonStub = {
   init: jest.fn(),
@@ -36,7 +36,7 @@ Slick.CellSelectionModel = mockSelectionModel;
 
 describe('cellExternalCopyManagerExtension', () => {
   let queueCallback: EditCommand;
-  const mockEventCallback = (e, args: { ranges: SelectedRange[] }) => { };
+  const mockEventCallback = () => { };
   const mockSelectRange = [{ fromCell: 1, fromRow: 1, toCell: 1, toRow: 1 }] as SelectedRange[];
   const mockSelectRangeEvent = { ranges: mockSelectRange };
 
diff --git a/packages/common/src/extensions/__tests__/cellMenuExtension.spec.ts b/packages/common/src/extensions/__tests__/cellMenuExtension.spec.ts
index 2da44f6d7..869633f15 100644
--- a/packages/common/src/extensions/__tests__/cellMenuExtension.spec.ts
+++ b/packages/common/src/extensions/__tests__/cellMenuExtension.spec.ts
@@ -1,14 +1,14 @@
 import { CellMenuExtension } from '../cellMenuExtension';
 import { ExtensionUtility } from '../extensionUtility';
 import { SharedService } from '../../services/shared.service';
-import { Column, GridOption } from '../../interfaces/index';
+import { Column, DataView, GridOption, SlickGrid } from '../../interfaces/index';
 import { TranslateServiceStub } from '../../../../../test/translateServiceStub';
 
 declare const Slick: any;
 
 const dataViewStub = {
   refresh: jest.fn(),
-};
+} as unknown as DataView;
 
 const gridStub = {
   autosizeColumns: jest.fn(),
@@ -22,7 +22,7 @@ const gridStub = {
   setPreHeaderPanelVisibility: jest.fn(),
   setSortColumns: jest.fn(),
   onSort: new Slick.Event(),
-};
+} as unknown as SlickGrid;
 
 const mockAddon = jest.fn().mockImplementation(() => ({
   init: jest.fn(),
diff --git a/packages/common/src/extensions/__tests__/checkboxSelectorExtension.spec.ts b/packages/common/src/extensions/__tests__/checkboxSelectorExtension.spec.ts
index 0a2d7d1f3..4abcac433 100644
--- a/packages/common/src/extensions/__tests__/checkboxSelectorExtension.spec.ts
+++ b/packages/common/src/extensions/__tests__/checkboxSelectorExtension.spec.ts
@@ -1,4 +1,4 @@
-import { Column, GridOption } from '../../interfaces/index';
+import { Column, GridOption, SlickGrid } from '../../interfaces/index';
 import { CheckboxSelectorExtension } from '../checkboxSelectorExtension';
 import { ExtensionUtility } from '../extensionUtility';
 import { SharedService } from '../../services/shared.service';
@@ -11,7 +11,7 @@ const gridStub = {
   getSelectionModel: jest.fn(),
   registerPlugin: jest.fn(),
   setSelectionModel: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 const mockAddon = jest.fn().mockImplementation(() => ({
   init: jest.fn(),
diff --git a/packages/common/src/extensions/__tests__/columnPickerExtension.spec.ts b/packages/common/src/extensions/__tests__/columnPickerExtension.spec.ts
index 7aa1a2a46..887412ac9 100644
--- a/packages/common/src/extensions/__tests__/columnPickerExtension.spec.ts
+++ b/packages/common/src/extensions/__tests__/columnPickerExtension.spec.ts
@@ -1,4 +1,4 @@
-import { Column, GridOption } from '../../interfaces/index';
+import { Column, GridOption, SlickGrid } from '../../interfaces/index';
 import { ColumnPickerExtension } from '../columnPickerExtension';
 import { ExtensionUtility } from '../extensionUtility';
 import { SharedService } from '../../services/shared.service';
@@ -9,7 +9,7 @@ declare const Slick: any;
 const gridStub = {
   getOptions: jest.fn(),
   registerPlugin: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 const mockAddon = jest.fn().mockImplementation(() => ({
   init: jest.fn(),
diff --git a/packages/common/src/extensions/__tests__/contextMenuExtension.spec.ts b/packages/common/src/extensions/__tests__/contextMenuExtension.spec.ts
index 8b7e10428..2561c83fc 100644
--- a/packages/common/src/extensions/__tests__/contextMenuExtension.spec.ts
+++ b/packages/common/src/extensions/__tests__/contextMenuExtension.spec.ts
@@ -5,19 +5,21 @@ import { ExtensionUtility } from '../extensionUtility';
 import { Formatters } from '../../formatters';
 import { SharedService } from '../../services/shared.service';
 import { DelimiterType, FileType } from '../../enums/index';
-import { Column, GridOption, MenuCommandItem } from '../../interfaces/index';
+import { Column, DataView, GridOption, MenuCommandItem, SlickGrid } from '../../interfaces/index';
 import { TranslateServiceStub } from '../../../../../test/translateServiceStub';
-import { ExcelExportService, ExportService, TreeDataService } from '../../services';
+import { ExcelExportService, FileExportService, TreeDataService } from '../../services';
 
 declare const Slick: any;
 
 const excelExportServiceStub = {
+  className: 'ExcelExportService',
   exportToExcel: jest.fn(),
 } as unknown as ExcelExportService;
 
 const exportServiceStub = {
+  className: 'FileExportService',
   exportToFile: jest.fn(),
-} as unknown as ExportService;
+} as unknown as FileExportService;
 
 const dataViewStub = {
   collapseAllGroups: jest.fn(),
@@ -27,7 +29,7 @@ const dataViewStub = {
   getGrouping: jest.fn(),
   setGrouping: jest.fn(),
   setItems: jest.fn(),
-};
+} as unknown as DataView;
 
 const gridStub = {
   autosizeColumns: jest.fn(),
@@ -42,7 +44,7 @@ const gridStub = {
   setHeaderRowVisibility: jest.fn(),
   setTopPanelVisibility: jest.fn(),
   setPreHeaderPanelVisibility: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 const treeDataServiceStub = {
   init: jest.fn(),
@@ -124,7 +126,7 @@ describe('contextMenuExtension', () => {
       sharedService = new SharedService();
       translateService = new TranslateServiceStub();
       extensionUtility = new ExtensionUtility(sharedService, translateService);
-      extension = new ContextMenuExtension(excelExportServiceStub, exportServiceStub, extensionUtility, sharedService, translateService, treeDataServiceStub);
+      extension = new ContextMenuExtension(extensionUtility, sharedService, translateService, treeDataServiceStub);
       translateService.setLocale('fr');
     });
 
@@ -688,10 +690,44 @@ describe('contextMenuExtension', () => {
         expect(isCommandUsable).toBe(false);
       });
 
+      it('should call "exportToExcel" and expect an error thrown when ExcelExportService is not registered prior to calling the method', () => {
+        const copyGridOptionsMock = { ...gridOptionsMock, enableExcelExport: true, enableExport: false, contextMenu: { hideCopyCellValueCommand: true, hideExportCsvCommand: true, hideExportExcelCommand: false } } as GridOption;
+        jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
+        jest.spyOn(SharedService.prototype, 'externalRegisteredServices', 'get').mockReturnValue([]);
+        extension.register();
+
+        const menuItemCommand = copyGridOptionsMock.contextMenu.commandItems.find((item: MenuCommandItem) => item.command === 'export-excel') as MenuCommandItem;
+        expect(() => menuItemCommand.action(new CustomEvent('change'), { command: 'export-excel', cell: 0, row: 0 } as any))
+          .toThrow('[Slickgrid-Universal] You must register the ExcelExportService to properly use Export to Excel in the Context Menu.');
+      });
+
+      it('should call "exportToFile" with CSV and expect an error thrown when FileExportService is not registered prior to calling the method', () => {
+        const copyGridOptionsMock = { ...gridOptionsMock, enableExcelExport: false, enableExport: true, contextMenu: { hideCopyCellValueCommand: true, hideExportCsvCommand: false, hideExportExcelCommand: true } } as GridOption;
+        jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
+        jest.spyOn(SharedService.prototype, 'externalRegisteredServices', 'get').mockReturnValue([]);
+        extension.register();
+
+        const menuItemCommand = copyGridOptionsMock.contextMenu.commandItems.find((item: MenuCommandItem) => item.command === 'export-csv') as MenuCommandItem;
+        expect(() => menuItemCommand.action(new CustomEvent('change'), { command: 'export-excel', cell: 0, row: 0 } as any))
+          .toThrow('[Slickgrid-Universal] You must register the FileExportService to properly use Export to File in the Context Menu.');
+      });
+
+      it('should call "exportToFile" with Text Delimited and expect an error thrown when FileExportService is not registered prior to calling the method', () => {
+        const copyGridOptionsMock = { ...gridOptionsMock, enableExcelExport: false, enableExport: true, contextMenu: { hideCopyCellValueCommand: true, hideExportCsvCommand: false, hideExportExcelCommand: true } } as GridOption;
+        jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
+        extension.register();
+
+        const menuItemCommand = copyGridOptionsMock.contextMenu.commandItems.find((item: MenuCommandItem) => item.command === 'export-text-delimited') as MenuCommandItem;
+        expect(() => menuItemCommand.action(new CustomEvent('change'), { command: 'export-excel', cell: 0, row: 0 } as any))
+          .toThrow('[Slickgrid-Universal] You must register the FileExportService to properly use Export to File in the Context Menu.');
+      });
+
+
       it('should call "exportToExcel" when the command triggered is "export-excel"', () => {
         const excelExportSpy = jest.spyOn(excelExportServiceStub, 'exportToExcel');
         const copyGridOptionsMock = { ...gridOptionsMock, enableExcelExport: true, enableExport: false, contextMenu: { hideCopyCellValueCommand: true, hideExportCsvCommand: true, hideExportExcelCommand: false } } as GridOption;
         jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
+        jest.spyOn(SharedService.prototype, 'externalRegisteredServices', 'get').mockReturnValue([excelExportServiceStub]);
         extension.register();
 
         const menuItemCommand = copyGridOptionsMock.contextMenu.commandItems.find((item: MenuCommandItem) => item.command === 'export-excel') as MenuCommandItem;
@@ -707,6 +743,7 @@ describe('contextMenuExtension', () => {
         const exportSpy = jest.spyOn(exportServiceStub, 'exportToFile');
         const copyGridOptionsMock = { ...gridOptionsMock, enableExcelExport: false, enableExport: true, contextMenu: { hideCopyCellValueCommand: true, hideExportCsvCommand: false, hideExportExcelCommand: true } } as GridOption;
         jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
+        jest.spyOn(SharedService.prototype, 'externalRegisteredServices', 'get').mockReturnValue([exportServiceStub]);
         extension.register();
 
         const menuItemCommand = copyGridOptionsMock.contextMenu.commandItems.find((item: MenuCommandItem) => item.command === 'export-csv') as MenuCommandItem;
@@ -720,10 +757,11 @@ describe('contextMenuExtension', () => {
         });
       });
 
-      it('should call "exportToFile" with CSV set when the command triggered is "export-text-delimited"', () => {
+      it('should call "exportToFile" with Text Delimited set when the command triggered is "export-text-delimited"', () => {
         const exportSpy = jest.spyOn(exportServiceStub, 'exportToFile');
         const copyGridOptionsMock = { ...gridOptionsMock, enableExcelExport: false, enableExport: true, contextMenu: { hideCopyCellValueCommand: true, hideExportCsvCommand: false, hideExportExcelCommand: true } } as GridOption;
         jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
+        jest.spyOn(SharedService.prototype, 'externalRegisteredServices', 'get').mockReturnValue([exportServiceStub]);
         extension.register();
 
         const menuItemCommand = copyGridOptionsMock.contextMenu.commandItems.find((item: MenuCommandItem) => item.command === 'export-text-delimited') as MenuCommandItem;
@@ -821,7 +859,7 @@ describe('contextMenuExtension', () => {
       it('should expect "itemUsabilityOverride" callback on all the Grouping command to return True when there are Groups defined in the grid', () => {
         const copyGridOptionsMock = { ...gridOptionsMock, enableGrouping: true, contextMenu: { hideClearAllGrouping: false } } as GridOption;
         jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
-        const dataviewSpy = jest.spyOn(SharedService.prototype.dataView, 'getGrouping').mockReturnValue([{ grouped: true }]);
+        const dataviewSpy = jest.spyOn(SharedService.prototype.dataView, 'getGrouping').mockReturnValue([{ collapsed: true }]);
         extension.register();
 
         const menuClearCommand = copyGridOptionsMock.contextMenu.commandItems.find((item: MenuCommandItem) => item.command === 'clear-grouping') as MenuCommandItem;
@@ -961,7 +999,7 @@ describe('contextMenuExtension', () => {
     describe('without Translate Service', () => {
       beforeEach(() => {
         translateService = null;
-        extension = new ContextMenuExtension(excelExportServiceStub, exportServiceStub, {} as ExtensionUtility, { gridOptions: { enableTranslate: true } } as SharedService, translateService, treeDataServiceStub);
+        extension = new ContextMenuExtension({} as ExtensionUtility, { gridOptions: { enableTranslate: true } } as SharedService, translateService, treeDataServiceStub);
       });
 
       it('should throw an error if "enableTranslate" is set but the I18N Service is null', () => {
diff --git a/packages/common/src/extensions/__tests__/draggableGroupingExtension.spec.ts b/packages/common/src/extensions/__tests__/draggableGroupingExtension.spec.ts
index 3a87b0c85..540b440a3 100644
--- a/packages/common/src/extensions/__tests__/draggableGroupingExtension.spec.ts
+++ b/packages/common/src/extensions/__tests__/draggableGroupingExtension.spec.ts
@@ -1,4 +1,4 @@
-import { Grouping, GridOption } from '../../interfaces/index';
+import { Grouping, GridOption, SlickGrid } from '../../interfaces/index';
 import { DraggableGroupingExtension } from '../draggableGroupingExtension';
 import { ExtensionUtility } from '../extensionUtility';
 import { SharedService } from '../../services/shared.service';
@@ -9,7 +9,7 @@ declare const Slick: any;
 const gridStub = {
   getOptions: jest.fn(),
   registerPlugin: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 const mockAddon = jest.fn().mockImplementation(() => ({
   init: jest.fn(),
diff --git a/packages/common/src/extensions/__tests__/gridMenuExtension.spec.ts b/packages/common/src/extensions/__tests__/gridMenuExtension.spec.ts
index 3106c35df..b81256d0d 100644
--- a/packages/common/src/extensions/__tests__/gridMenuExtension.spec.ts
+++ b/packages/common/src/extensions/__tests__/gridMenuExtension.spec.ts
@@ -1,9 +1,9 @@
 import { DelimiterType, FileType } from '../../enums/index';
-import { Column, GridOption } from '../../interfaces/index';
+import { Column, DataView, GridOption, SlickGrid } from '../../interfaces/index';
 import { GridMenuExtension } from '../gridMenuExtension';
 import { ExtensionUtility } from '../extensionUtility';
 import { SharedService } from '../../services/shared.service';
-import { ExcelExportService, ExportService, FilterService, SortService } from '../../services';
+import { ExcelExportService, FileExportService, FilterService, SortService } from '../../services';
 import { TranslateServiceStub } from '../../../../../test/translateServiceStub';
 
 declare const Slick: any;
@@ -14,12 +14,14 @@ const gridUid = 'slickgrid_124343';
 const containerId = 'demo-container';
 
 const excelExportServiceStub = {
+  className: 'ExcelExportService',
   exportToExcel: jest.fn(),
 } as unknown as ExcelExportService;
 
 const exportServiceStub = {
+  className: 'FileExportService',
   exportToFile: jest.fn(),
-} as unknown as ExportService;
+} as unknown as FileExportService;
 
 const filterServiceStub = {
   clearFilters: jest.fn(),
@@ -31,7 +33,7 @@ const sortServiceStub = {
 
 const dataViewStub = {
   refresh: jest.fn(),
-};
+} as unknown as DataView;
 
 const gridStub = {
   autosizeColumns: jest.fn(),
@@ -44,7 +46,7 @@ const gridStub = {
   setHeaderRowVisibility: jest.fn(),
   setTopPanelVisibility: jest.fn(),
   setPreHeaderPanelVisibility: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 const mockAddon = jest.fn().mockImplementation(() => ({
   init: jest.fn(),
@@ -120,7 +122,7 @@ describe('gridMenuExtension', () => {
       sharedService = new SharedService();
       translateService = new TranslateServiceStub();
       extensionUtility = new ExtensionUtility(sharedService, translateService);
-      extension = new GridMenuExtension(excelExportServiceStub, exportServiceStub, extensionUtility, filterServiceStub, sharedService, sortServiceStub, translateService);
+      extension = new GridMenuExtension(extensionUtility, filterServiceStub, sharedService, sortServiceStub, translateService);
       translateService.setLocale('fr');
     });
 
@@ -574,9 +576,43 @@ describe('gridMenuExtension', () => {
         expect(refreshSpy).toHaveBeenCalled();
       });
 
+      it('should call "exportToExcel" and expect an error thrown when ExcelExportService is not registered prior to calling the method', (done) => {
+        try {
+          jest.spyOn(SharedService.prototype, 'externalRegisteredServices', 'get').mockReturnValue([]);
+          const instance = extension.register();
+          instance.onCommand.notify({ grid: gridStub, command: 'export-excel' }, new Slick.EventData(), gridStub);
+        } catch (e) {
+          expect(e.message).toContain('[Slickgrid-Universal] You must register the ExcelExportService to properly use Export to Excel in the Grid Menu.');
+          done();
+        }
+      });
+
+      it('should call "exportToFile" with CSV and expect an error thrown when FileExportService is not registered prior to calling the method', (done) => {
+        try {
+          jest.spyOn(SharedService.prototype, 'externalRegisteredServices', 'get').mockReturnValue([]);
+          const instance = extension.register();
+          instance.onCommand.notify({ grid: gridStub, command: 'export-csv' }, new Slick.EventData(), gridStub);
+        } catch (e) {
+          expect(e.message).toContain('[Slickgrid-Universal] You must register the FileExportService to properly use Export to File in the Grid Menu.');
+          done();
+        }
+      });
+
+      it('should call "exportToFile" with Text Delimited and expect an error thrown when FileExportService is not registered prior to calling the method', (done) => {
+        try {
+          const instance = extension.register();
+          instance.onCommand.notify({ grid: gridStub, command: 'export-text-delimited' }, new Slick.EventData(), gridStub);
+        } catch (e) {
+          expect(e.message).toContain('[Slickgrid-Universal] You must register the FileExportService to properly use Export to File in the Grid Menu.');
+          done();
+        }
+      });
+
+
       it('should call "exportToExcel" set when the command triggered is "export-excel"', () => {
         const excelExportSpy = jest.spyOn(excelExportServiceStub, 'exportToExcel');
         const onCommandSpy = jest.spyOn(SharedService.prototype.gridOptions.gridMenu, 'onCommand');
+        jest.spyOn(SharedService.prototype, 'externalRegisteredServices', 'get').mockReturnValue([excelExportServiceStub]);
 
         const instance = extension.register();
         instance.onCommand.notify({ grid: gridStub, command: 'export-excel' }, new Slick.EventData(), gridStub);
@@ -591,6 +627,7 @@ describe('gridMenuExtension', () => {
       it('should call "exportToFile" with CSV set when the command triggered is "export-csv"', () => {
         const exportSpy = jest.spyOn(exportServiceStub, 'exportToFile');
         const onCommandSpy = jest.spyOn(SharedService.prototype.gridOptions.gridMenu, 'onCommand');
+        jest.spyOn(SharedService.prototype, 'externalRegisteredServices', 'get').mockReturnValue([exportServiceStub]);
 
         const instance = extension.register();
         instance.onCommand.notify({ grid: gridStub, command: 'export-csv' }, new Slick.EventData(), gridStub);
@@ -604,9 +641,10 @@ describe('gridMenuExtension', () => {
         });
       });
 
-      it('should call "exportToFile" with CSV set when the command triggered is "export-text-delimited"', () => {
+      it('should call "exportToFile" with Text Delimited set when the command triggered is "export-text-delimited"', () => {
         const exportSpy = jest.spyOn(exportServiceStub, 'exportToFile');
         const onCommandSpy = jest.spyOn(SharedService.prototype.gridOptions.gridMenu, 'onCommand');
+        jest.spyOn(SharedService.prototype, 'externalRegisteredServices', 'get').mockReturnValue([exportServiceStub]);
 
         const instance = extension.register();
         instance.onCommand.notify({ grid: gridStub, command: 'export-text-delimited' }, new Slick.EventData(), gridStub);
@@ -723,7 +761,7 @@ describe('gridMenuExtension', () => {
   describe('without Translate Service', () => {
     beforeEach(() => {
       translateService = null;
-      extension = new GridMenuExtension(excelExportServiceStub, exportServiceStub, {} as ExtensionUtility, filterServiceStub, { gridOptions: { enableTranslate: true } } as SharedService, {} as SortService, translateService);
+      extension = new GridMenuExtension({} as ExtensionUtility, filterServiceStub, { gridOptions: { enableTranslate: true } } as SharedService, {} as SortService, translateService);
     });
 
     it('should throw an error if "enableTranslate" is set but the I18N Service is null', () => {
diff --git a/packages/common/src/extensions/__tests__/groupItemMetaProviderExtension.spec.ts b/packages/common/src/extensions/__tests__/groupItemMetaProviderExtension.spec.ts
index 8d3f23fc4..7c067f235 100644
--- a/packages/common/src/extensions/__tests__/groupItemMetaProviderExtension.spec.ts
+++ b/packages/common/src/extensions/__tests__/groupItemMetaProviderExtension.spec.ts
@@ -1,12 +1,13 @@
 import { GroupItemMetaProviderExtension } from '../groupItemMetaProviderExtension';
 import { SharedService } from '../../services/shared.service';
+import { SlickGrid } from '../../interfaces/slickGrid.interface';
 
 declare const Slick: any;
 
 const gridStub = {
   getOptions: jest.fn(),
   registerPlugin: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 const mockAddon = jest.fn().mockImplementation(() => ({
   init: jest.fn(),
diff --git a/packages/common/src/extensions/__tests__/headerButtonExtension.spec.ts b/packages/common/src/extensions/__tests__/headerButtonExtension.spec.ts
index 16827a2e2..df23d042f 100644
--- a/packages/common/src/extensions/__tests__/headerButtonExtension.spec.ts
+++ b/packages/common/src/extensions/__tests__/headerButtonExtension.spec.ts
@@ -1,7 +1,7 @@
 import { HeaderButtonExtension } from '../headerButtonExtension';
 import { ExtensionUtility } from '../extensionUtility';
 import { SharedService } from '../../services/shared.service';
-import { GridOption, HeaderButtonOnCommandArgs } from '../../interfaces/index';
+import { GridOption, HeaderButtonOnCommandArgs, SlickGrid } from '../../interfaces/index';
 import { TranslateServiceStub } from '../../../../../test/translateServiceStub';
 
 declare const Slick: any;
@@ -9,7 +9,7 @@ declare const Slick: any;
 const gridStub = {
   getOptions: jest.fn(),
   registerPlugin: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 const mockAddon = jest.fn().mockImplementation(() => ({
   onCommand: new Slick.Event(),
diff --git a/packages/common/src/extensions/__tests__/headerMenuExtension.spec.ts b/packages/common/src/extensions/__tests__/headerMenuExtension.spec.ts
index 1da29e999..1d28f0e6b 100644
--- a/packages/common/src/extensions/__tests__/headerMenuExtension.spec.ts
+++ b/packages/common/src/extensions/__tests__/headerMenuExtension.spec.ts
@@ -1,7 +1,7 @@
 import { HeaderMenuExtension } from '../headerMenuExtension';
 import { ExtensionUtility } from '../extensionUtility';
 import { SharedService } from '../../services/shared.service';
-import { Column, ColumnSort, GridOption } from '../../interfaces/index';
+import { Column, ColumnSort, DataView, GridOption, SlickGrid } from '../../interfaces/index';
 import { FilterService, SortService, PubSubService } from '../../services';
 import { TranslateServiceStub } from '../../../../../test/translateServiceStub';
 
@@ -16,6 +16,7 @@ const pubSubServiceStub = {
   publish: jest.fn(),
   subscribe: jest.fn(),
   unsubscribe: jest.fn(),
+  unsubscribeAll: jest.fn(),
 } as PubSubService;
 
 const sortServiceStub = {
@@ -28,7 +29,7 @@ const sortServiceStub = {
 
 const dataViewStub = {
   refresh: jest.fn(),
-};
+} as unknown as DataView;
 
 const gridStub = {
   autosizeColumns: jest.fn(),
@@ -42,7 +43,7 @@ const gridStub = {
   setPreHeaderPanelVisibility: jest.fn(),
   setSortColumns: jest.fn(),
   onSort: new Slick.Event(),
-};
+} as unknown as SlickGrid;
 
 const mockAddon = jest.fn().mockImplementation(() => ({
   init: jest.fn(),
diff --git a/packages/common/src/extensions/__tests__/rowMoveManagerExtension.spec.ts b/packages/common/src/extensions/__tests__/rowMoveManagerExtension.spec.ts
index 2b508439d..2d8d757a6 100644
--- a/packages/common/src/extensions/__tests__/rowMoveManagerExtension.spec.ts
+++ b/packages/common/src/extensions/__tests__/rowMoveManagerExtension.spec.ts
@@ -2,7 +2,7 @@ import { RowMoveManagerExtension } from '../rowMoveManagerExtension';
 import { ExtensionUtility } from '../extensionUtility';
 import { SharedService } from '../../services/shared.service';
 import { TranslateServiceStub } from '../../../../../test/translateServiceStub';
-import { Column, GridOption } from '../../interfaces/index';
+import { Column, GridOption, SlickGrid } from '../../interfaces/index';
 
 declare const Slick: any;
 
@@ -11,7 +11,7 @@ const gridStub = {
   getSelectionModel: jest.fn(),
   registerPlugin: jest.fn(),
   setSelectionModel: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 const mockAddon = jest.fn().mockImplementation(() => ({
   init: jest.fn(),
diff --git a/packages/common/src/extensions/__tests__/rowSelectionExtension.spec.ts b/packages/common/src/extensions/__tests__/rowSelectionExtension.spec.ts
index 743395556..ba3ce1ea0 100644
--- a/packages/common/src/extensions/__tests__/rowSelectionExtension.spec.ts
+++ b/packages/common/src/extensions/__tests__/rowSelectionExtension.spec.ts
@@ -1,4 +1,4 @@
-import { GridOption } from '../../interfaces/gridOption.interface';
+import { GridOption, SlickGrid } from '../../interfaces/index';
 import { RowSelectionExtension } from '../rowSelectionExtension';
 import { ExtensionUtility } from '../extensionUtility';
 import { SharedService } from '../../services/shared.service';
@@ -10,7 +10,7 @@ const gridStub = {
   getOptions: jest.fn(),
   registerPlugin: jest.fn(),
   setSelectionModel: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 const mockAddon = jest.fn().mockImplementation(() => ({
   constructor: jest.fn(),
diff --git a/packages/common/src/extensions/autoTooltipExtension.ts b/packages/common/src/extensions/autoTooltipExtension.ts
index 070d9bfad..55cb9aece 100644
--- a/packages/common/src/extensions/autoTooltipExtension.ts
+++ b/packages/common/src/extensions/autoTooltipExtension.ts
@@ -22,6 +22,7 @@ export class AutoTooltipExtension implements Extension {
     return this._addon;
   }
 
+  /** Register the 3rd party addon (plugin) */
   register(): any {
     if (this.sharedService && this.sharedService.grid && this.sharedService.gridOptions) {
       // dynamically import the SlickGrid plugin (addon) with RequireJS
diff --git a/packages/common/src/extensions/cellMenuExtension.ts b/packages/common/src/extensions/cellMenuExtension.ts
index a0aae9757..006916b64 100644
--- a/packages/common/src/extensions/cellMenuExtension.ts
+++ b/packages/common/src/extensions/cellMenuExtension.ts
@@ -10,6 +10,7 @@ import {
   MenuOptionItem,
   Locale,
   SlickEventHandler,
+  SlickGrid,
 } from '../interfaces/index';
 import { SharedService } from '../services/shared.service';
 import { ExtensionUtility } from './extensionUtility';
@@ -49,12 +50,7 @@ export class CellMenuExtension implements Extension {
     return this._addon;
   }
 
-  /**
-   * Create the Action Cell Menu and expose all the available hooks that user can subscribe (onCommand, onBeforeMenuShow, ...)
-   * @param grid
-   * @param dataView
-   * @param columnDefinitions
-   */
+  /** Register the 3rd party addon (plugin) */
   register(): any {
     if (this.sharedService.gridOptions && this.sharedService.gridOptions.enableTranslate && (!this.translaterService || !this.translaterService.translate)) {
       throw new Error('[Slickgrid-Universal] requires a Translate Service to be installed and configured when the grid option "enableTranslate" is enabled.');
@@ -100,21 +96,21 @@ export class CellMenuExtension implements Extension {
           });
         }
         if (cellMenu && typeof cellMenu.onBeforeMenuShow === 'function') {
-          this._eventHandler.subscribe(this._addon.onBeforeMenuShow, (event: Event, args: { cell: number; row: number; grid: any; }) => {
+          this._eventHandler.subscribe(this._addon.onBeforeMenuShow, (event: Event, args: { cell: number; row: number; grid: SlickGrid; }) => {
             if (cellMenu.onBeforeMenuShow) {
               cellMenu.onBeforeMenuShow(event, args);
             }
           });
         }
         if (cellMenu && typeof cellMenu.onBeforeMenuClose === 'function') {
-          this._eventHandler.subscribe(this._addon.onBeforeMenuClose, (event: Event, args: { cell: number; row: number; grid: any; menu: any; }) => {
+          this._eventHandler.subscribe(this._addon.onBeforeMenuClose, (event: Event, args: { cell: number; row: number; grid: SlickGrid; menu: any; }) => {
             if (cellMenu.onBeforeMenuClose) {
               cellMenu.onBeforeMenuClose(event, args);
             }
           });
         }
         if (cellMenu && typeof cellMenu.onAfterMenuShow === 'function') {
-          this._eventHandler.subscribe(this._addon.onAfterMenuShow, (event: Event, args: { cell: number; row: number; grid: any; }) => {
+          this._eventHandler.subscribe(this._addon.onAfterMenuShow, (event: Event, args: { cell: number; row: number; grid: SlickGrid; }) => {
             if (cellMenu.onAfterMenuShow) {
               cellMenu.onAfterMenuShow(event, args);
             }
diff --git a/packages/common/src/extensions/checkboxSelectorExtension.ts b/packages/common/src/extensions/checkboxSelectorExtension.ts
index 94055e7d3..5bef3f7f8 100644
--- a/packages/common/src/extensions/checkboxSelectorExtension.ts
+++ b/packages/common/src/extensions/checkboxSelectorExtension.ts
@@ -54,6 +54,7 @@ export class CheckboxSelectorExtension implements Extension {
     return this._addon;
   }
 
+  /** Register the 3rd party addon (plugin) */
   register(rowSelectionPlugin?: any) {
     if (this.sharedService && this.sharedService.grid && this.sharedService.gridOptions) {
       // the plugin has to be created BEFORE the grid (else it behaves oddly), but we can only watch grid events AFTER the grid is created
diff --git a/packages/common/src/extensions/columnPickerExtension.ts b/packages/common/src/extensions/columnPickerExtension.ts
index 0f9f2fffe..3e04080b5 100644
--- a/packages/common/src/extensions/columnPickerExtension.ts
+++ b/packages/common/src/extensions/columnPickerExtension.ts
@@ -1,5 +1,5 @@
 import { ExtensionName } from '../enums/extensionName.enum';
-import { Extension, SlickEventHandler } from '../interfaces/index';
+import { Extension, SlickEventHandler, SlickGrid, Column } from '../interfaces/index';
 import { ExtensionUtility } from './extensionUtility';
 import { SharedService } from '../services/shared.service';
 
@@ -31,6 +31,7 @@ export class ColumnPickerExtension implements Extension {
     return this._addon;
   }
 
+  /** Register the 3rd party addon (plugin) */
   register(): any {
     if (this.sharedService && this.sharedService.grid && this.sharedService.gridOptions) {
       // dynamically import the SlickGrid plugin (addon) with RequireJS
@@ -51,7 +52,7 @@ export class ColumnPickerExtension implements Extension {
         if (this.sharedService.gridOptions.columnPicker.onExtensionRegistered) {
           this.sharedService.gridOptions.columnPicker.onExtensionRegistered(this._addon);
         }
-        this._eventHandler.subscribe(this._addon.onColumnsChanged, (e: any, args: { columns: any, grid: any }) => {
+        this._eventHandler.subscribe(this._addon.onColumnsChanged, (e: any, args: { columns: Column[], grid: SlickGrid }) => {
           if (this.sharedService.gridOptions.columnPicker && typeof this.sharedService.gridOptions.columnPicker.onColumnsChanged === 'function') {
             this.sharedService.gridOptions.columnPicker.onColumnsChanged(e, args);
           }
diff --git a/packages/common/src/extensions/contextMenuExtension.ts b/packages/common/src/extensions/contextMenuExtension.ts
index aa31dccf2..7d38b8af3 100644
--- a/packages/common/src/extensions/contextMenuExtension.ts
+++ b/packages/common/src/extensions/contextMenuExtension.ts
@@ -7,20 +7,14 @@ import {
   MenuCommandItemCallbackArgs,
   MenuOptionItemCallbackArgs,
   SlickEventHandler,
+  SlickGrid,
 } from '../interfaces/index';
-import {
-  DelimiterType,
-  ExtensionName,
-  FileType,
-} from '../enums/index';
+import { DelimiterType, ExtensionName, FileType, } from '../enums/index';
 import { ExtensionUtility } from './extensionUtility';
 import { exportWithFormatterWhenDefined } from '../services/export-utilities';
-import { ExportService } from '../services/export.service';
-import { ExcelExportService } from '../services/excelExport.service';
 import { SharedService } from '../services/shared.service';
 import { getTranslationPrefix } from '../services/utilities';
-import { TreeDataService } from '../services/treeData.service';
-import { TranslaterService } from '..';
+import { ExcelExportService, FileExportService, TranslaterService, TreeDataService } from '../services/index';
 
 // using external non-typed js libraries
 declare const Slick: any;
@@ -31,8 +25,6 @@ export class ContextMenuExtension implements Extension {
   private _userOriginalContextMenu: ContextMenu;
 
   constructor(
-    private excelExportService: ExcelExportService,
-    private exportService: ExportService,
     private extensionUtility: ExtensionUtility,
     private sharedService: SharedService,
     private translaterService: TranslaterService,
@@ -62,9 +54,7 @@ export class ContextMenuExtension implements Extension {
     return this._addon;
   }
 
-  /**
-   * Create the Action Cell Menu and expose all the available hooks that user can subscribe (onCommand, onBeforeMenuShow, ...)
-   */
+  /** Register the 3rd party addon (plugin) */
   register(): any {
     if (this.sharedService.gridOptions && this.sharedService.gridOptions.enableTranslate && (!this.translaterService || !this.translaterService.translate)) {
       throw new Error('[Slickgrid-Universal] requires a Translate Service to be installed and configured when the grid option "enableTranslate" is enabled.');
@@ -112,21 +102,21 @@ export class ContextMenuExtension implements Extension {
           });
         }
         if (contextMenu && typeof contextMenu.onBeforeMenuShow === 'function') {
-          this._eventHandler.subscribe(this._addon.onBeforeMenuShow, (event: Event, args: { cell: number; row: number; grid: any; }) => {
+          this._eventHandler.subscribe(this._addon.onBeforeMenuShow, (event: Event, args: { cell: number; row: number; grid: SlickGrid; }) => {
             if (contextMenu.onBeforeMenuShow) {
               contextMenu.onBeforeMenuShow(event, args);
             }
           });
         }
         if (contextMenu && typeof contextMenu.onBeforeMenuClose === 'function') {
-          this._eventHandler.subscribe(this._addon.onBeforeMenuClose, (event: Event, args: { cell: number; row: number; grid: any; menu: any; }) => {
+          this._eventHandler.subscribe(this._addon.onBeforeMenuClose, (event: Event, args: { cell: number; row: number; grid: SlickGrid; menu: any; }) => {
             if (contextMenu.onBeforeMenuClose) {
               contextMenu.onBeforeMenuClose(event, args);
             }
           });
         }
         if (contextMenu && typeof contextMenu.onAfterMenuShow === 'function') {
-          this._eventHandler.subscribe(this._addon.onAfterMenuShow, (event: Event, args: { cell: number; row: number; grid: any; }) => {
+          this._eventHandler.subscribe(this._addon.onAfterMenuShow, (event: Event, args: { cell: number; row: number; grid: SlickGrid; }) => {
             if (contextMenu.onAfterMenuShow) {
               contextMenu.onAfterMenuShow(event, args);
             }
@@ -220,12 +210,20 @@ export class ContextMenuExtension implements Extension {
             disabled: false,
             command: commandName,
             positionOrder: 51,
-            action: () => this.exportService.exportToFile({
-              delimiter: DelimiterType.comma,
-              filename: 'export',
-              format: FileType.csv,
-              useUtf8WithBom: true,
-            }),
+            action: () => {
+              const registedServices = this.sharedService?.externalRegisteredServices || [];
+              const excelService: FileExportService = registedServices.find((service: any) => service.className === 'FileExportService');
+              if (excelService?.exportToFile) {
+                excelService.exportToFile({
+                  delimiter: DelimiterType.comma,
+                  filename: 'export',
+                  format: FileType.csv,
+                  useUtf8WithBom: true,
+                });
+              } else {
+                throw new Error(`[Slickgrid-Universal] You must register the FileExportService to properly use Export to File in the Context Menu. Example:: this.gridOptions = { enableExport: true, registerExternalServices: [new FileExportService()] };`);
+              }
+            },
           }
         );
       }
@@ -242,10 +240,18 @@ export class ContextMenuExtension implements Extension {
             disabled: false,
             command: commandName,
             positionOrder: 52,
-            action: () => this.excelExportService.exportToExcel({
-              filename: 'export',
-              format: FileType.xlsx,
-            }),
+            action: () => {
+              const registedServices = this.sharedService?.externalRegisteredServices || [];
+              const excelService: ExcelExportService = registedServices.find((service: any) => service.className === 'ExcelExportService');
+              if (excelService?.exportToExcel) {
+                excelService.exportToExcel({
+                  filename: 'export',
+                  format: FileType.xlsx,
+                });
+              } else {
+                throw new Error(`[Slickgrid-Universal] You must register the ExcelExportService to properly use Export to Excel in the Context Menu. Example:: this.gridOptions = { enableExcelExport: true, registerExternalServices: [new ExcelExportService()] };`);
+              }
+            },
           }
         );
       }
@@ -262,12 +268,20 @@ export class ContextMenuExtension implements Extension {
             disabled: false,
             command: commandName,
             positionOrder: 53,
-            action: () => this.exportService.exportToFile({
-              delimiter: DelimiterType.tab,
-              filename: 'export',
-              format: FileType.txt,
-              useUtf8WithBom: true,
-            }),
+            action: () => {
+              const registedServices = this.sharedService?.externalRegisteredServices || [];
+              const excelService: FileExportService = registedServices.find((service: any) => service.className === 'FileExportService');
+              if (excelService?.exportToFile) {
+                excelService.exportToFile({
+                  delimiter: DelimiterType.tab,
+                  filename: 'export',
+                  format: FileType.txt,
+                  useUtf8WithBom: true,
+                });
+              } else {
+                throw new Error(`[Slickgrid-Universal] You must register the FileExportService to properly use Export to File in the Context Menu. Example:: this.gridOptions = { enableExport: true, registerExternalServices: [new FileExportService()] };`);
+              }
+            },
           }
         );
       }
diff --git a/packages/common/src/extensions/draggableGroupingExtension.ts b/packages/common/src/extensions/draggableGroupingExtension.ts
index 8ebeccf99..7badd89bf 100644
--- a/packages/common/src/extensions/draggableGroupingExtension.ts
+++ b/packages/common/src/extensions/draggableGroupingExtension.ts
@@ -49,6 +49,7 @@ export class DraggableGroupingExtension implements Extension {
     return this._addon;
   }
 
+  /** Register the 3rd party addon (plugin) */
   register(): any {
     if (this.sharedService && this.sharedService.grid && this.sharedService.gridOptions) {
       this.sharedService.grid.registerPlugin(this._addon);
diff --git a/packages/common/src/extensions/gridMenuExtension.ts b/packages/common/src/extensions/gridMenuExtension.ts
index 29dc6ebfa..a466135eb 100644
--- a/packages/common/src/extensions/gridMenuExtension.ts
+++ b/packages/common/src/extensions/gridMenuExtension.ts
@@ -8,6 +8,7 @@ import {
   Locale,
   MenuCommandItemCallbackArgs,
   SlickEventHandler,
+  SlickGrid,
 } from '../interfaces/index';
 import {
   DelimiterType,
@@ -15,7 +16,7 @@ import {
   FileType,
 } from '../enums/index';
 import { ExcelExportService } from '../services/excelExport.service';
-import { ExportService } from '../services/export.service';
+import { FileExportService } from '../services/fileExport.service';
 import { ExtensionUtility } from './extensionUtility';
 import { FilterService } from '../services/filter.service';
 import { SortService } from '../services/sort.service';
@@ -36,8 +37,6 @@ export class GridMenuExtension implements Extension {
   private _userOriginalGridMenu: GridMenu;
 
   constructor(
-    private excelExportService: ExcelExportService,
-    private exportService: ExportService,
     private extensionUtility: ExtensionUtility,
     private filterService: FilterService,
     private sharedService: SharedService,
@@ -67,7 +66,7 @@ export class GridMenuExtension implements Extension {
     return this._addon;
   }
 
-  /** Create the Header Menu and expose all the available hooks that user can subscribe (onCommand, onBeforeMenuShow, ...) */
+  /** Register the 3rd party addon (plugin) */
   register(): any {
     if (this.sharedService.gridOptions && this.sharedService.gridOptions.enableTranslate && (!this.translaterService || !this.translaterService.translate)) {
       throw new Error('[Slickgrid-Universal] requires a Translate Service to be installed and configured when the grid option "enableTranslate" is enabled.');
@@ -99,20 +98,20 @@ export class GridMenuExtension implements Extension {
           this.sharedService.gridOptions.gridMenu.onExtensionRegistered(this._addon);
         }
         if (this.sharedService.gridOptions.gridMenu && typeof this.sharedService.gridOptions.gridMenu.onBeforeMenuShow === 'function') {
-          this._eventHandler.subscribe(this._addon.onBeforeMenuShow, (e: any, args: { grid: any; menu: any; columns: Column[] }) => {
+          this._eventHandler.subscribe(this._addon.onBeforeMenuShow, (e: any, args: { grid: SlickGrid; menu: any; columns: Column[] }) => {
             if (this.sharedService.gridOptions.gridMenu && this.sharedService.gridOptions.gridMenu.onBeforeMenuShow) {
               this.sharedService.gridOptions.gridMenu.onBeforeMenuShow(e, args);
             }
           });
         }
         if (this.sharedService.gridOptions.gridMenu && typeof this.sharedService.gridOptions.gridMenu.onAfterMenuShow === 'function') {
-          this._eventHandler.subscribe(this._addon.onAfterMenuShow, (e: any, args: { grid: any; menu: any; columns: Column[] }) => {
+          this._eventHandler.subscribe(this._addon.onAfterMenuShow, (e: any, args: { grid: SlickGrid; menu: any; columns: Column[] }) => {
             if (this.sharedService.gridOptions.gridMenu && this.sharedService.gridOptions.gridMenu.onAfterMenuShow) {
               this.sharedService.gridOptions.gridMenu.onAfterMenuShow(e, args);
             }
           });
         }
-        this._eventHandler.subscribe(this._addon.onColumnsChanged, (e: any, args: { grid: any; allColumns: Column[]; columns: Column[]; }) => {
+        this._eventHandler.subscribe(this._addon.onColumnsChanged, (e: any, args: { grid: SlickGrid; allColumns: Column[]; columns: Column[]; }) => {
           this._areVisibleColumnDifferent = true;
           if (this.sharedService.gridOptions.gridMenu && typeof this.sharedService.gridOptions.gridMenu.onColumnsChanged === 'function') {
             this.sharedService.gridOptions.gridMenu.onColumnsChanged(e, args);
@@ -127,7 +126,7 @@ export class GridMenuExtension implements Extension {
             this.sharedService.gridOptions.gridMenu.onCommand(e, args);
           }
         });
-        this._eventHandler.subscribe(this._addon.onMenuClose, (e: any, args: { grid: any; menu: any; allColumns: Column[], visibleColumns: Column[] }) => {
+        this._eventHandler.subscribe(this._addon.onMenuClose, (e: any, args: { grid: SlickGrid; menu: any; allColumns: Column[], visibleColumns: Column[] }) => {
           if (this.sharedService.gridOptions.gridMenu && typeof this.sharedService.gridOptions.gridMenu.onMenuClose === 'function') {
             this.sharedService.gridOptions.gridMenu.onMenuClose(e, args);
           }
@@ -352,6 +351,8 @@ export class GridMenuExtension implements Extension {
    * @param GridMenuItem args
    */
   private executeGridMenuInternalCustomCommands(e: Event, args: GridMenuItem) {
+    const registedServices = this.sharedService?.externalRegisteredServices || [];
+
     if (args && args.command) {
       switch (args.command) {
         case 'clear-filter':
@@ -363,26 +364,41 @@ export class GridMenuExtension implements Extension {
           this.sharedService.dataView.refresh();
           break;
         case 'export-csv':
-          this.exportService.exportToFile({
-            delimiter: DelimiterType.comma,
-            filename: 'export',
-            format: FileType.csv,
-            useUtf8WithBom: true,
-          });
+          const exportCsvService: FileExportService = registedServices.find((service: any) => service.className === 'FileExportService');
+          if (exportCsvService?.exportToFile) {
+            exportCsvService.exportToFile({
+              delimiter: DelimiterType.comma,
+              filename: 'export',
+              format: FileType.csv,
+              useUtf8WithBom: true,
+            });
+          } else {
+            throw new Error(`[Slickgrid-Universal] You must register the FileExportService to properly use Export to File in the Grid Menu. Example:: this.gridOptions = { enableExport: true, registerExternalServices: [new FileExportService()] };`);
+          }
           break;
         case 'export-excel':
-          this.excelExportService.exportToExcel({
-            filename: 'export',
-            format: FileType.xlsx,
-          });
+          const excelService: ExcelExportService = registedServices.find((service: any) => service.className === 'ExcelExportService');
+          if (excelService?.exportToExcel) {
+            excelService.exportToExcel({
+              filename: 'export',
+              format: FileType.xlsx,
+            });
+          } else {
+            throw new Error(`[Slickgrid-Universal] You must register the ExcelExportService to properly use Export to Excel in the Grid Menu. Example:: this.gridOptions = { enableExcelExport: true, registerExternalServices: [new ExcelExportService()] };`);
+          }
           break;
         case 'export-text-delimited':
-          this.exportService.exportToFile({
-            delimiter: DelimiterType.tab,
-            filename: 'export',
-            format: FileType.txt,
-            useUtf8WithBom: true,
-          });
+          const exportTxtService: FileExportService = registedServices.find((service: any) => service.className === 'FileExportService');
+          if (exportTxtService?.exportToFile) {
+            exportTxtService.exportToFile({
+              delimiter: DelimiterType.tab,
+              filename: 'export',
+              format: FileType.txt,
+              useUtf8WithBom: true,
+            });
+          } else {
+            throw new Error(`[Slickgrid-Universal] You must register the FileExportService to properly use Export to File in the Grid Menu. Example:: this.gridOptions = { enableExport: true, registerExternalServices: [new FileExportService()] };`);
+          }
           break;
         case 'toggle-filter':
           const showHeaderRow = this.sharedService && this.sharedService.gridOptions && this.sharedService.gridOptions.showHeaderRow || false;
diff --git a/packages/common/src/extensions/headerButtonExtension.ts b/packages/common/src/extensions/headerButtonExtension.ts
index fb19df298..21cf84e2b 100644
--- a/packages/common/src/extensions/headerButtonExtension.ts
+++ b/packages/common/src/extensions/headerButtonExtension.ts
@@ -32,7 +32,7 @@ export class HeaderButtonExtension implements Extension {
     return this._addon;
   }
 
-  // Header Button Plugin
+  /** Register the 3rd party addon (plugin) */
   register(): any {
     if (this.sharedService && this.sharedService.grid && this.sharedService.gridOptions) {
       // dynamically import the SlickGrid plugin (addon) with RequireJS
diff --git a/packages/common/src/extensions/headerMenuExtension.ts b/packages/common/src/extensions/headerMenuExtension.ts
index 290de6f5b..f4c7babe0 100644
--- a/packages/common/src/extensions/headerMenuExtension.ts
+++ b/packages/common/src/extensions/headerMenuExtension.ts
@@ -10,6 +10,7 @@ import {
   MenuCommandItemCallbackArgs,
   Locale,
   SlickEventHandler,
+  SlickGrid,
 } from '../interfaces/index';
 import {
   EmitterType,
@@ -60,12 +61,7 @@ export class HeaderMenuExtension implements Extension {
     return this._addon;
   }
 
-  /**
-   * Create the Header Menu and expose all the available hooks that user can subscribe (onCommand, onBeforeMenuShow, ...)
-   * @param grid
-   * @param dataView
-   * @param columnDefinitions
-   */
+  /** Register the 3rd party addon (plugin) */
   register(): any {
     if (this.sharedService.gridOptions && this.sharedService.gridOptions.enableTranslate && (!this.translaterService || !this.translaterService.translate)) {
       throw new Error('[Slickgrid-Universal] requires a Translate Service to be installed and configured when the grid option "enableTranslate" is enabled.');
@@ -97,14 +93,14 @@ export class HeaderMenuExtension implements Extension {
           }
         });
         if (this.sharedService.gridOptions.headerMenu && typeof this.sharedService.gridOptions.headerMenu.onBeforeMenuShow === 'function') {
-          this._eventHandler.subscribe(this._addon.onBeforeMenuShow, (event: Event, args: { grid: any; column: Column; menu: any; }) => {
+          this._eventHandler.subscribe(this._addon.onBeforeMenuShow, (event: Event, args: { grid: SlickGrid; column: Column; menu: any; }) => {
             if (this.sharedService.gridOptions.headerMenu && this.sharedService.gridOptions.headerMenu.onBeforeMenuShow) {
               this.sharedService.gridOptions.headerMenu.onBeforeMenuShow(event, args);
             }
           });
         }
         if (this.sharedService.gridOptions.headerMenu && typeof this.sharedService.gridOptions.headerMenu.onAfterMenuShow === 'function') {
-          this._eventHandler.subscribe(this._addon.onAfterMenuShow, (event: Event, args: { grid: any; column: Column; menu: any; }) => {
+          this._eventHandler.subscribe(this._addon.onAfterMenuShow, (event: Event, args: { grid: SlickGrid; column: Column; menu: any; }) => {
             if (this.sharedService.gridOptions.headerMenu && this.sharedService.gridOptions.headerMenu.onAfterMenuShow) {
               this.sharedService.gridOptions.headerMenu.onAfterMenuShow(event, args);
             }
diff --git a/packages/common/src/extensions/rowMoveManagerExtension.ts b/packages/common/src/extensions/rowMoveManagerExtension.ts
index 4b75750d1..ddfed3282 100644
--- a/packages/common/src/extensions/rowMoveManagerExtension.ts
+++ b/packages/common/src/extensions/rowMoveManagerExtension.ts
@@ -79,6 +79,7 @@ export class RowMoveManagerExtension implements Extension {
     return this._addon;
   }
 
+  /** Register the 3rd party addon (plugin) */
   register(rowSelectionPlugin?: any): any {
     if (this.sharedService && this.sharedService.grid && this.sharedService.gridOptions) {
       // dynamically import the SlickGrid plugin (addon) with RequireJS
diff --git a/packages/common/src/extensions/rowSelectionExtension.ts b/packages/common/src/extensions/rowSelectionExtension.ts
index d664dd006..f36e2948a 100644
--- a/packages/common/src/extensions/rowSelectionExtension.ts
+++ b/packages/common/src/extensions/rowSelectionExtension.ts
@@ -23,6 +23,7 @@ export class RowSelectionExtension implements Extension {
     return this._addon;
   }
 
+  /** Register the 3rd party addon (plugin) */
   register(): any {
     if (this.sharedService && this.sharedService.grid && this.sharedService.gridOptions) {
       // dynamically import the SlickGrid plugin (addon) with RequireJS
diff --git a/packages/common/src/filters/__tests__/autoCompleteFilter.spec.ts b/packages/common/src/filters/__tests__/autoCompleteFilter.spec.ts
index 4c403c190..0f236b070 100644
--- a/packages/common/src/filters/__tests__/autoCompleteFilter.spec.ts
+++ b/packages/common/src/filters/__tests__/autoCompleteFilter.spec.ts
@@ -1,7 +1,7 @@
 import { Filters } from '../index';
 import { AutoCompleteFilter } from '../autoCompleteFilter';
 import { FieldType, OperatorType } from '../../enums/index';
-import { AutocompleteOption, Column, FilterArguments, GridOption, } from '../../interfaces/index';
+import { AutocompleteOption, Column, FilterArguments, GridOption, SlickGrid } from '../../interfaces/index';
 import { CollectionService } from '../../services/collection.service';
 import { TranslateServiceStub } from '../../../../../test/translateServiceStub';
 
@@ -20,7 +20,7 @@ const gridStub = {
   getColumns: jest.fn(),
   getHeaderRowColumn: jest.fn(),
   render: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('AutoCompleteFilter', () => {
   let translaterService: TranslateServiceStub;
diff --git a/packages/common/src/filters/__tests__/compoundDateFilter.spec.ts b/packages/common/src/filters/__tests__/compoundDateFilter.spec.ts
index 5d4f40a61..76761095a 100644
--- a/packages/common/src/filters/__tests__/compoundDateFilter.spec.ts
+++ b/packages/common/src/filters/__tests__/compoundDateFilter.spec.ts
@@ -2,7 +2,7 @@ import 'jest-extended';
 
 import { Filters } from '..';
 import { FieldType, OperatorType } from '../../enums/index';
-import { Column, FilterArguments, GridOption } from '../../interfaces/index';
+import { Column, FilterArguments, GridOption, SlickGrid } from '../../interfaces/index';
 import { CompoundDateFilter } from '../compoundDateFilter';
 import { TranslateServiceStub } from '../../../../../test/translateServiceStub';
 
@@ -21,7 +21,7 @@ const gridStub = {
   getColumns: jest.fn(),
   getHeaderRowColumn: jest.fn(),
   render: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('CompoundDateFilter', () => {
   let divContainer: HTMLDivElement;
diff --git a/packages/common/src/filters/__tests__/compoundInputFilter.spec.ts b/packages/common/src/filters/__tests__/compoundInputFilter.spec.ts
index 6fdefe838..fa5a6a156 100644
--- a/packages/common/src/filters/__tests__/compoundInputFilter.spec.ts
+++ b/packages/common/src/filters/__tests__/compoundInputFilter.spec.ts
@@ -1,5 +1,5 @@
 import { FieldType, OperatorType } from '../../enums/index';
-import { Column, FilterArguments, GridOption } from '../../interfaces/index';
+import { Column, FilterArguments, GridOption, SlickGrid } from '../../interfaces/index';
 import { Filters } from '../index';
 import { CompoundInputFilter } from '../compoundInputFilter';
 import { TranslateServiceStub } from '../../../../../test/translateServiceStub';
@@ -18,7 +18,7 @@ const gridStub = {
   getColumns: jest.fn(),
   getHeaderRowColumn: jest.fn(),
   render: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('CompoundInputFilter', () => {
   let translateService: TranslateServiceStub;
diff --git a/packages/common/src/filters/__tests__/compoundInputNumberFilter.spec.ts b/packages/common/src/filters/__tests__/compoundInputNumberFilter.spec.ts
index 8423568a6..ac8d4953e 100644
--- a/packages/common/src/filters/__tests__/compoundInputNumberFilter.spec.ts
+++ b/packages/common/src/filters/__tests__/compoundInputNumberFilter.spec.ts
@@ -1,4 +1,4 @@
-import { Column, FilterArguments, GridOption } from '../../interfaces/index';
+import { Column, FilterArguments, GridOption, SlickGrid } from '../../interfaces/index';
 import { Filters } from '../index';
 import { CompoundInputNumberFilter } from '../compoundInputNumberFilter';
 import { TranslateServiceStub } from '../../../../../test/translateServiceStub';
@@ -18,7 +18,7 @@ const gridStub = {
   getColumns: jest.fn(),
   getHeaderRowColumn: jest.fn(),
   render: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('CompoundInputNumberFilter', () => {
   let translateService: TranslateServiceStub;
diff --git a/packages/common/src/filters/__tests__/compoundInputPasswordFilter.spec.ts b/packages/common/src/filters/__tests__/compoundInputPasswordFilter.spec.ts
index 35e566d86..1c653dfeb 100644
--- a/packages/common/src/filters/__tests__/compoundInputPasswordFilter.spec.ts
+++ b/packages/common/src/filters/__tests__/compoundInputPasswordFilter.spec.ts
@@ -1,4 +1,4 @@
-import { Column, FilterArguments, GridOption } from '../../interfaces/index';
+import { Column, FilterArguments, GridOption, SlickGrid } from '../../interfaces/index';
 import { Filters } from '../index';
 import { CompoundInputPasswordFilter } from '../compoundInputPasswordFilter';
 import { TranslateServiceStub } from '../../../../../test/translateServiceStub';
@@ -18,7 +18,7 @@ const gridStub = {
   getColumns: jest.fn(),
   getHeaderRowColumn: jest.fn(),
   render: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('CompoundInputPasswordFilter', () => {
   let translateService: TranslateServiceStub;
diff --git a/packages/common/src/filters/__tests__/compoundSliderFilter.spec.ts b/packages/common/src/filters/__tests__/compoundSliderFilter.spec.ts
index 6bad110e5..a1c064cba 100644
--- a/packages/common/src/filters/__tests__/compoundSliderFilter.spec.ts
+++ b/packages/common/src/filters/__tests__/compoundSliderFilter.spec.ts
@@ -1,5 +1,5 @@
 import { OperatorType } from '../../enums/index';
-import { Column, FilterArguments, GridOption } from '../../interfaces/index';
+import { Column, FilterArguments, GridOption, SlickGrid } from '../../interfaces/index';
 import { Filters } from '../index';
 import { CompoundSliderFilter } from '../compoundSliderFilter';
 
@@ -18,7 +18,7 @@ const gridStub = {
   getColumns: jest.fn(),
   getHeaderRowColumn: jest.fn(),
   render: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('CompoundSliderFilter', () => {
   let divContainer: HTMLDivElement;
diff --git a/packages/common/src/filters/__tests__/dateRangeFilter.spec.ts b/packages/common/src/filters/__tests__/dateRangeFilter.spec.ts
index f5c7a303f..09e20b6f6 100644
--- a/packages/common/src/filters/__tests__/dateRangeFilter.spec.ts
+++ b/packages/common/src/filters/__tests__/dateRangeFilter.spec.ts
@@ -1,7 +1,7 @@
 import 'jest-extended';
 
 import { FieldType } from '../../enums/index';
-import { Column, FilterArguments, GridOption } from '../../interfaces/index';
+import { Column, FilterArguments, GridOption, SlickGrid } from '../../interfaces/index';
 import { Filters } from '..';
 import { DateRangeFilter } from '../dateRangeFilter';
 import { TranslateServiceStub } from '../../../../../test/translateServiceStub';
@@ -21,7 +21,7 @@ const gridStub = {
   getColumns: jest.fn(),
   getHeaderRowColumn: jest.fn(),
   render: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('DateRangeFilter', () => {
   let divContainer: HTMLDivElement;
diff --git a/packages/common/src/filters/__tests__/inputFilter.spec.ts b/packages/common/src/filters/__tests__/inputFilter.spec.ts
index 474049f7e..b14d664ea 100644
--- a/packages/common/src/filters/__tests__/inputFilter.spec.ts
+++ b/packages/common/src/filters/__tests__/inputFilter.spec.ts
@@ -1,5 +1,5 @@
 import { InputFilter } from '../inputFilter';
-import { GridOption, FilterArguments, Column } from '../../interfaces/index';
+import { GridOption, FilterArguments, Column, SlickGrid } from '../../interfaces/index';
 import { Filters } from '..';
 
 const containerId = 'demo-container';
@@ -17,7 +17,7 @@ const gridStub = {
   getColumns: jest.fn(),
   getHeaderRowColumn: jest.fn(),
   render: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('InputFilter', () => {
   let divContainer: HTMLDivElement;
diff --git a/packages/common/src/filters/__tests__/inputMaskFilter.spec.ts b/packages/common/src/filters/__tests__/inputMaskFilter.spec.ts
index b2b858aec..6658a27af 100644
--- a/packages/common/src/filters/__tests__/inputMaskFilter.spec.ts
+++ b/packages/common/src/filters/__tests__/inputMaskFilter.spec.ts
@@ -1,5 +1,5 @@
 import { InputMaskFilter } from '../inputMaskFilter';
-import { GridOption, FilterArguments, Column } from '../../interfaces/index';
+import { Column, FilterArguments, GridOption, SlickGrid } from '../../interfaces/index';
 import { Filters } from '..';
 
 const containerId = 'demo-container';
@@ -16,7 +16,7 @@ const gridStub = {
   getColumns: jest.fn(),
   getHeaderRowColumn: jest.fn(),
   render: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('InputMaskFilter', () => {
   let divContainer: HTMLDivElement;
diff --git a/packages/common/src/filters/__tests__/inputNumberFilter.spec.ts b/packages/common/src/filters/__tests__/inputNumberFilter.spec.ts
index 9946c97d1..041227a14 100644
--- a/packages/common/src/filters/__tests__/inputNumberFilter.spec.ts
+++ b/packages/common/src/filters/__tests__/inputNumberFilter.spec.ts
@@ -1,5 +1,5 @@
 import { InputNumberFilter } from '../inputNumberFilter';
-import { GridOption, FilterArguments, Column } from '../../interfaces/index';
+import { Column, FilterArguments, GridOption, SlickGrid } from '../../interfaces/index';
 import { Filters } from '..';
 
 const containerId = 'demo-container';
@@ -17,7 +17,7 @@ const gridStub = {
   getColumns: jest.fn(),
   getHeaderRowColumn: jest.fn(),
   render: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('InputNumberFilter', () => {
   let divContainer: HTMLDivElement;
diff --git a/packages/common/src/filters/__tests__/inputPasswordFilter.spec.ts b/packages/common/src/filters/__tests__/inputPasswordFilter.spec.ts
index a2ffa7fc3..8405218bf 100644
--- a/packages/common/src/filters/__tests__/inputPasswordFilter.spec.ts
+++ b/packages/common/src/filters/__tests__/inputPasswordFilter.spec.ts
@@ -1,5 +1,5 @@
 import { InputPasswordFilter } from '../inputPasswordFilter';
-import { GridOption, FilterArguments, Column } from '../../interfaces/index';
+import { Column, FilterArguments, GridOption, SlickGrid } from '../../interfaces/index';
 import { Filters } from '..';
 
 const containerId = 'demo-container';
@@ -17,7 +17,7 @@ const gridStub = {
   getColumns: jest.fn(),
   getHeaderRowColumn: jest.fn(),
   render: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('InputPasswordFilter', () => {
   let divContainer: HTMLDivElement;
diff --git a/packages/common/src/filters/__tests__/multipleSelectFilter.spec.ts b/packages/common/src/filters/__tests__/multipleSelectFilter.spec.ts
index 0897ba9ab..0dca36a35 100644
--- a/packages/common/src/filters/__tests__/multipleSelectFilter.spec.ts
+++ b/packages/common/src/filters/__tests__/multipleSelectFilter.spec.ts
@@ -2,7 +2,7 @@
 import 'multiple-select-adapted';
 
 import { Filters } from '..';
-import { Column, FilterArguments, GridOption } from '../../interfaces/index';
+import { Column, FilterArguments, GridOption, SlickGrid } from '../../interfaces/index';
 import { CollectionService } from './../../services/collection.service';
 import { MultipleSelectFilter } from '../multipleSelectFilter';
 import { TranslateServiceStub } from '../../../../../test/translateServiceStub';
@@ -22,7 +22,7 @@ const gridStub = {
   getColumns: jest.fn(),
   getHeaderRowColumn: jest.fn(),
   render: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('SelectFilter', () => {
   let translateService: TranslateServiceStub;
diff --git a/packages/common/src/filters/__tests__/nativeSelectFilter.spec.ts b/packages/common/src/filters/__tests__/nativeSelectFilter.spec.ts
index 3b5405848..a677fa4c5 100644
--- a/packages/common/src/filters/__tests__/nativeSelectFilter.spec.ts
+++ b/packages/common/src/filters/__tests__/nativeSelectFilter.spec.ts
@@ -1,6 +1,4 @@
-import { FieldType, OperatorType } from '../../enums/index';
-import { Column, FilterArguments, GridOption } from '../../interfaces/index';
-import { CollectionService } from './../../services/collection.service';
+import { Column, FilterArguments, GridOption, SlickGrid } from '../../interfaces/index';
 import { Filters } from '..';
 import { NativeSelectFilter } from '../nativeSelectFilter';
 import { TranslateServiceStub } from '../../../../../test/translateServiceStub';
@@ -20,7 +18,7 @@ const gridStub = {
   getColumns: jest.fn(),
   getHeaderRowColumn: jest.fn(),
   render: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('NativeSelectFilter', () => {
   let translateService: TranslateServiceStub;
diff --git a/packages/common/src/filters/__tests__/selectFilter.spec.ts b/packages/common/src/filters/__tests__/selectFilter.spec.ts
index 247510e3d..5d73d4645 100644
--- a/packages/common/src/filters/__tests__/selectFilter.spec.ts
+++ b/packages/common/src/filters/__tests__/selectFilter.spec.ts
@@ -2,7 +2,7 @@
 import 'multiple-select-adapted';
 
 import { FieldType, OperatorType } from '../../enums/index';
-import { Column, FilterArguments, GridOption, } from '../../interfaces/index';
+import { Column, FilterArguments, GridOption, SlickGrid } from '../../interfaces/index';
 import { CollectionService } from '../../services/collection.service';
 import { Filters } from '..';
 import { SelectFilter } from '../selectFilter';
@@ -23,8 +23,7 @@ const gridStub = {
   getColumns: jest.fn(),
   getHeaderRowColumn: jest.fn(),
   render: jest.fn(),
-};
-
+} as unknown as SlickGrid;
 
 describe('SelectFilter', () => {
   let translateService: TranslateServiceStub;
diff --git a/packages/common/src/filters/__tests__/selectFilterNoLibLoaded.spec.ts b/packages/common/src/filters/__tests__/selectFilterNoLibLoaded.spec.ts
index ce92e55eb..d21520e22 100644
--- a/packages/common/src/filters/__tests__/selectFilterNoLibLoaded.spec.ts
+++ b/packages/common/src/filters/__tests__/selectFilterNoLibLoaded.spec.ts
@@ -1,7 +1,7 @@
 // import 3rd party lib multiple-select for the tests
 // import 'multiple-select-adapted';
 
-import { Column, FilterArguments, GridOption } from '../../interfaces/index';
+import { Column, FilterArguments, GridOption, SlickGrid } from '../../interfaces/index';
 import { CollectionService } from '../../services/collection.service';
 import { Filters } from '..';
 import { SelectFilter } from '../selectFilter';
@@ -26,7 +26,7 @@ const gridStub = {
   getColumns: jest.fn(),
   getHeaderRowColumn: jest.fn(),
   render: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('SelectFilter', () => {
   let divContainer: HTMLDivElement;
diff --git a/packages/common/src/filters/__tests__/singleSelectFilter.spec.ts b/packages/common/src/filters/__tests__/singleSelectFilter.spec.ts
index 4d64b79f5..8a3f45aeb 100644
--- a/packages/common/src/filters/__tests__/singleSelectFilter.spec.ts
+++ b/packages/common/src/filters/__tests__/singleSelectFilter.spec.ts
@@ -2,7 +2,7 @@
 import 'multiple-select-adapted';
 
 import { Filters } from '..';
-import { Column, FilterArguments, GridOption } from '../../interfaces/index';
+import { Column, FilterArguments, GridOption, SlickGrid } from '../../interfaces/index';
 import { CollectionService } from '../../services/collection.service';
 import { SingleSelectFilter } from '../singleSelectFilter';
 import { TranslateServiceStub } from '../../../../../test/translateServiceStub';
@@ -22,7 +22,7 @@ const gridStub = {
   getColumns: jest.fn(),
   getHeaderRowColumn: jest.fn(),
   render: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('SelectFilter', () => {
   let translateService: TranslateServiceStub;
diff --git a/packages/common/src/filters/__tests__/sliderFilter.spec.ts b/packages/common/src/filters/__tests__/sliderFilter.spec.ts
index 463909e55..a36d82cfa 100644
--- a/packages/common/src/filters/__tests__/sliderFilter.spec.ts
+++ b/packages/common/src/filters/__tests__/sliderFilter.spec.ts
@@ -1,5 +1,5 @@
 import { Filters } from '..';
-import { GridOption, FilterArguments, Column } from '../../interfaces/index';
+import { Column, FilterArguments, GridOption, SlickGrid } from '../../interfaces/index';
 import { SliderFilter } from '../sliderFilter';
 
 const containerId = 'demo-container';
@@ -17,7 +17,7 @@ const gridStub = {
   getColumns: jest.fn(),
   getHeaderRowColumn: jest.fn(),
   render: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('SliderFilter', () => {
   let divContainer: HTMLDivElement;
diff --git a/packages/common/src/filters/__tests__/sliderRangeFilter.spec.ts b/packages/common/src/filters/__tests__/sliderRangeFilter.spec.ts
index 1a0c58582..8df9cd68e 100644
--- a/packages/common/src/filters/__tests__/sliderRangeFilter.spec.ts
+++ b/packages/common/src/filters/__tests__/sliderRangeFilter.spec.ts
@@ -1,5 +1,5 @@
 import { Filters } from '..';
-import { GridOption, JQueryUiSliderOption, FilterArguments, Column } from '../../interfaces/index';
+import { Column, FilterArguments, GridOption, JQueryUiSliderOption, SlickGrid } from '../../interfaces/index';
 import { SliderRangeFilter } from '../sliderRangeFilter';
 
 const containerId = 'demo-container';
@@ -17,7 +17,7 @@ const gridStub = {
   getColumns: jest.fn(),
   getHeaderRowColumn: jest.fn(),
   render: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('SliderRangeFilter', () => {
   let divContainer: HTMLDivElement;
diff --git a/packages/common/src/filters/autoCompleteFilter.ts b/packages/common/src/filters/autoCompleteFilter.ts
index 6005b548d..d8a33b55e 100644
--- a/packages/common/src/filters/autoCompleteFilter.ts
+++ b/packages/common/src/filters/autoCompleteFilter.ts
@@ -13,6 +13,7 @@ import {
   FilterArguments,
   FilterCallback,
   GridOption,
+  SlickGrid,
 } from './../interfaces/index';
 import { CollectionService } from '../services/collection.service';
 import { getDescendantProperty } from '../services/utilities';
@@ -32,7 +33,7 @@ export class AutoCompleteFilter implements Filter {
   /** The JQuery DOM element */
   $filterElm: any;
 
-  grid: any;
+  grid: SlickGrid;
   searchTerms: SearchTerm[];
   columnDef: Column;
   callback: FilterCallback;
diff --git a/packages/common/src/filters/compoundDateFilter.ts b/packages/common/src/filters/compoundDateFilter.ts
index 86f5f5a87..00ed352a1 100644
--- a/packages/common/src/filters/compoundDateFilter.ts
+++ b/packages/common/src/filters/compoundDateFilter.ts
@@ -17,6 +17,7 @@ import {
   FilterCallback,
   FlatpickrOption,
   GridOption,
+  SlickGrid,
 } from '../interfaces/index';
 import { mapFlatpickrDateFormatWithFieldType, mapOperatorToShorthandDesignation } from '../services/utilities';
 import { TranslaterService } from '../services/translater.service';
@@ -38,7 +39,7 @@ export class CompoundDateFilter implements Filter {
   private _currentValue: string;
   private _operator: OperatorType | OperatorString;
   flatInstance: any;
-  grid: any;
+  grid: SlickGrid;
   searchTerms: SearchTerm[];
   columnDef: Column;
   callback: FilterCallback;
diff --git a/packages/common/src/filters/compoundInputFilter.ts b/packages/common/src/filters/compoundInputFilter.ts
index b77362ffd..d1f66be09 100644
--- a/packages/common/src/filters/compoundInputFilter.ts
+++ b/packages/common/src/filters/compoundInputFilter.ts
@@ -8,6 +8,7 @@ import {
   FilterCallback,
   GridOption,
   Locale,
+  SlickGrid,
 } from '../interfaces/index';
 import { getTranslationPrefix, mapOperatorToShorthandDesignation } from '../services/utilities';
 import { TranslaterService } from '../services/translater.service';
@@ -24,7 +25,7 @@ export class CompoundInputFilter implements Filter {
   private $filterInputElm: any;
   private $selectOperatorElm: any;
   private _operator: OperatorType | OperatorString;
-  grid: any;
+  grid: SlickGrid;
   searchTerms: SearchTerm[];
   columnDef: Column;
   callback: FilterCallback;
diff --git a/packages/common/src/filters/compoundSliderFilter.ts b/packages/common/src/filters/compoundSliderFilter.ts
index aa1b73a46..327a0b44e 100644
--- a/packages/common/src/filters/compoundSliderFilter.ts
+++ b/packages/common/src/filters/compoundSliderFilter.ts
@@ -5,6 +5,7 @@ import {
   Filter,
   FilterArguments,
   FilterCallback,
+  SlickGrid,
 } from '../interfaces/index';
 import { mapOperatorToShorthandDesignation } from '../services/utilities';
 
@@ -19,14 +20,14 @@ export class CompoundSliderFilter implements Filter {
   private _clearFilterTriggered = false;
   private _currentValue: number;
   private _shouldTriggerQuery = true;
-  private _elementRangeInputId: string = '';
-  private _elementRangeOutputId: string = '';
+  private _elementRangeInputId = '';
+  private _elementRangeOutputId = '';
   private _operator: OperatorType | OperatorString;
   private $containerInputGroupElm: any;
   private $filterElm: any;
   private $filterInputElm: any;
   private $selectOperatorElm: any;
-  grid: any;
+  grid: SlickGrid;
   searchTerms: SearchTerm[];
   columnDef: Column;
   callback: FilterCallback;
diff --git a/packages/common/src/filters/dateRangeFilter.ts b/packages/common/src/filters/dateRangeFilter.ts
index 0a2d72451..7b93d49ad 100644
--- a/packages/common/src/filters/dateRangeFilter.ts
+++ b/packages/common/src/filters/dateRangeFilter.ts
@@ -16,6 +16,7 @@ import {
   FilterCallback,
   FlatpickrOption,
   GridOption,
+  SlickGrid,
 } from '../interfaces/index';
 import { mapFlatpickrDateFormatWithFieldType, mapMomentDateFormatWithFieldType } from '../services/utilities';
 import { TranslaterService } from '../services/translater.service';
@@ -36,7 +37,7 @@ export class DateRangeFilter implements Filter {
   private $filterElm: any;
   private $filterInputElm: any;
   flatInstance: any;
-  grid: any;
+  grid: SlickGrid;
   searchTerms: SearchTerm[];
   columnDef: Column;
   callback: FilterCallback;
diff --git a/packages/common/src/filters/inputFilter.ts b/packages/common/src/filters/inputFilter.ts
index 835ddc127..b4419e6fe 100644
--- a/packages/common/src/filters/inputFilter.ts
+++ b/packages/common/src/filters/inputFilter.ts
@@ -5,6 +5,7 @@ import {
   FilterArguments,
   FilterCallback,
   GridOption,
+  SlickGrid,
 } from '../interfaces/index';
 import { OperatorType, OperatorString, SearchTerm } from '../enums/index';
 
@@ -13,7 +14,7 @@ export class InputFilter implements Filter {
   protected _shouldTriggerQuery = true;
   protected _inputType = 'text';
   protected $filterElm: any;
-  grid: any;
+  grid: SlickGrid;
   searchTerms: SearchTerm[];
   columnDef: Column;
   callback: FilterCallback;
diff --git a/packages/common/src/filters/nativeSelectFilter.ts b/packages/common/src/filters/nativeSelectFilter.ts
index d810e31e0..73a05914d 100644
--- a/packages/common/src/filters/nativeSelectFilter.ts
+++ b/packages/common/src/filters/nativeSelectFilter.ts
@@ -5,6 +5,7 @@ import {
   FilterArguments,
   FilterCallback,
   GridOption,
+  SlickGrid,
 } from '../interfaces/index';
 import { OperatorType, OperatorString, SearchTerm } from '../enums/index';
 import { TranslaterService } from '../services/translater.service';
@@ -14,7 +15,7 @@ export class NativeSelectFilter implements Filter {
   private _shouldTriggerQuery = true;
   private _currentValues: any | any[] = [];
   $filterElm: any;
-  grid: any;
+  grid: SlickGrid;
   searchTerms: SearchTerm[];
   columnDef: Column;
   callback: FilterCallback;
diff --git a/packages/common/src/filters/selectFilter.ts b/packages/common/src/filters/selectFilter.ts
index 519569a74..c50311245 100644
--- a/packages/common/src/filters/selectFilter.ts
+++ b/packages/common/src/filters/selectFilter.ts
@@ -13,7 +13,8 @@ import {
   GridOption,
   Locale,
   MultipleSelectOption,
-  SelectOption
+  SelectOption,
+  SlickGrid
 } from './../interfaces/index';
 import { CollectionService } from '../services/collection.service';
 import { getDescendantProperty, getTranslationPrefix, htmlEncode } from '../services/utilities';
@@ -33,7 +34,7 @@ export class SelectFilter implements Filter {
   /** The JQuery DOM element */
   $filterElm: any;
 
-  grid: any;
+  grid: SlickGrid;
   searchTerms: SearchTerm[];
   columnDef: Column;
   callback: FilterCallback;
diff --git a/packages/common/src/filters/sliderFilter.ts b/packages/common/src/filters/sliderFilter.ts
index e81f7a480..27aa52898 100644
--- a/packages/common/src/filters/sliderFilter.ts
+++ b/packages/common/src/filters/sliderFilter.ts
@@ -5,6 +5,7 @@ import {
   Filter,
   FilterArguments,
   FilterCallback,
+  SlickGrid,
 } from './../interfaces/index';
 
 const DEFAULT_MIN_VALUE = 0;
@@ -15,10 +16,10 @@ export class SliderFilter implements Filter {
   private _clearFilterTriggered = false;
   private _currentValue: number;
   private _shouldTriggerQuery = true;
-  private _elementRangeInputId: string = '';
-  private _elementRangeOutputId: string = '';
+  private _elementRangeInputId = '';
+  private _elementRangeOutputId = '';
   private $filterElm: any;
-  grid: any;
+  grid: SlickGrid;
   searchTerms: SearchTerm[];
   columnDef: Column;
   callback: FilterCallback;
diff --git a/packages/common/src/filters/sliderRangeFilter.ts b/packages/common/src/filters/sliderRangeFilter.ts
index 172380f59..0bf4520c4 100644
--- a/packages/common/src/filters/sliderRangeFilter.ts
+++ b/packages/common/src/filters/sliderRangeFilter.ts
@@ -8,6 +8,7 @@ import {
   GridOption,
   JQueryUiSliderOption,
   JQueryUiSliderResponse,
+  SlickGrid,
 } from '../interfaces/index';
 
 const DEFAULT_MIN_VALUE = 0;
@@ -22,7 +23,7 @@ export class SliderRangeFilter implements Filter {
   private _sliderOptions: JQueryUiSliderOption;
   private $filterElm: any;
   private $filterContainerElm: any;
-  grid: any;
+  grid: SlickGrid;
   searchTerms: SearchTerm[];
   columnDef: Column;
   callback: FilterCallback;
diff --git a/packages/common/src/formatters/__tests__/decimalFormatter.spec.ts b/packages/common/src/formatters/__tests__/decimalFormatter.spec.ts
index 521743a29..7b84d1f45 100644
--- a/packages/common/src/formatters/__tests__/decimalFormatter.spec.ts
+++ b/packages/common/src/formatters/__tests__/decimalFormatter.spec.ts
@@ -1,11 +1,11 @@
-import { Column, GridOption } from '../../interfaces/index';
+import { Column, GridOption, SlickGrid } from '../../interfaces/index';
 import { decimalFormatter } from '../decimalFormatter';
 
 describe('the Decimal Formatter', () => {
   let consoleSpy;
   const gridStub = {
     getOptions: jest.fn()
-  };
+  } as unknown as SlickGrid;
 
   beforeEach(() => {
     consoleSpy = jest.spyOn(global.console, 'warn').mockReturnValue();
@@ -84,14 +84,14 @@ describe('the Decimal Formatter', () => {
   });
 
   it('should display a negative average with parentheses when input is negative and "displayNegativeNumberWithParentheses" is enabled in the Formatter Options', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true, minDecimal: 2 } } as GridOption);
+    gridStub.getOptions = () => ({ formatterOptions: { displayNegativeNumberWithParentheses: true, minDecimal: 2 } } as GridOption);
     const input = -2.4;
     const output = decimalFormatter(1, 1, input, {} as Column, {}, gridStub);
     expect(output).toBe(`(2.40)`);
   });
 
   it('should display a negative average with parentheses when input is negative and "displayNegativeNumberWithParentheses" is enabled and thousand separator in the Formatter Options', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true, decimalSeparator: ',', thousandSeparator: ' ' } } as GridOption);
+    gridStub.getOptions = () => ({ formatterOptions: { displayNegativeNumberWithParentheses: true, decimalSeparator: ',', thousandSeparator: ' ' } } as GridOption);
     const input = -12345678.4;
     const output = decimalFormatter(1, 1, input, {} as Column, {}, gridStub);
     expect(output).toBe(`(12 345 678,40)`);
diff --git a/packages/common/src/formatters/__tests__/dollarColoredBoldFormatter.spec.ts b/packages/common/src/formatters/__tests__/dollarColoredBoldFormatter.spec.ts
index e98c484dd..0a60b5124 100644
--- a/packages/common/src/formatters/__tests__/dollarColoredBoldFormatter.spec.ts
+++ b/packages/common/src/formatters/__tests__/dollarColoredBoldFormatter.spec.ts
@@ -1,10 +1,10 @@
-import { Column, GridOption } from '../../interfaces/index';
+import { Column, GridOption, SlickGrid } from '../../interfaces/index';
 import { dollarColoredBoldFormatter } from '../dollarColoredBoldFormatter';
 
 describe('the DollarColoredBold Formatter', () => {
   const gridStub = {
     getOptions: jest.fn()
-  };
+  } as unknown as SlickGrid;
 
   it('should return an empty string when no value is provided', () => {
     const output = dollarColoredBoldFormatter(1, 1, '', {} as Column, {});
@@ -71,14 +71,14 @@ describe('the DollarColoredBold Formatter', () => {
   });
 
   it('should display a negative average with parentheses when input is negative and "displayNegativeNumberWithParentheses" is enabled in the Formatter Options', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true } } as GridOption);
+    gridStub.getOptions = () => ({ formatterOptions: { displayNegativeNumberWithParentheses: true } } as GridOption);
     const input = -2.4;
     const output = dollarColoredBoldFormatter(1, 1, input, {} as Column, {}, gridStub);
     expect(output).toBe(`<span style="color:red; font-weight:bold;">($2.40)</span>`);
   });
 
   it('should display a negative average with parentheses when input is negative and "displayNegativeNumberWithParentheses" is enabled and thousand separator in the Formatter Options', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true, decimalSeparator: ',', thousandSeparator: ' ' } } as GridOption);
+    gridStub.getOptions = () => ({ formatterOptions: { displayNegativeNumberWithParentheses: true, decimalSeparator: ',', thousandSeparator: ' ' } } as GridOption);
     const input = -12345678.4;
     const output = dollarColoredBoldFormatter(1, 1, input, {} as Column, {}, gridStub);
     expect(output).toBe(`<span style="color:red; font-weight:bold;">($12 345 678,40)</span>`);
diff --git a/packages/common/src/formatters/__tests__/dollarColoredFormatter.spec.ts b/packages/common/src/formatters/__tests__/dollarColoredFormatter.spec.ts
index 2c53f4e99..c0c09b4bc 100644
--- a/packages/common/src/formatters/__tests__/dollarColoredFormatter.spec.ts
+++ b/packages/common/src/formatters/__tests__/dollarColoredFormatter.spec.ts
@@ -1,10 +1,10 @@
-import { Column, GridOption } from '../../interfaces/index';
+import { Column, GridOption, SlickGrid } from '../../interfaces/index';
 import { dollarColoredFormatter } from '../dollarColoredFormatter';
 
 describe('the DollarColored Formatter', () => {
   const gridStub = {
     getOptions: jest.fn()
-  };
+  } as unknown as SlickGrid;
 
   it('should return an empty string when no value is provided', () => {
     const output = dollarColoredFormatter(1, 1, '', {} as Column, {});
@@ -71,13 +71,13 @@ describe('the DollarColored Formatter', () => {
   });
 
   it('should display a negative average with parentheses when input is negative and "displayNegativeNumberWithParentheses" is enabled in the Formatter Options', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true } } as GridOption);
+    gridStub.getOptions = () => ({ formatterOptions: { displayNegativeNumberWithParentheses: true } } as GridOption);
     const input = -2.4;
     const output = dollarColoredFormatter(1, 1, input, {} as Column, {}, gridStub);
     expect(output).toBe(`<span style="color:red">($2.40)</span>`);
   });
   it('should display a negative average with parentheses when input is negative and "displayNegativeNumberWithParentheses" is enabled and thousand separator in the Formatter Options', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true, decimalSeparator: ',', thousandSeparator: ' ' } } as GridOption);
+    gridStub.getOptions = () => ({ formatterOptions: { displayNegativeNumberWithParentheses: true, decimalSeparator: ',', thousandSeparator: ' ' } } as GridOption);
     const input = -12345678.4;
     const output = dollarColoredFormatter(1, 1, input, {} as Column, {}, gridStub);
     expect(output).toBe(`<span style="color:red">($12 345 678,40)</span>`);
diff --git a/packages/common/src/formatters/__tests__/dollarFormatter.spec.ts b/packages/common/src/formatters/__tests__/dollarFormatter.spec.ts
index 4c12c239e..b17715684 100644
--- a/packages/common/src/formatters/__tests__/dollarFormatter.spec.ts
+++ b/packages/common/src/formatters/__tests__/dollarFormatter.spec.ts
@@ -1,10 +1,10 @@
-import { Column, GridOption } from '../../interfaces/index';
+import { Column, GridOption, SlickGrid } from '../../interfaces/index';
 import { dollarFormatter } from '../dollarFormatter';
 
 describe('the Dollar Formatter', () => {
   const gridStub = {
     getOptions: jest.fn()
-  };
+  } as unknown as SlickGrid;
 
   it('should display an empty string when no value is provided', () => {
     const output = dollarFormatter(1, 1, '', {} as Column, {});
@@ -71,14 +71,14 @@ describe('the Dollar Formatter', () => {
   });
 
   it('should display a negative average with parentheses when input is negative and "displayNegativeNumberWithParentheses" is enabled in the Formatter Options', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true } } as GridOption);
+    gridStub.getOptions = () => ({ formatterOptions: { displayNegativeNumberWithParentheses: true } } as GridOption);
     const input = -2.4;
     const output = dollarFormatter(1, 1, input, {} as Column, {}, gridStub);
     expect(output).toBe(`($2.40)`);
   });
 
   it('should display a negative average with parentheses when input is negative and "displayNegativeNumberWithParentheses" is enabled and thousand separator in the Formatter Options', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true, decimalSeparator: ',', thousandSeparator: ' ' } } as GridOption);
+    gridStub.getOptions = () => ({ formatterOptions: { displayNegativeNumberWithParentheses: true, decimalSeparator: ',', thousandSeparator: ' ' } } as GridOption);
     const input = -12345678.4;
     const output = dollarFormatter(1, 1, input, {} as Column, {}, gridStub);
     expect(output).toBe(`($12 345 678,40)`);
diff --git a/packages/common/src/formatters/__tests__/formatterUtilities.spec.ts b/packages/common/src/formatters/__tests__/formatterUtilities.spec.ts
index 40d5bcfe8..025841595 100644
--- a/packages/common/src/formatters/__tests__/formatterUtilities.spec.ts
+++ b/packages/common/src/formatters/__tests__/formatterUtilities.spec.ts
@@ -1,16 +1,16 @@
 import { getAssociatedDateFormatter, getValueFromParamsOrFormatterOptions } from '../formatterUtilities';
 import { FieldType } from '../../enums/index';
-import { Column, GridOption } from '../../interfaces/index';
+import { Column, GridOption, SlickGrid } from '../../interfaces/index';
 
 describe('formatterUtilities', () => {
   const gridStub = {
     getOptions: jest.fn()
-  };
+  } as unknown as SlickGrid;
 
   describe('getValueFromParamsOrGridOptions method', () => {
     it('should return options found in the Grid Option when not found in Column Definition "params" property', () => {
       const gridOptions = { formatterOptions: { minDecimal: 2 } } as GridOption;
-      const gridSpy = gridStub.getOptions.mockReturnValue(gridOptions);
+      const gridSpy = (gridStub.getOptions as jest.Mock).mockReturnValue(gridOptions);
 
       const output = getValueFromParamsOrFormatterOptions('minDecimal', {} as Column, gridStub, -1);
 
@@ -20,7 +20,7 @@ describe('formatterUtilities', () => {
 
     it('should return options found in the Column Definition "params" even if exist in the Grid Option as well', () => {
       const gridOptions = { formatterOptions: { minDecimal: 2 } } as GridOption;
-      const gridSpy = gridStub.getOptions.mockReturnValue(gridOptions);
+      const gridSpy = (gridStub.getOptions as jest.Mock).mockReturnValue(gridOptions);
 
       const output = getValueFromParamsOrFormatterOptions('minDecimal', { params: { minDecimal: 3 } } as Column, gridStub, -1);
 
@@ -30,7 +30,7 @@ describe('formatterUtilities', () => {
 
     it('should return default value when not found in "params" (columnDef) neither the "formatterOptions" (gridOption)', () => {
       const defaultValue = 5;
-      const output = getValueFromParamsOrFormatterOptions('minDecimal', { field: 'column1' } as Column, {}, defaultValue);
+      const output = getValueFromParamsOrFormatterOptions('minDecimal', { field: 'column1' } as Column, {} as unknown as SlickGrid, defaultValue);
       expect(output).toBe(defaultValue);
     });
   });
@@ -55,7 +55,7 @@ describe('formatterUtilities', () => {
     it('should return a formatted Date with a different separator when changing setting the "dateSeparator" in "formatterOptions"', () => {
       const formatterFn = getAssociatedDateFormatter(FieldType.dateIso, '-');
       const gridOptions = { formatterOptions: { dateSeparator: '.' } } as GridOption;
-      const gridSpy = gridStub.getOptions.mockReturnValue(gridOptions);
+      const gridSpy = (gridStub.getOptions as jest.Mock).mockReturnValue(gridOptions);
 
       const output = formatterFn(1, 1, '2002-01-01T00:01:01', { type: FieldType.dateIso } as Column, {}, gridStub);
 
diff --git a/packages/common/src/formatters/__tests__/percentCompleteFormatter.spec.ts b/packages/common/src/formatters/__tests__/percentCompleteFormatter.spec.ts
index 1bf50c5be..7d6143b9b 100644
--- a/packages/common/src/formatters/__tests__/percentCompleteFormatter.spec.ts
+++ b/packages/common/src/formatters/__tests__/percentCompleteFormatter.spec.ts
@@ -1,10 +1,10 @@
-import { Column, GridOption } from '../../interfaces/index';
+import { Column, GridOption, SlickGrid } from '../../interfaces/index';
 import { percentCompleteFormatter } from '../percentCompleteFormatter';
 
 describe('the Percent Complete Formatter', () => {
   const gridStub = {
     getOptions: jest.fn()
-  };
+  } as unknown as SlickGrid;
 
   it('should return an empty string when no value is provided', () => {
     const output = percentCompleteFormatter(1, 1, '', {} as Column, {});
@@ -59,14 +59,14 @@ describe('the Percent Complete Formatter', () => {
   });
 
   it('should display a negative percentage with parentheses when input is negative and "displayNegativeNumberWithParentheses" is enabled in the Formatter Options', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true, minDecimal: 2 } } as GridOption);
+    gridStub.getOptions = () => ({ formatterOptions: { displayNegativeNumberWithParentheses: true, minDecimal: 2 } } as GridOption);
     const input = -2.4;
     const output = percentCompleteFormatter(1, 1, input, {} as Column, {}, gridStub);
     expect(output).toBe(`<span style='color:red'>(2.40%)</span>`);
   });
 
   it('should display a negative average with thousand separator and parentheses when input is negative and "displayNegativeNumberWithParentheses" is enabled in the Formatter Options', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true, minDecimal: 2, decimalSeparator: ',', thousandSeparator: '_' } } as GridOption);
+    gridStub.getOptions = () => ({ formatterOptions: { displayNegativeNumberWithParentheses: true, minDecimal: 2, decimalSeparator: ',', thousandSeparator: '_' } } as GridOption);
     const input = -345678.024;
     const output = percentCompleteFormatter(1, 1, input, {} as Column, {}, gridStub);
     expect(output).toBe(`<span style='color:red'>(345_678,02%)</span>`);
diff --git a/packages/common/src/formatters/__tests__/percentFormatter.spec.ts b/packages/common/src/formatters/__tests__/percentFormatter.spec.ts
index 777e4930a..34cfd5795 100644
--- a/packages/common/src/formatters/__tests__/percentFormatter.spec.ts
+++ b/packages/common/src/formatters/__tests__/percentFormatter.spec.ts
@@ -1,10 +1,10 @@
-import { Column, GridOption } from '../../interfaces/index';
+import { Column, GridOption, SlickGrid } from '../../interfaces/index';
 import { percentFormatter } from '../percentFormatter';
 
 describe('the Percent Symbol Formatter', () => {
   const gridStub = {
     getOptions: jest.fn()
-  };
+  } as unknown as SlickGrid;
 
   it('should display an empty string when no value is provided', () => {
     const output = percentFormatter(1, 1, '', {} as Column, {});
@@ -59,14 +59,14 @@ describe('the Percent Symbol Formatter', () => {
   });
 
   it('should display a negative average with parentheses when input is negative and "displayNegativeNumberWithParentheses" is enabled in the Formatter Options', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true, minDecimal: 2 } } as GridOption);
+    gridStub.getOptions = () => ({ formatterOptions: { displayNegativeNumberWithParentheses: true, minDecimal: 2 } } as GridOption);
     const input = -0.024;
     const output = percentFormatter(1, 1, input, {} as Column, {}, gridStub);
     expect(output).toBe(`(2.40%)`);
   });
 
   it('should display a negative average with thousand separator and parentheses when input is negative and "displayNegativeNumberWithParentheses" is enabled in the Formatter Options', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true, minDecimal: 2, decimalSeparator: ',', thousandSeparator: '_' } } as GridOption);
+    gridStub.getOptions = () => ({ formatterOptions: { displayNegativeNumberWithParentheses: true, minDecimal: 2, decimalSeparator: ',', thousandSeparator: '_' } } as GridOption);
     const input = -345678.024;
     const output = percentFormatter(1, 1, input, {} as Column, {}, gridStub);
     expect(output).toBe(`(34_567_802,40%)`);
diff --git a/packages/common/src/formatters/__tests__/percentSymbolFormatter.spec.ts b/packages/common/src/formatters/__tests__/percentSymbolFormatter.spec.ts
index e4aba126c..718a9b553 100644
--- a/packages/common/src/formatters/__tests__/percentSymbolFormatter.spec.ts
+++ b/packages/common/src/formatters/__tests__/percentSymbolFormatter.spec.ts
@@ -1,10 +1,10 @@
-import { Column, GridOption } from '../../interfaces/index';
+import { Column, GridOption, SlickGrid } from '../../interfaces/index';
 import { percentSymbolFormatter } from '../percentSymbolFormatter';
 
 describe('the Percent Symbol Formatter', () => {
   const gridStub = {
     getOptions: jest.fn()
-  };
+  } as unknown as SlickGrid;
 
   it('should display an empty string when no value is provided', () => {
     const output = percentSymbolFormatter(1, 1, '', {} as Column, {});
@@ -71,14 +71,14 @@ describe('the Percent Symbol Formatter', () => {
   });
 
   it('should display a negative average with parentheses when input is negative and "displayNegativeNumberWithParentheses" is enabled in the Formatter Options', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true, minDecimal: 2 } } as GridOption);
+    gridStub.getOptions = () => ({ formatterOptions: { displayNegativeNumberWithParentheses: true, minDecimal: 2 } } as GridOption);
     const input = -2.4;
     const output = percentSymbolFormatter(1, 1, input, {} as Column, {}, gridStub);
     expect(output).toBe(`(2.40%)`);
   });
 
   it('should display a negative average with thousand separator and parentheses when input is negative and "displayNegativeNumberWithParentheses" is enabled in the Formatter Options', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true, minDecimal: 2, decimalSeparator: ',', thousandSeparator: '_' } } as GridOption);
+    gridStub.getOptions = () => ({ formatterOptions: { displayNegativeNumberWithParentheses: true, minDecimal: 2, decimalSeparator: ',', thousandSeparator: '_' } } as GridOption);
     const input = -2345678.4;
     const output = percentSymbolFormatter(1, 1, input, {} as Column, {}, gridStub);
     expect(output).toBe(`(2_345_678,40%)`);
diff --git a/packages/common/src/formatters/__tests__/translateBooleanFormatter.spec.ts b/packages/common/src/formatters/__tests__/translateBooleanFormatter.spec.ts
index 739e2a3f6..8a6c0e650 100644
--- a/packages/common/src/formatters/__tests__/translateBooleanFormatter.spec.ts
+++ b/packages/common/src/formatters/__tests__/translateBooleanFormatter.spec.ts
@@ -1,4 +1,4 @@
-import { Column } from '../../interfaces/index';
+import { Column, SlickGrid } from '../../interfaces/index';
 import { translateBooleanFormatter } from '../translateBooleanFormatter';
 import { TranslateServiceStub } from '../../../../../test/translateServiceStub';
 
@@ -8,7 +8,7 @@ describe('the Translate Boolean Formatter', () => {
   // stub some methods of the SlickGrid Grid instance
   const gridStub = {
     getOptions: jest.fn()
-  };
+  } as unknown as SlickGrid;
 
   beforeEach(() => {
     translateService = new TranslateServiceStub();
@@ -16,35 +16,35 @@ describe('the Translate Boolean Formatter', () => {
 
   it('should return an empty string when null value is passed', async () => {
     await translateService.setLocale('fr');
-    gridStub.getOptions.mockReturnValueOnce({ i18n: translateService });
+    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({ i18n: translateService });
     const output = translateBooleanFormatter(1, 1, null, {} as Column, {}, gridStub);
     expect(output).toBe('');
   });
 
   it('should return an empty string when empty string value is passed', async () => {
     await translateService.setLocale('fr');
-    gridStub.getOptions.mockReturnValueOnce({ i18n: translateService });
+    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({ i18n: translateService });
     const output = translateBooleanFormatter(1, 1, '', {} as Column, {}, gridStub);
     expect(output).toBe('');
   });
 
   it('should return the translated value when value passed is boolean', async () => {
     await translateService.setLocale('fr');
-    gridStub.getOptions.mockReturnValueOnce({ i18n: translateService });
+    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({ i18n: translateService });
     const output = translateBooleanFormatter(1, 1, 'TRUE', {} as Column, {}, gridStub);
     expect(output).toBe('Vrai');
   });
 
   it('should return the translated value when value passed is a string', async () => {
     await translateService.setLocale('fr');
-    gridStub.getOptions.mockReturnValueOnce({ i18n: translateService });
+    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({ i18n: translateService });
     const output = translateBooleanFormatter(1, 1, 'TRUE', {} as Column, {}, gridStub);
     expect(output).toBe('Vrai');
   });
 
   it('should return the translated value when value passed is a string and i18n service is passed as a ColumnDef Params', async () => {
     await translateService.setLocale('fr');
-    gridStub.getOptions.mockReturnValueOnce({});
+    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({});
     const output = translateBooleanFormatter(1, 1, 'TRUE', { params: { i18n: translateService } } as Column, {}, gridStub);
     expect(output).toBe('Vrai');
   });
@@ -57,13 +57,13 @@ describe('the Translate Boolean Formatter', () => {
 
   it('should convert any type of value to string', async () => {
     await translateService.setLocale('fr');
-    gridStub.getOptions.mockReturnValueOnce({ i18n: translateService });
+    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({ i18n: translateService });
     const output = translateBooleanFormatter(1, 1, 99, {} as Column, {}, gridStub);
     expect(output).toBe('99');
   });
 
   it('should throw an error when no Translate service is not provided to Column Definition and/or Grid Options', () => {
-    gridStub.getOptions.mockReturnValueOnce({});
+    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({});
     expect(() => translateBooleanFormatter(1, 1, null, {} as Column, {}, gridStub)).toThrowError('formatter requires the Translate Service');
   });
 });
diff --git a/packages/common/src/formatters/__tests__/translateFormatter.spec.ts b/packages/common/src/formatters/__tests__/translateFormatter.spec.ts
index 8c694d41b..2d85727a9 100644
--- a/packages/common/src/formatters/__tests__/translateFormatter.spec.ts
+++ b/packages/common/src/formatters/__tests__/translateFormatter.spec.ts
@@ -1,5 +1,5 @@
 
-import { Column } from '../../interfaces/index';
+import { Column, SlickGrid } from '../../interfaces/index';
 import { translateFormatter } from '../translateFormatter';
 import { TranslateServiceStub } from '../../../../../test/translateServiceStub';
 
@@ -9,7 +9,7 @@ describe('the Translate Formatter', () => {
   // stub some methods of the SlickGrid Grid instance
   const gridStub = {
     getOptions: jest.fn()
-  };
+  } as unknown as SlickGrid;
 
   beforeEach(() => {
     translateService = new TranslateServiceStub();
@@ -17,7 +17,7 @@ describe('the Translate Formatter', () => {
 
   it('should return an empty string when null value is passed', async () => {
     await translateService.setLocale('fr');
-    gridStub.getOptions.mockReturnValueOnce({ i18n: translateService });
+    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({ i18n: translateService });
     const output = translateFormatter(1, 1, null, {} as Column, {}, gridStub);
     expect(translateService.getCurrentLocale()).toBe('fr');
     expect(output).toBe('');
@@ -25,7 +25,7 @@ describe('the Translate Formatter', () => {
 
   it('should return an empty string when no value is passed', async () => {
     await translateService.setLocale('fr');
-    gridStub.getOptions.mockReturnValueOnce({ i18n: translateService });
+    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({ i18n: translateService });
     const output = translateFormatter(1, 1, '', {} as Column, {}, gridStub);
     expect(translateService.getCurrentLocale()).toBe('fr');
     expect(output).toBe('');
@@ -33,14 +33,14 @@ describe('the Translate Formatter', () => {
 
   it('should return the translated value as string', async () => {
     await translateService.setLocale('fr');
-    gridStub.getOptions.mockReturnValueOnce({ i18n: translateService });
+    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({ i18n: translateService });
     const output = translateFormatter(1, 1, 'HELLO', {} as Column, {}, gridStub);
     expect(output).toBe('Bonjour');
   });
 
   it('should return the translated value when value passed is a string and i18n service is passed as a ColumnDef Params', async () => {
     await translateService.setLocale('fr');
-    gridStub.getOptions.mockReturnValueOnce({});
+    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({});
     const output = translateFormatter(1, 1, 'HELLO', { params: { i18n: translateService } } as Column, {}, gridStub);
     expect(output).toBe('Bonjour');
   });
@@ -53,13 +53,13 @@ describe('the Translate Formatter', () => {
 
   it('should convert any type of value to string', async () => {
     await translateService.setLocale('fr');
-    gridStub.getOptions.mockReturnValueOnce({ i18n: translateService });
+    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({ i18n: translateService });
     const output = translateFormatter(1, 1, 99, {} as Column, {}, gridStub);
     expect(output).toBe('99');
   });
 
   it('should throw an error when no Translate service provided to neither ColumnDefinition and GridOptions', () => {
-    gridStub.getOptions.mockReturnValueOnce({});
+    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({});
     expect(() => translateFormatter(1, 1, null, {} as Column, {}, gridStub)).toThrowError('formatter requires the Translate Service');
   });
 });
diff --git a/packages/common/src/formatters/__tests__/treeFormatter.spec.ts b/packages/common/src/formatters/__tests__/treeFormatter.spec.ts
index 256fb60cf..c0711655d 100644
--- a/packages/common/src/formatters/__tests__/treeFormatter.spec.ts
+++ b/packages/common/src/formatters/__tests__/treeFormatter.spec.ts
@@ -1,16 +1,16 @@
-import { Column, GridOption } from '../../interfaces/index';
+import { Column, DataView, GridOption, SlickGrid } from '../../interfaces/index';
 import { treeFormatter } from '../treeFormatter';
 
 const dataViewStub = {
   getIdxById: jest.fn(),
   getItemByIdx: jest.fn(),
   getIdPropertyName: jest.fn(),
-};
+} as unknown as DataView;
 
 const gridStub = {
   getData: jest.fn(),
   getOptions: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('the Uppercase Formatter', () => {
   let dataset;
diff --git a/packages/common/src/formatters/decimalFormatter.ts b/packages/common/src/formatters/decimalFormatter.ts
index a4f9ccba5..e93f9d170 100644
--- a/packages/common/src/formatters/decimalFormatter.ts
+++ b/packages/common/src/formatters/decimalFormatter.ts
@@ -1,8 +1,8 @@
-import { Column, Formatter } from './../interfaces/index';
+import { Column, Formatter, SlickGrid } from './../interfaces/index';
 import { formatNumber } from './../services/utilities';
 import { getValueFromParamsOrFormatterOptions } from './formatterUtilities';
 
-export const decimalFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: any) => {
+export const decimalFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: SlickGrid) => {
   const isNumber = (value === null || value === undefined || value === '') ? false : !isNaN(+value);
   const minDecimal = getValueFromParamsOrFormatterOptions('minDecimal', columnDef, grid, 2);
   const maxDecimal = getValueFromParamsOrFormatterOptions('maxDecimal', columnDef, grid, 2);
diff --git a/packages/common/src/formatters/dollarColoredBoldFormatter.ts b/packages/common/src/formatters/dollarColoredBoldFormatter.ts
index 9c4b20108..2ab9e5144 100644
--- a/packages/common/src/formatters/dollarColoredBoldFormatter.ts
+++ b/packages/common/src/formatters/dollarColoredBoldFormatter.ts
@@ -1,8 +1,8 @@
-import { Column, Formatter } from './../interfaces/index';
+import { Column, Formatter, SlickGrid } from './../interfaces/index';
 import { formatNumber } from './../services/utilities';
 import { getValueFromParamsOrFormatterOptions } from './formatterUtilities';
 
-export const dollarColoredBoldFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: any) => {
+export const dollarColoredBoldFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: SlickGrid) => {
   const isNumber = (value === null || value === undefined || value === '') ? false : !isNaN(+value);
   const minDecimal = getValueFromParamsOrFormatterOptions('minDecimal', columnDef, grid, 2);
   const maxDecimal = getValueFromParamsOrFormatterOptions('maxDecimal', columnDef, grid, 4);
diff --git a/packages/common/src/formatters/dollarColoredFormatter.ts b/packages/common/src/formatters/dollarColoredFormatter.ts
index 15233cdff..36e8d3b9d 100644
--- a/packages/common/src/formatters/dollarColoredFormatter.ts
+++ b/packages/common/src/formatters/dollarColoredFormatter.ts
@@ -1,8 +1,8 @@
-import { Column, Formatter } from './../interfaces/index';
+import { Column, Formatter, SlickGrid } from './../interfaces/index';
 import { formatNumber } from './../services/utilities';
 import { getValueFromParamsOrFormatterOptions } from './formatterUtilities';
 
-export const dollarColoredFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: any) => {
+export const dollarColoredFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: SlickGrid) => {
   const isNumber = (value === null || value === undefined || value === '') ? false : !isNaN(+value);
   const minDecimal = getValueFromParamsOrFormatterOptions('minDecimal', columnDef, grid, 2);
   const maxDecimal = getValueFromParamsOrFormatterOptions('maxDecimal', columnDef, grid, 4);
diff --git a/packages/common/src/formatters/dollarFormatter.ts b/packages/common/src/formatters/dollarFormatter.ts
index 9f05125e9..ae2b36c46 100644
--- a/packages/common/src/formatters/dollarFormatter.ts
+++ b/packages/common/src/formatters/dollarFormatter.ts
@@ -1,8 +1,8 @@
-import { Column, Formatter } from './../interfaces/index';
+import { Column, Formatter, SlickGrid } from './../interfaces/index';
 import { formatNumber } from './../services/utilities';
 import { getValueFromParamsOrFormatterOptions } from './formatterUtilities';
 
-export const dollarFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: any) => {
+export const dollarFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: SlickGrid) => {
   const isNumber = (value === null || value === undefined || value === '') ? false : !isNaN(+value);
   const minDecimal = getValueFromParamsOrFormatterOptions('minDecimal', columnDef, grid, 2);
   const maxDecimal = getValueFromParamsOrFormatterOptions('maxDecimal', columnDef, grid, 4);
diff --git a/packages/common/src/formatters/formatterUtilities.ts b/packages/common/src/formatters/formatterUtilities.ts
index dae7989d8..d22eba5db 100644
--- a/packages/common/src/formatters/formatterUtilities.ts
+++ b/packages/common/src/formatters/formatterUtilities.ts
@@ -1,5 +1,5 @@
 import { FieldType } from '../enums/fieldType.enum';
-import { Column, Formatter, GridOption } from '../interfaces/index';
+import { Column, Formatter, GridOption, SlickGrid } from '../interfaces/index';
 import { mapMomentDateFormatWithFieldType } from '../services/utilities';
 import * as moment_ from 'moment-mini';
 const moment = moment_; // patch to fix rollup "moment has no default export" issue, document here https://github.com/rollup/rollup/issues/670
@@ -10,7 +10,7 @@ const moment = moment_; // patch to fix rollup "moment has no default export" is
  * 2- Grid Options "formatterOptions"
  * 3- nothing found, return default value provided
  */
-export function getValueFromParamsOrFormatterOptions(optionName: string, columnDef: Column, grid: any, defaultValue?: any) {
+export function getValueFromParamsOrFormatterOptions(optionName: string, columnDef: Column, grid: SlickGrid, defaultValue?: any) {
   const gridOptions = ((grid && typeof grid.getOptions === 'function') ? grid.getOptions() : {}) as GridOption;
   const params = columnDef && columnDef.params;
 
@@ -26,7 +26,7 @@ export function getValueFromParamsOrFormatterOptions(optionName: string, columnD
 export function getAssociatedDateFormatter(fieldType: FieldType, defaultSeparator: string): Formatter {
   const defaultDateFormat = mapMomentDateFormatWithFieldType(fieldType);
 
-  return (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: any) => {
+  return (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: SlickGrid) => {
     const gridOptions = ((grid && typeof grid.getOptions === 'function') ? grid.getOptions() : {}) as GridOption;
     const customSeparator = gridOptions && gridOptions.formatterOptions && gridOptions.formatterOptions.dateSeparator || defaultSeparator;
 
diff --git a/packages/common/src/formatters/multipleFormatter.ts b/packages/common/src/formatters/multipleFormatter.ts
index 1ee93ed43..acd4d37a3 100644
--- a/packages/common/src/formatters/multipleFormatter.ts
+++ b/packages/common/src/formatters/multipleFormatter.ts
@@ -1,6 +1,6 @@
-import { Column, Formatter } from './../interfaces/index';
+import { Column, Formatter, SlickGrid } from './../interfaces/index';
 
-export const multipleFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: any) => {
+export const multipleFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: SlickGrid) => {
   const params = columnDef.params || {};
   if (!params.formatters || !Array.isArray(params.formatters)) {
     throw new Error(`The multiple formatter requires the "formatters" to be provided as a column params.
diff --git a/packages/common/src/formatters/percentCompleteFormatter.ts b/packages/common/src/formatters/percentCompleteFormatter.ts
index fa0ea461c..5169babea 100644
--- a/packages/common/src/formatters/percentCompleteFormatter.ts
+++ b/packages/common/src/formatters/percentCompleteFormatter.ts
@@ -1,8 +1,8 @@
-import { Column, Formatter } from './../interfaces/index';
+import { Column, Formatter, SlickGrid } from './../interfaces/index';
 import { formatNumber } from './../services/utilities';
 import { getValueFromParamsOrFormatterOptions } from './formatterUtilities';
 
-export const percentCompleteFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: any): string => {
+export const percentCompleteFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: SlickGrid): string => {
   const isNumber = (value === null || value === undefined || value === '') ? false : !isNaN(+value);
   const minDecimal = getValueFromParamsOrFormatterOptions('minDecimal', columnDef, grid);
   const maxDecimal = getValueFromParamsOrFormatterOptions('maxDecimal', columnDef, grid);
diff --git a/packages/common/src/formatters/percentFormatter.ts b/packages/common/src/formatters/percentFormatter.ts
index 49f6cfcef..f4b2690c6 100644
--- a/packages/common/src/formatters/percentFormatter.ts
+++ b/packages/common/src/formatters/percentFormatter.ts
@@ -1,8 +1,8 @@
-import { Column, Formatter } from './../interfaces/index';
+import { Column, Formatter, SlickGrid } from './../interfaces/index';
 import { formatNumber } from './../services/utilities';
 import { getValueFromParamsOrFormatterOptions } from './formatterUtilities';
 
-export const percentFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: any): string => {
+export const percentFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: SlickGrid): string => {
   const isNumber = (value === null || value === undefined || value === '') ? false : !isNaN(+value);
   const minDecimal = getValueFromParamsOrFormatterOptions('minDecimal', columnDef, grid);
   const maxDecimal = getValueFromParamsOrFormatterOptions('maxDecimal', columnDef, grid);
diff --git a/packages/common/src/formatters/percentSymbolFormatter.ts b/packages/common/src/formatters/percentSymbolFormatter.ts
index 9a226833b..00e4478b4 100644
--- a/packages/common/src/formatters/percentSymbolFormatter.ts
+++ b/packages/common/src/formatters/percentSymbolFormatter.ts
@@ -1,8 +1,8 @@
-import { Column, Formatter } from './../interfaces/index';
+import { Column, Formatter, SlickGrid } from './../interfaces/index';
 import { formatNumber } from './../services/utilities';
 import { getValueFromParamsOrFormatterOptions } from './formatterUtilities';
 
-export const percentSymbolFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: any): string => {
+export const percentSymbolFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: SlickGrid): string => {
   const isNumber = (value === null || value === undefined || value === '') ? false : !isNaN(+value);
   const minDecimal = getValueFromParamsOrFormatterOptions('minDecimal', columnDef, grid);
   const maxDecimal = getValueFromParamsOrFormatterOptions('maxDecimal', columnDef, grid);
diff --git a/packages/common/src/formatters/translateBooleanFormatter.ts b/packages/common/src/formatters/translateBooleanFormatter.ts
index 9bf3f316b..bccd14d2e 100644
--- a/packages/common/src/formatters/translateBooleanFormatter.ts
+++ b/packages/common/src/formatters/translateBooleanFormatter.ts
@@ -1,7 +1,7 @@
-import { Column, Formatter } from './../interfaces/index';
+import { Column, Formatter, SlickGrid } from './../interfaces/index';
 
 /** Takes a boolean value, cast it to upperCase string and finally translates (i18n) it */
-export const translateBooleanFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: any) => {
+export const translateBooleanFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: SlickGrid) => {
   const gridOptions = (grid && typeof grid.getOptions === 'function') ? grid.getOptions() : {};
   const i18n = gridOptions.i18n || (columnDef && columnDef.params && columnDef.params.i18n);
 
diff --git a/packages/common/src/formatters/translateFormatter.ts b/packages/common/src/formatters/translateFormatter.ts
index fa5af6b6f..12dee2f29 100644
--- a/packages/common/src/formatters/translateFormatter.ts
+++ b/packages/common/src/formatters/translateFormatter.ts
@@ -1,7 +1,7 @@
-import { Column, Formatter } from './../interfaces/index';
+import { Column, Formatter, SlickGrid } from './../interfaces/index';
 
 /** Takes a cell value and translates it (i18n). Requires an instance of the I18N Service:: `i18n: this.i18n` */
-export const translateFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: any) => {
+export const translateFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: SlickGrid) => {
   const gridOptions = (grid && typeof grid.getOptions === 'function') ? grid.getOptions() : {};
   const i18n = gridOptions.i18n || (columnDef && columnDef.params && columnDef.params.i18n);
 
diff --git a/packages/common/src/formatters/treeFormatter.ts b/packages/common/src/formatters/treeFormatter.ts
index 94ddbce66..956b310cf 100644
--- a/packages/common/src/formatters/treeFormatter.ts
+++ b/packages/common/src/formatters/treeFormatter.ts
@@ -1,7 +1,7 @@
-import { Column, Formatter, GridOption } from './../interfaces/index';
+import { Column, Formatter, GridOption, SlickGrid } from './../interfaces/index';
 import { getDescendantProperty, htmlEncode } from '../services/utilities';
 
-export const treeFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: any) => {
+export const treeFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: SlickGrid) => {
   const dataView = grid && grid.getData();
   const gridOptions = grid && grid.getOptions() as GridOption;
   const treeDataOptions = gridOptions?.treeDataOptions;
diff --git a/packages/common/src/grouping-formatters/__tests__/avgTotalsDollarFormatters.spec.ts b/packages/common/src/grouping-formatters/__tests__/avgTotalsDollarFormatters.spec.ts
index 3cb82c203..8b63c8be3 100644
--- a/packages/common/src/grouping-formatters/__tests__/avgTotalsDollarFormatters.spec.ts
+++ b/packages/common/src/grouping-formatters/__tests__/avgTotalsDollarFormatters.spec.ts
@@ -1,11 +1,11 @@
-import { Column, GridOption } from '../../interfaces/index';
+import { Column, GridOption, SlickGrid } from '../../interfaces/index';
 import { avgTotalsDollarFormatter } from '../avgTotalsDollarFormatter';
 
 describe('avgTotalsDollarFormatter', () => {
   // stub some methods of the SlickGrid Grid instance
   const gridStub = {
     getOptions: jest.fn()
-  };
+  } as unknown as SlickGrid;
 
   it('should display an empty string when no value is provided', () => {
     const output = avgTotalsDollarFormatter({}, {} as Column);
@@ -69,7 +69,7 @@ describe('avgTotalsDollarFormatter', () => {
   });
 
   it('should display a negative average with parentheses when input is negative and "displayNegativeNumberWithParentheses" is enabled in the Formatter Options', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true } } as GridOption);
+    (gridStub.getOptions as jest.Mock).mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true } } as GridOption);
     const columnDef = { id: 'column3', field: 'column3' } as Column;
     const totals = { avg: { column1: 123, column2: 345, column3: -2.4 } };
     const output = avgTotalsDollarFormatter(totals, columnDef, gridStub);
@@ -77,7 +77,7 @@ describe('avgTotalsDollarFormatter', () => {
   });
 
   it('should display a negative average with parentheses and thousand separator when input is negative and "displayNegativeNumberWithParentheses" is enabled in the Formatter Options', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as GridOption);
+    (gridStub.getOptions as jest.Mock).mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as GridOption);
     const columnDef = { id: 'column3', field: 'column3' } as Column;
     const totals = { avg: { column1: 123, column2: 345, column3: -12345678.4 } };
     const output = avgTotalsDollarFormatter(totals, columnDef, gridStub);
@@ -107,7 +107,7 @@ describe('avgTotalsDollarFormatter', () => {
   });
 
   it('should display an average number with user defined minimum & maximum decimal count in his grid option', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { minDecimal: 0, maxDecimal: 3, displayNegativeNumberWithParentheses: true } } as GridOption);
+    (gridStub.getOptions as jest.Mock).mockReturnValue({ formatterOptions: { minDecimal: 0, maxDecimal: 3, displayNegativeNumberWithParentheses: true } } as GridOption);
     const totals = { avg: { column1: 123.45678, column2: 345, column3: -2.45 } };
 
     const output1 = avgTotalsDollarFormatter(totals, { id: 'column1', field: 'column1' } as Column, gridStub);
diff --git a/packages/common/src/grouping-formatters/__tests__/avgTotalsFormatter.spec.ts b/packages/common/src/grouping-formatters/__tests__/avgTotalsFormatter.spec.ts
index bead2ba23..f68e6f7f7 100644
--- a/packages/common/src/grouping-formatters/__tests__/avgTotalsFormatter.spec.ts
+++ b/packages/common/src/grouping-formatters/__tests__/avgTotalsFormatter.spec.ts
@@ -1,11 +1,11 @@
-import { Column, GridOption } from '../../interfaces/index';
+import { Column, GridOption, SlickGrid } from '../../interfaces/index';
 import { avgTotalsFormatter } from '../avgTotalsFormatter';
 
 describe('avgTotalsFormatter', () => {
   // stub some methods of the SlickGrid Grid instance
   const gridStub = {
     getOptions: jest.fn()
-  };
+  } as unknown as SlickGrid;
 
   it('should display an empty string when no value is provided', () => {
     const output = avgTotalsFormatter({}, {} as Column);
@@ -78,7 +78,7 @@ describe('avgTotalsFormatter', () => {
   });
 
   it('should display a negative average with parentheses when input is negative and "displayNegativeNumberWithParentheses" is enabled in the Formatter Options', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true } } as GridOption);
+    (gridStub.getOptions as jest.Mock).mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true } } as GridOption);
     const columnDef = { id: 'column3', field: 'column3' } as Column;
     const totals = { avg: { column1: 123, column2: 345, column3: -2.4 } };
     const output = avgTotalsFormatter(totals, columnDef, gridStub);
@@ -108,7 +108,7 @@ describe('avgTotalsFormatter', () => {
   });
 
   it('should display an average number with user defined minimum & maximum decimal count in his grid option', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { minDecimal: 0, maxDecimal: 3, displayNegativeNumberWithParentheses: true } } as GridOption);
+    (gridStub.getOptions as jest.Mock).mockReturnValue({ formatterOptions: { minDecimal: 0, maxDecimal: 3, displayNegativeNumberWithParentheses: true } } as GridOption);
     const totals = { avg: { column1: 123.45678, column2: 345, column3: -2.45 } };
 
     const output1 = avgTotalsFormatter(totals, { id: 'column1', field: 'column1' } as Column, gridStub);
diff --git a/packages/common/src/grouping-formatters/__tests__/avgTotalsPercentageFormatter.spec.ts b/packages/common/src/grouping-formatters/__tests__/avgTotalsPercentageFormatter.spec.ts
index ae6a54d2d..71e8ad3ac 100644
--- a/packages/common/src/grouping-formatters/__tests__/avgTotalsPercentageFormatter.spec.ts
+++ b/packages/common/src/grouping-formatters/__tests__/avgTotalsPercentageFormatter.spec.ts
@@ -1,11 +1,11 @@
-import { Column, GridOption } from '../../interfaces/index';
+import { Column, GridOption, SlickGrid } from '../../interfaces/index';
 import { avgTotalsPercentageFormatter } from '../avgTotalsPercentageFormatter';
 
 describe('avgTotalsPercentageFormatter', () => {
   // stub some methods of the SlickGrid Grid instance
   const gridStub = {
     getOptions: jest.fn()
-  };
+  } as unknown as SlickGrid;
 
   it('should display an empty string when no value is provided', () => {
     const output = avgTotalsPercentageFormatter({}, {} as Column);
@@ -78,7 +78,7 @@ describe('avgTotalsPercentageFormatter', () => {
   });
 
   it('should display a negative average with parentheses when input is negative and "displayNegativeNumberWithParentheses" is enabled in the Formatter Options', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true } } as GridOption);
+    (gridStub.getOptions as jest.Mock).mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true } } as GridOption);
     const columnDef = { id: 'column3', field: 'column3' } as Column;
     const totals = { avg: { column1: 123, column2: 345, column3: -2.4 } };
     const output = avgTotalsPercentageFormatter(totals, columnDef, gridStub);
@@ -108,7 +108,7 @@ describe('avgTotalsPercentageFormatter', () => {
   });
 
   it('should display an average number with user defined minimum & maximum decimal count in his grid option', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { minDecimal: 0, maxDecimal: 3, displayNegativeNumberWithParentheses: true } } as GridOption);
+    (gridStub.getOptions as jest.Mock).mockReturnValue({ formatterOptions: { minDecimal: 0, maxDecimal: 3, displayNegativeNumberWithParentheses: true } } as GridOption);
     const totals = { avg: { column1: 123.45678, column2: 345, column3: -2.45 } };
 
     const output1 = avgTotalsPercentageFormatter(totals, { id: 'column1', field: 'column1' } as Column, gridStub);
diff --git a/packages/common/src/grouping-formatters/__tests__/maxTotalsFormatter.spec.ts b/packages/common/src/grouping-formatters/__tests__/maxTotalsFormatter.spec.ts
index 62710e9de..4894a4f8a 100644
--- a/packages/common/src/grouping-formatters/__tests__/maxTotalsFormatter.spec.ts
+++ b/packages/common/src/grouping-formatters/__tests__/maxTotalsFormatter.spec.ts
@@ -1,11 +1,11 @@
-import { Column, GridOption } from '../../interfaces/index';
+import { Column, GridOption, SlickGrid } from '../../interfaces/index';
 import { maxTotalsFormatter } from '../maxTotalsFormatter';
 
 describe('maxTotalsFormatter', () => {
   // stub some methods of the SlickGrid Grid instance
   const gridStub = {
     getOptions: jest.fn()
-  };
+  } as unknown as SlickGrid;
 
   it('should display an empty string when no value is provided', () => {
     const output = maxTotalsFormatter({}, {} as Column);
@@ -78,7 +78,7 @@ describe('maxTotalsFormatter', () => {
   });
 
   it('should display a negative sum with parentheses when input is negative and "displayNegativeNumberWithParentheses" is enabled in the Formatter Options', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true } } as GridOption);
+    (gridStub.getOptions as jest.Mock).mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true } } as GridOption);
     const columnDef = { id: 'column3', field: 'column3' } as Column;
     const totals = { max: { column1: 123, column2: 345, column3: -2.4 } };
     const output = maxTotalsFormatter(totals, columnDef, gridStub);
@@ -106,7 +106,7 @@ describe('maxTotalsFormatter', () => {
   });
 
   it('should display an sum number with user defined minimum & maximum decimal count in his grid option', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { minDecimal: 0, maxDecimal: 3, displayNegativeNumberWithParentheses: true } } as GridOption);
+    (gridStub.getOptions as jest.Mock).mockReturnValue({ formatterOptions: { minDecimal: 0, maxDecimal: 3, displayNegativeNumberWithParentheses: true } } as GridOption);
     const totals = { max: { column1: 123.45678, column2: 345, column3: -2.45 } };
 
     const output1 = maxTotalsFormatter(totals, { id: 'column1', field: 'column1' } as Column, gridStub);
diff --git a/packages/common/src/grouping-formatters/__tests__/minTotalsFormatter.spec.ts b/packages/common/src/grouping-formatters/__tests__/minTotalsFormatter.spec.ts
index c770cf814..caf44295c 100644
--- a/packages/common/src/grouping-formatters/__tests__/minTotalsFormatter.spec.ts
+++ b/packages/common/src/grouping-formatters/__tests__/minTotalsFormatter.spec.ts
@@ -1,11 +1,11 @@
-import { Column, GridOption } from '../../interfaces/index';
+import { Column, GridOption, SlickGrid } from '../../interfaces/index';
 import { minTotalsFormatter } from '../minTotalsFormatter';
 
 describe('minTotalsFormatter', () => {
   // stub some methods of the SlickGrid Grid instance
   const gridStub = {
     getOptions: jest.fn()
-  };
+  } as unknown as SlickGrid;
 
   it('should display an empty string when no value is provided', () => {
     const output = minTotalsFormatter({}, {} as Column);
@@ -78,7 +78,7 @@ describe('minTotalsFormatter', () => {
   });
 
   it('should display a negative sum with parentheses when input is negative and "displayNegativeNumberWithParentheses" is enabled in the Formatter Options', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true } } as GridOption);
+    (gridStub.getOptions as jest.Mock).mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true } } as GridOption);
     const columnDef = { id: 'column3', field: 'column3' } as Column;
     const totals = { min: { column1: 123, column2: 345, column3: -2.4 } };
     const output = minTotalsFormatter(totals, columnDef, gridStub);
@@ -106,7 +106,7 @@ describe('minTotalsFormatter', () => {
   });
 
   it('should display an sum number with user defined minimum & maximum decimal count in his grid option', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { minDecimal: 0, maxDecimal: 3, displayNegativeNumberWithParentheses: true } } as GridOption);
+    (gridStub.getOptions as jest.Mock).mockReturnValue({ formatterOptions: { minDecimal: 0, maxDecimal: 3, displayNegativeNumberWithParentheses: true } } as GridOption);
     const totals = { min: { column1: 123.45678, column2: 345, column3: -2.45 } };
 
     const output1 = minTotalsFormatter(totals, { id: 'column1', field: 'column1' } as Column, gridStub);
diff --git a/packages/common/src/grouping-formatters/__tests__/sumTotalsBoldFormatter.spec.ts b/packages/common/src/grouping-formatters/__tests__/sumTotalsBoldFormatter.spec.ts
index 7669ca969..56d5931b7 100644
--- a/packages/common/src/grouping-formatters/__tests__/sumTotalsBoldFormatter.spec.ts
+++ b/packages/common/src/grouping-formatters/__tests__/sumTotalsBoldFormatter.spec.ts
@@ -1,11 +1,11 @@
-import { Column, GridOption } from '../../interfaces/index';
+import { Column, GridOption, SlickGrid } from '../../interfaces/index';
 import { sumTotalsBoldFormatter } from '../sumTotalsBoldFormatter';
 
 describe('sumTotalsBoldFormatter', () => {
   // stub some methods of the SlickGrid Grid instance
   const gridStub = {
     getOptions: jest.fn()
-  };
+  } as unknown as SlickGrid;
 
   it('should display an empty string when no value is provided', () => {
     const output = sumTotalsBoldFormatter({}, {} as Column);
@@ -78,7 +78,7 @@ describe('sumTotalsBoldFormatter', () => {
   });
 
   it('should display a negative sum with parentheses when input is negative and "displayNegativeNumberWithParentheses" is enabled in the Formatter Options', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true } } as GridOption);
+    (gridStub.getOptions as jest.Mock).mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true } } as GridOption);
     const columnDef = { id: 'column3', field: 'column3' } as Column;
     const totals = { sum: { column1: 123, column2: 345, column3: -2.4 } };
     const output = sumTotalsBoldFormatter(totals, columnDef, gridStub);
@@ -106,7 +106,7 @@ describe('sumTotalsBoldFormatter', () => {
   });
 
   it('should display an sum number with user defined minimum & maximum decimal count in his grid option', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { minDecimal: 0, maxDecimal: 3, displayNegativeNumberWithParentheses: true } } as GridOption);
+    (gridStub.getOptions as jest.Mock).mockReturnValue({ formatterOptions: { minDecimal: 0, maxDecimal: 3, displayNegativeNumberWithParentheses: true } } as GridOption);
     const totals = { sum: { column1: 123.45678, column2: 345, column3: -2.45 } };
 
     const output1 = sumTotalsBoldFormatter(totals, { id: 'column1', field: 'column1' } as Column, gridStub);
diff --git a/packages/common/src/grouping-formatters/__tests__/sumTotalsColoredFormatter.spec.ts b/packages/common/src/grouping-formatters/__tests__/sumTotalsColoredFormatter.spec.ts
index 768a3ec17..ffc69fa0c 100644
--- a/packages/common/src/grouping-formatters/__tests__/sumTotalsColoredFormatter.spec.ts
+++ b/packages/common/src/grouping-formatters/__tests__/sumTotalsColoredFormatter.spec.ts
@@ -1,11 +1,11 @@
-import { Column, GridOption } from '../../interfaces/index';
+import { Column, GridOption, SlickGrid } from '../../interfaces/index';
 import { sumTotalsColoredFormatter } from '../sumTotalsColoredFormatter';
 
 describe('sumTotalsColoredFormatter', () => {
   // stub some methods of the SlickGrid Grid instance
   const gridStub = {
     getOptions: jest.fn()
-  };
+  } as unknown as SlickGrid;
 
   it('should display an empty string when no value is provided', () => {
     const output = sumTotalsColoredFormatter({}, {} as Column);
@@ -78,7 +78,7 @@ describe('sumTotalsColoredFormatter', () => {
   });
 
   it('should display a negative sum with parentheses when input is negative and "displayNegativeNumberWithParentheses" is enabled in the Formatter Options', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true } } as GridOption);
+    (gridStub.getOptions as jest.Mock).mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true } } as GridOption);
     const columnDef = { id: 'column3', field: 'column3' } as Column;
     const totals = { sum: { column1: 123, column2: 345, column3: -2.4 } };
     const output = sumTotalsColoredFormatter(totals, columnDef, gridStub);
@@ -106,7 +106,7 @@ describe('sumTotalsColoredFormatter', () => {
   });
 
   it('should display an sum number with user defined minimum & maximum decimal count in his grid option', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { minDecimal: 0, maxDecimal: 3, displayNegativeNumberWithParentheses: true } } as GridOption);
+    (gridStub.getOptions as jest.Mock).mockReturnValue({ formatterOptions: { minDecimal: 0, maxDecimal: 3, displayNegativeNumberWithParentheses: true } } as GridOption);
     const totals = { sum: { column1: 123.45678, column2: 345, column3: -2.45 } };
 
     const output1 = sumTotalsColoredFormatter(totals, { id: 'column1', field: 'column1' } as Column, gridStub);
diff --git a/packages/common/src/grouping-formatters/__tests__/sumTotalsDollarBoldFormatter.spec.ts b/packages/common/src/grouping-formatters/__tests__/sumTotalsDollarBoldFormatter.spec.ts
index 2712f4048..d54cfece6 100644
--- a/packages/common/src/grouping-formatters/__tests__/sumTotalsDollarBoldFormatter.spec.ts
+++ b/packages/common/src/grouping-formatters/__tests__/sumTotalsDollarBoldFormatter.spec.ts
@@ -1,11 +1,11 @@
-import { Column, GridOption } from '../../interfaces/index';
+import { Column, GridOption, SlickGrid } from '../../interfaces/index';
 import { sumTotalsDollarBoldFormatter } from '../sumTotalsDollarBoldFormatter';
 
 describe('sumTotalsDollarBoldFormatter', () => {
   // stub some methods of the SlickGrid Grid instance
   const gridStub = {
     getOptions: jest.fn()
-  };
+  } as unknown as SlickGrid;
 
   it('should display an empty string when no value is provided', () => {
     const output = sumTotalsDollarBoldFormatter({}, {} as Column);
@@ -78,7 +78,7 @@ describe('sumTotalsDollarBoldFormatter', () => {
   });
 
   it('should display a negative sum with parentheses when input is negative and "displayNegativeNumberWithParentheses" is enabled in the Formatter Options', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true } } as GridOption);
+    (gridStub.getOptions as jest.Mock).mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true } } as GridOption);
     const columnDef = { id: 'column3', field: 'column3' } as Column;
     const totals = { sum: { column1: 123, column2: 345, column3: -2.4 } };
     const output = sumTotalsDollarBoldFormatter(totals, columnDef, gridStub);
@@ -106,7 +106,7 @@ describe('sumTotalsDollarBoldFormatter', () => {
   });
 
   it('should display an sum number with user defined minimum & maximum decimal count in his grid option', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { minDecimal: 0, maxDecimal: 3, displayNegativeNumberWithParentheses: true } } as GridOption);
+    (gridStub.getOptions as jest.Mock).mockReturnValue({ formatterOptions: { minDecimal: 0, maxDecimal: 3, displayNegativeNumberWithParentheses: true } } as GridOption);
     const totals = { sum: { column1: 123.45678, column2: 345, column3: -2.45 } };
 
     const output1 = sumTotalsDollarBoldFormatter(totals, { id: 'column1', field: 'column1' } as Column, gridStub);
diff --git a/packages/common/src/grouping-formatters/__tests__/sumTotalsDollarColoredBoldFormatter.spec.ts b/packages/common/src/grouping-formatters/__tests__/sumTotalsDollarColoredBoldFormatter.spec.ts
index dd7db22a3..06a185954 100644
--- a/packages/common/src/grouping-formatters/__tests__/sumTotalsDollarColoredBoldFormatter.spec.ts
+++ b/packages/common/src/grouping-formatters/__tests__/sumTotalsDollarColoredBoldFormatter.spec.ts
@@ -1,11 +1,11 @@
-import { Column, GridOption } from '../../interfaces/index';
+import { Column, GridOption, SlickGrid } from '../../interfaces/index';
 import { sumTotalsDollarColoredBoldFormatter } from '../sumTotalsDollarColoredBoldFormatter';
 
 describe('sumTotalsDollarColoredBoldFormatter', () => {
   // stub some methods of the SlickGrid Grid instance
   const gridStub = {
     getOptions: jest.fn()
-  };
+  } as unknown as SlickGrid;
 
   it('should display an empty string when no value is provided', () => {
     const output = sumTotalsDollarColoredBoldFormatter({}, {} as Column);
@@ -78,7 +78,7 @@ describe('sumTotalsDollarColoredBoldFormatter', () => {
   });
 
   it('should display a negative sum in red with parentheses when input is negative and "displayNegativeNumberWithParentheses" is enabled in the Formatter Options', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true } } as GridOption);
+    (gridStub.getOptions as jest.Mock).mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true } } as GridOption);
     const columnDef = { id: 'column3', field: 'column3' } as Column;
     const totals = { sum: { column1: 123, column2: 345, column3: -2.4 } };
     const output = sumTotalsDollarColoredBoldFormatter(totals, columnDef, gridStub);
@@ -106,7 +106,7 @@ describe('sumTotalsDollarColoredBoldFormatter', () => {
   });
 
   it('should display an sum number with user defined minimum & maximum decimal count in his grid option', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { minDecimal: 0, maxDecimal: 3, displayNegativeNumberWithParentheses: true } } as GridOption);
+    (gridStub.getOptions as jest.Mock).mockReturnValue({ formatterOptions: { minDecimal: 0, maxDecimal: 3, displayNegativeNumberWithParentheses: true } } as GridOption);
     const totals = { sum: { column1: 123.45678, column2: 345, column3: -2.45 } };
 
     const output1 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column1', field: 'column1' } as Column, gridStub);
diff --git a/packages/common/src/grouping-formatters/__tests__/sumTotalsDollarColoredFormatter.spec.ts b/packages/common/src/grouping-formatters/__tests__/sumTotalsDollarColoredFormatter.spec.ts
index d9fde66c3..b8aeffaa3 100644
--- a/packages/common/src/grouping-formatters/__tests__/sumTotalsDollarColoredFormatter.spec.ts
+++ b/packages/common/src/grouping-formatters/__tests__/sumTotalsDollarColoredFormatter.spec.ts
@@ -1,11 +1,11 @@
-import { Column, GridOption } from '../../interfaces/index';
+import { Column, GridOption, SlickGrid } from '../../interfaces/index';
 import { sumTotalsDollarColoredFormatter } from '../sumTotalsDollarColoredFormatter';
 
 describe('sumTotalsDollarColoredFormatter', () => {
   // stub some methods of the SlickGrid Grid instance
   const gridStub = {
     getOptions: jest.fn()
-  };
+  } as unknown as SlickGrid;
 
   it('should display an empty string when no value is provided', () => {
     const output = sumTotalsDollarColoredFormatter({}, {} as Column);
@@ -78,7 +78,7 @@ describe('sumTotalsDollarColoredFormatter', () => {
   });
 
   it('should display a negative sum with parentheses when input is negative and "displayNegativeNumberWithParentheses" is enabled in the Formatter Options', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true } } as GridOption);
+    (gridStub.getOptions as jest.Mock).mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true } } as GridOption);
     const columnDef = { id: 'column3', field: 'column3' } as Column;
     const totals = { sum: { column1: 123, column2: 345, column3: -2.4 } };
     const output = sumTotalsDollarColoredFormatter(totals, columnDef, gridStub);
@@ -106,7 +106,7 @@ describe('sumTotalsDollarColoredFormatter', () => {
   });
 
   it('should display an sum number with user defined minimum & maximum decimal count in his grid option', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { minDecimal: 0, maxDecimal: 3, displayNegativeNumberWithParentheses: true } } as GridOption);
+    (gridStub.getOptions as jest.Mock).mockReturnValue({ formatterOptions: { minDecimal: 0, maxDecimal: 3, displayNegativeNumberWithParentheses: true } } as GridOption);
     const totals = { sum: { column1: 123.45678, column2: 345, column3: -2.45 } };
 
     const output1 = sumTotalsDollarColoredFormatter(totals, { id: 'column1', field: 'column1' } as Column, gridStub);
diff --git a/packages/common/src/grouping-formatters/__tests__/sumTotalsDollarFormatter.spec.ts b/packages/common/src/grouping-formatters/__tests__/sumTotalsDollarFormatter.spec.ts
index 81af0e46f..43ff35892 100644
--- a/packages/common/src/grouping-formatters/__tests__/sumTotalsDollarFormatter.spec.ts
+++ b/packages/common/src/grouping-formatters/__tests__/sumTotalsDollarFormatter.spec.ts
@@ -1,11 +1,11 @@
-import { Column, GridOption } from '../../interfaces/index';
+import { Column, GridOption, SlickGrid } from '../../interfaces/index';
 import { sumTotalsDollarFormatter } from '../sumTotalsDollarFormatter';
 
 describe('sumTotalsDollarFormatter', () => {
   // stub some methods of the SlickGrid Grid instance
   const gridStub = {
     getOptions: jest.fn()
-  };
+  } as unknown as SlickGrid;
 
   it('should display an empty string when no value is provided', () => {
     const output = sumTotalsDollarFormatter({}, {} as Column);
@@ -78,7 +78,7 @@ describe('sumTotalsDollarFormatter', () => {
   });
 
   it('should display a negative sum with parentheses when input is negative and "displayNegativeNumberWithParentheses" is enabled in the Formatter Options', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true } } as GridOption);
+    (gridStub.getOptions as jest.Mock).mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true } } as GridOption);
     const columnDef = { id: 'column3', field: 'column3' } as Column;
     const totals = { sum: { column1: 123, column2: 345, column3: -2.4 } };
     const output = sumTotalsDollarFormatter(totals, columnDef, gridStub);
@@ -106,7 +106,7 @@ describe('sumTotalsDollarFormatter', () => {
   });
 
   it('should display an sum number with user defined minimum & maximum decimal count in his grid option', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { minDecimal: 0, maxDecimal: 3, displayNegativeNumberWithParentheses: true } } as GridOption);
+    (gridStub.getOptions as jest.Mock).mockReturnValue({ formatterOptions: { minDecimal: 0, maxDecimal: 3, displayNegativeNumberWithParentheses: true } } as GridOption);
     const totals = { sum: { column1: 123.45678, column2: 345, column3: -2.45 } };
 
     const output1 = sumTotalsDollarFormatter(totals, { id: 'column1', field: 'column1' } as Column, gridStub);
diff --git a/packages/common/src/grouping-formatters/__tests__/sumTotalsFormatter.spec.ts b/packages/common/src/grouping-formatters/__tests__/sumTotalsFormatter.spec.ts
index c770d20ee..32e605187 100644
--- a/packages/common/src/grouping-formatters/__tests__/sumTotalsFormatter.spec.ts
+++ b/packages/common/src/grouping-formatters/__tests__/sumTotalsFormatter.spec.ts
@@ -1,11 +1,11 @@
-import { Column, GridOption } from '../../interfaces/index';
+import { Column, GridOption, SlickGrid } from '../../interfaces/index';
 import { sumTotalsFormatter } from '../sumTotalsFormatter';
 
 describe('sumTotalsFormatter', () => {
   // stub some methods of the SlickGrid Grid instance
   const gridStub = {
     getOptions: jest.fn()
-  };
+  } as unknown as SlickGrid;
 
   it('should display an empty string when no value is provided', () => {
     const output = sumTotalsFormatter({}, {} as Column);
@@ -80,7 +80,7 @@ describe('sumTotalsFormatter', () => {
   });
 
   it('should display a negative sum with parentheses when input is negative and "displayNegativeNumberWithParentheses" is enabled in the Formatter Options', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true } } as GridOption);
+    (gridStub.getOptions as jest.Mock).mockReturnValue({ formatterOptions: { displayNegativeNumberWithParentheses: true } } as GridOption);
     const columnDef = { id: 'column3', field: 'column3' } as Column;
     const totals = { sum: { column1: 123, column2: 345, column3: -2.4 } };
     const output = sumTotalsFormatter(totals, columnDef, gridStub);
@@ -110,7 +110,7 @@ describe('sumTotalsFormatter', () => {
   });
 
   it('should display an sum number with user defined minimum & maximum decimal count in his grid option', () => {
-    gridStub.getOptions.mockReturnValue({ formatterOptions: { minDecimal: 0, maxDecimal: 3, displayNegativeNumberWithParentheses: true } } as GridOption);
+    (gridStub.getOptions as jest.Mock).mockReturnValue({ formatterOptions: { minDecimal: 0, maxDecimal: 3, displayNegativeNumberWithParentheses: true } } as GridOption);
     const totals = { sum: { column1: 123.45678, column2: 345, column3: -2.45 } };
 
     const output1 = sumTotalsFormatter(totals, { id: 'column1', field: 'column1' } as Column, gridStub);
diff --git a/packages/common/src/interfaces/cellArgs.interface.ts b/packages/common/src/interfaces/cellArgs.interface.ts
index 034c33508..cea30d9d7 100644
--- a/packages/common/src/interfaces/cellArgs.interface.ts
+++ b/packages/common/src/interfaces/cellArgs.interface.ts
@@ -1,6 +1,8 @@
+import { SlickGrid } from './slickGrid.interface';
+
 export interface CellArgs {
   row: number;
   cell: number;
-  grid: any; // TODO replace by the Slickgrid Object
+  grid: SlickGrid;
   item?: any;
 }
diff --git a/packages/common/src/interfaces/cellMenu.interface.ts b/packages/common/src/interfaces/cellMenu.interface.ts
index f84a39a28..b8f0d7f91 100644
--- a/packages/common/src/interfaces/cellMenu.interface.ts
+++ b/packages/common/src/interfaces/cellMenu.interface.ts
@@ -3,6 +3,7 @@ import { MenuCommandItem } from './menuCommandItem.interface';
 import { MenuCommandItemCallbackArgs } from './menuCommandItemCallbackArgs.interface';
 import { MenuOptionItem } from './menuOptionItem.interface';
 import { MenuOptionItemCallbackArgs } from './menuOptionItemCallbackArgs.interface';
+import { SlickGrid } from './slickGrid.interface';
 
 export interface CellMenu {
   /** Defaults to true, Auto-align dropup or dropdown menu to the left or right depending on grid viewport available space */
@@ -66,13 +67,13 @@ export interface CellMenu {
   onExtensionRegistered?: (plugin: any) => void;
 
   /** SlickGrid Event fired After the menu is shown. */
-  onAfterMenuShow?: (e: Event, args: { cell: number; row: number; grid: any; }) => void;
+  onAfterMenuShow?: (e: Event, args: { cell: number; row: number; grid: SlickGrid; }) => void;
 
   /** SlickGrid Event fired Before the menu is shown. */
-  onBeforeMenuShow?: (e: Event, args: { cell: number; row: number; grid: any; }) => void;
+  onBeforeMenuShow?: (e: Event, args: { cell: number; row: number; grid: SlickGrid; }) => void;
 
   /** SlickGrid Event fired when the menu is closing. */
-  onBeforeMenuClose?: (e: Event, args: { cell: number; row: number; grid: any; menu: any; }) => void;
+  onBeforeMenuClose?: (e: Event, args: { cell: number; row: number; grid: SlickGrid; menu: any; }) => void;
 
   /** SlickGrid Event fired on menu option clicked from the Command items list */
   onCommand?: (e: Event, args: MenuCommandItemCallbackArgs) => void;
diff --git a/packages/common/src/interfaces/checkboxSelector.interface.ts b/packages/common/src/interfaces/checkboxSelector.interface.ts
index 703e4d332..63cbf0580 100644
--- a/packages/common/src/interfaces/checkboxSelector.interface.ts
+++ b/packages/common/src/interfaces/checkboxSelector.interface.ts
@@ -1,3 +1,5 @@
+import { SlickGrid } from './slickGrid.interface';
+
 export interface CheckboxSelector {
   /** Defaults to "_checkbox_selector", you can provide a different column id used as the column header id */
   columnId?: string;
@@ -28,5 +30,5 @@ export interface CheckboxSelector {
   width?: number;
 
   /** Override the logic for showing (or not) the expand icon (use case example: only every 2nd row is expandable) */
-  selectableOverride?: (row: number, dataContext: any, grid: any) => boolean;
+  selectableOverride?: (row: number, dataContext: any, grid: SlickGrid) => boolean;
 }
diff --git a/packages/common/src/interfaces/columnSort.interface.ts b/packages/common/src/interfaces/columnSort.interface.ts
index 9175e290a..4d9f242e7 100644
--- a/packages/common/src/interfaces/columnSort.interface.ts
+++ b/packages/common/src/interfaces/columnSort.interface.ts
@@ -14,5 +14,5 @@ export interface ColumnSort {
   sortAsc: boolean;
 
   /** Column to be sorted */
-  sortCol: Column;
+  sortCol?: Column;
 }
diff --git a/packages/common/src/interfaces/contextMenu.interface.ts b/packages/common/src/interfaces/contextMenu.interface.ts
index d8973219b..066f9e999 100644
--- a/packages/common/src/interfaces/contextMenu.interface.ts
+++ b/packages/common/src/interfaces/contextMenu.interface.ts
@@ -3,6 +3,7 @@ import { MenuCommandItem } from './menuCommandItem.interface';
 import { MenuCommandItemCallbackArgs } from './menuCommandItemCallbackArgs.interface';
 import { MenuOptionItem } from './menuOptionItem.interface';
 import { MenuOptionItemCallbackArgs } from './menuOptionItemCallbackArgs.interface';
+import { SlickGrid } from './slickGrid.interface';
 
 export interface ContextMenu {
   /** Defaults to true, Auto-align dropup or dropdown menu to the left or right depending on grid viewport available space */
@@ -114,13 +115,13 @@ export interface ContextMenu {
   onExtensionRegistered?: (plugin: any) => void;
 
   /** SlickGrid Event fired After the menu is shown. */
-  onAfterMenuShow?: (e: Event, args: { cell: number; row: number; grid: any; }) => void;
+  onAfterMenuShow?: (e: Event, args: { cell: number; row: number; grid: SlickGrid; }) => void;
 
   /** SlickGrid Event fired Before the menu is shown. */
-  onBeforeMenuShow?: (e: Event, args: { cell: number; row: number; grid: any; }) => void;
+  onBeforeMenuShow?: (e: Event, args: { cell: number; row: number; grid: SlickGrid; }) => void;
 
   /** SlickGrid Event fired when the menu is closing. */
-  onBeforeMenuClose?: (e: Event, args: { cell: number; row: number; grid: any; menu: any; }) => void;
+  onBeforeMenuClose?: (e: Event, args: { cell: number; row: number; grid: SlickGrid; menu: any; }) => void;
 
   /** SlickGrid Event fired on menu option clicked from the Command items list */
   onCommand?: (e: Event, args: MenuCommandItemCallbackArgs) => void;
diff --git a/packages/common/src/interfaces/dataView.interface.ts b/packages/common/src/interfaces/dataView.interface.ts
new file mode 100644
index 000000000..7f53d5b31
--- /dev/null
+++ b/packages/common/src/interfaces/dataView.interface.ts
@@ -0,0 +1,205 @@
+import { Grouping } from './grouping.interface';
+import { PagingInfo } from './pagingInfo.interface';
+import { SlickEvent } from './slickEvent.interface';
+import { SlickGrid } from './slickGrid.interface';
+
+export interface DataView {
+  // --
+  // Available Methods
+
+  /** Add an item to the dataset */
+  addItem: (item: any) => void;
+
+  /** Begin Data Update Transaction */
+  beginUpdate: () => void;
+
+  /** Collapse all Groups, optionally pass a level number to only collapse that level */
+  collapseAllGroups: (level?: number) => void;
+
+  /**
+   * Collapse a Group by passing either a Slick.Group's "groupingKey" property, or a
+   * variable argument list of grouping values denoting a unique path to the row.
+   * For example, calling collapseGroup('high', '10%') will collapse the '10%' subgroup of the 'high' group.
+   */
+  collapseGroup: (...args: any) => void;
+
+  /** Delete an item from the dataset */
+  deleteItem: (id: string | number) => void;
+
+  /** End Data Update Transaction */
+  endUpdate: () => void;
+
+  /** Expand all Groups, optionally pass a level number to only expand that level */
+  expandAllGroups: (level?: number) => void;
+
+  /** Expand or Collapse all Groups */
+  expandCollapseAllGroups: (level: number, collapse: boolean) => void;
+
+  /** Expand or Collapse a specific Group by its grouping key */
+  expandCollapseGroup: (level: number, groupingKey: string | number, collapse: boolean) => void;
+
+  /**
+   * Expand a Group by passing either a Slick.Group's "groupingKey" property, or a
+   * variable argument list of grouping values denoting a unique path to the row.
+   * For example, calling collapseGroup('high', '10%') will collapse the '10%' subgroup of the 'high' group.
+   */
+  expandGroup: (...args: any) => void;
+
+  /**
+   * Provides a workaround for the extremely slow sorting in IE.
+   * Does a [lexicographic] sort on a give column by temporarily overriding Object.prototype.toString
+   * to return the value of that field and then doing a native Array.sort().
+   */
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  fastSort: (field: string | Function, ascending: boolean) => void;
+
+  /** Get current Filter used by the DataView */
+  getFilter: () => any;
+
+  /** Get only the dataset filtered items */
+  getFilteredItems: <T = any>() => T[];
+
+  /** Get current Grouping info */
+  getGrouping: () => Grouping[];
+
+  /** Get current Grouping groups */
+  getGroups: () => any[];
+
+  /** Get the DataView Id property name to use (defaults to "Id" but could be customized to something else when instantiating the DataView) */
+  getIdPropertyName: () => string;
+
+  /** Get all Dataset Items */
+  getItems: <T = any>() => T[];
+
+  /** Get dataset item at specific index */
+  getItem: <T = any>(index: number) => T;
+
+  /** Get an item in the dataset by its Id */
+  getItemById: <T = any>(id: string | number) => T;
+
+  /** Get an item in the dataset by its row index */
+  getItemByIdx: (idx: number) => number;
+
+  /** Get row index in the dataset by its Id */
+  getIdxById: (id: string | number) => number;
+
+  /** Get item metadata at specific index */
+  getItemMetadata: (index: number) => any;
+
+  /** Get dataset length */
+  getLength: () => number;
+
+  /** Get Paging Options */
+  getPagingInfo: () => PagingInfo;
+
+  /** Get row number of an item in the dataset */
+  getRowByItem: (item: any) => number;
+
+  /** Get row number of an item in the dataset by its Id */
+  getRowById: (id: string | number) => number;
+
+  /** Insert an item to the dataset before a specific index */
+  insertItem: (insertBefore: number, item: any) => void;
+
+  /** From the items array provided, return the mapped rows */
+  mapItemsToRows: (items: any[]) => number[];
+
+  /** From the Ids array provided, return the mapped rows */
+  mapIdsToRows: (ids: Array<number | string>) => number[];
+
+  /** From the rows array provided, return the mapped Ids */
+  mapRowsToIds: (rows: Array<number>) => Array<number | string>;
+
+  /** Refresh the DataView */
+  refresh: () => void;
+
+  /** Re-Sort the dataset */
+  reSort: () => void;
+
+  /** Set some Grouping */
+  setGrouping: (groupingInfo: Grouping | Grouping[]) => void;
+
+  /** Set a Filter that:  will be used by the DataView */
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  setFilter: (filterFn: Function) => void;
+
+  /** Set the Items with a new Dataset and optionally pass a different Id property name */
+  setItems: (data: any[], objectIdProperty?: string) => void;
+
+  /** Set Paging Options */
+  setPagingOptions: (args: PagingInfo) => void;
+
+  setRefreshHints: (hints: any) => void;
+
+  /** Set extra Filter arguments which will be used by the Filter method */
+  setFilterArgs: (args: any) => void;
+
+  /** Sort Method to use by the DataView */
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  sort: (comparer: Function, ascending?: boolean) => void;
+
+  /** Add an item in a sorted dataset (a Sort function must be defined) */
+  sortedAddItem: (item: any) => void;
+
+  /** Update an item in a sorted dataset (a Sort function must be defined) */
+  sortedUpdateItem: (id: string | number, item: number) => void;
+
+  /** Get the sorted index of the item to search */
+  sortedIndex: (searchItem: any) => number;
+
+  /**
+   * Wires the grid and the DataView together to keep row selection tied to item ids.
+   * This is useful since, without it, the grid only knows about rows, so if the items
+   * move around, the same rows stay selected instead of the selection moving along
+   * with the items.
+   *
+   * NOTE:  This doesn't work with cell selection model.
+   *
+   * @param grid {Slick.Grid} The grid to sync selection with.
+   * @param preserveHidden {Boolean} Whether to keep selected items that go out of the
+   *     view due to them getting filtered out.
+   * @param preserveHiddenOnSelectionChange {Boolean} Whether to keep selected items
+   *     that are currently out of the view (see preserveHidden) as selected when selection
+   *     changes.
+   * @return {Slick.Event} An event that notifies when an internal list of selected row ids
+   *     changes.  This is useful since, in combination with the above two options, it allows
+   *     access to the full list selected row ids, and not just the ones visible to the grid.
+   */
+  syncGridSelection: (grid: SlickGrid, preserveHidden: boolean, preserveHiddenOnSelectionChange?: boolean) => SlickEvent;
+
+  syncGridCellCssStyles: (grid: SlickGrid, key: string) => void;
+
+  /** Update a specific Index */
+  updateIdxById: (startingIndex: number) => void;
+
+  /** Update an item in the dataset by its Id */
+  updateItem: (id: string | number, item: any) => void;
+
+  // ---------------------------
+  // Available DataView Events
+  // ---------------------------
+
+  /** Event triggered when "setItems" function is called */
+  onSetItemsCalled: SlickEvent;
+
+  /** Event triggered when the dataset row count changes */
+  onRowCountChanged: SlickEvent;
+
+  /** Event triggered when any of the row got changed */
+  onRowsChanged: SlickEvent;
+
+  /** Event triggered when the  dataset row count changes OR any of the row got changed */
+  onRowsOrCountChanged: SlickEvent;
+
+  /** Event triggered when before Paging Info got changed */
+  onBeforePagingInfoChanged: SlickEvent;
+
+  /** Event triggered while Paging Info is getting changed */
+  onPagingInfoChanged: SlickEvent;
+
+  /** Event triggered while Grouping is Expanding */
+  onGroupExpanded: SlickEvent;
+
+  /** Event triggered while Grouping is Collapsing */
+  onGroupCollapsed: SlickEvent;
+}
diff --git a/packages/common/src/interfaces/editorArgs.interface.ts b/packages/common/src/interfaces/editorArgs.interface.ts
index daa3f3b31..fa07cfc65 100644
--- a/packages/common/src/interfaces/editorArgs.interface.ts
+++ b/packages/common/src/interfaces/editorArgs.interface.ts
@@ -1,9 +1,10 @@
 import { Column, ElementPosition } from './index';
+import { SlickGrid } from './slickGrid.interface';
 
 export interface EditorArgs {
   column: Column;
   container: HTMLDivElement;
-  grid: any;
+  grid: SlickGrid;
   gridPosition: ElementPosition;
   item: any;
   position: ElementPosition;
diff --git a/packages/common/src/interfaces/editorArguments.interface.ts b/packages/common/src/interfaces/editorArguments.interface.ts
index 713d2dc3a..4da62c4bf 100644
--- a/packages/common/src/interfaces/editorArguments.interface.ts
+++ b/packages/common/src/interfaces/editorArguments.interface.ts
@@ -1,12 +1,12 @@
-import { Column, ElementPosition } from './index';
+import { Column, DataView, ElementPosition, SlickGrid } from './index';
 
 export interface EditorArguments {
   column: Column;
   columnMetaData: any;
   container: HTMLDivElement;
-  dataView: any;
+  dataView: DataView;
   event: Event;
-  grid: any;
+  grid: SlickGrid;
   gridPosition: ElementPosition;
   item: any;
   position: ElementPosition;
diff --git a/packages/common/src/interfaces/filter.interface.ts b/packages/common/src/interfaces/filter.interface.ts
index ec1dfd3b0..16cda4f47 100644
--- a/packages/common/src/interfaces/filter.interface.ts
+++ b/packages/common/src/interfaces/filter.interface.ts
@@ -1,4 +1,4 @@
-import { Column, FilterArguments, FilterCallback, } from './index';
+import { Column, FilterArguments, FilterCallback, SlickGrid } from './index';
 import { OperatorType, OperatorString, SearchTerm, } from '../enums/index';
 
 // export type Filter = (searchTerms: string | number | string[] | number[], columnDef: Column, params?: any) => string;
@@ -12,7 +12,7 @@ export interface Filter {
   callback: FilterCallback;
 
   /** SlickGrid grid object */
-  grid: any;
+  grid: SlickGrid;
 
   /** Array of defined search terms to pre-load */
   searchTerms?: SearchTerm[];
diff --git a/packages/common/src/interfaces/filterArguments.interface.ts b/packages/common/src/interfaces/filterArguments.interface.ts
index ae312f611..5909dab68 100644
--- a/packages/common/src/interfaces/filterArguments.interface.ts
+++ b/packages/common/src/interfaces/filterArguments.interface.ts
@@ -1,8 +1,8 @@
-import { Column, FilterCallback } from './index';
+import { Column, FilterCallback, SlickGrid } from './index';
 import { OperatorString, OperatorType, SearchTerm } from '../enums/index';
 
 export interface FilterArguments {
-  grid: any;
+  grid: SlickGrid;
   columnDef: Column;
   callback: FilterCallback;
   operator?: OperatorType | OperatorString;
diff --git a/packages/common/src/interfaces/filterChangedArgs.interface.ts b/packages/common/src/interfaces/filterChangedArgs.interface.ts
index f48d098b3..17fc065ee 100644
--- a/packages/common/src/interfaces/filterChangedArgs.interface.ts
+++ b/packages/common/src/interfaces/filterChangedArgs.interface.ts
@@ -1,14 +1,15 @@
-import { SearchTerm } from '../enums/searchTerm.type';
 import { Column } from './column.interface';
 import { ColumnFilters } from './columnFilters.interface';
 import { OperatorType } from '../enums/operatorType.enum';
 import { OperatorString } from '../enums/operatorString.type';
+import { SearchTerm } from '../enums/searchTerm.type';
+import { SlickGrid } from './slickGrid.interface';
 
 export interface FilterChangedArgs {
   clearFilterTriggered?: boolean;
   columnDef: Column;
   columnFilters: ColumnFilters;
-  grid: any;
+  grid: SlickGrid;
   operator: OperatorType | OperatorString;
   searchTerms: SearchTerm[];
   shouldTriggerQuery?: boolean;
diff --git a/packages/common/src/interfaces/formatter.interface.ts b/packages/common/src/interfaces/formatter.interface.ts
index baa5c8d46..0b448d487 100644
--- a/packages/common/src/interfaces/formatter.interface.ts
+++ b/packages/common/src/interfaces/formatter.interface.ts
@@ -1,4 +1,5 @@
 import { Column } from './column.interface';
 import { FormatterResultObject } from './formatterResultObject.interface';
+import { SlickGrid } from './slickGrid.interface';
 
-export declare type Formatter = (row: number, cell: number, value: any, columnDef?: Column, dataContext?: any, grid?: any) => string | FormatterResultObject;
+export declare type Formatter = (row: number, cell: number, value: any, columnDef?: Column, dataContext?: any, grid?: SlickGrid) => string | FormatterResultObject;
diff --git a/packages/common/src/interfaces/gridMenu.interface.ts b/packages/common/src/interfaces/gridMenu.interface.ts
index bff81413c..6bcf56807 100644
--- a/packages/common/src/interfaces/gridMenu.interface.ts
+++ b/packages/common/src/interfaces/gridMenu.interface.ts
@@ -2,6 +2,7 @@ import { Column } from './column.interface';
 import { GridMenuItem } from './gridMenuItem.interface';
 import { MenuCallbackArgs } from './menuCallbackArgs.interface';
 import { MenuCommandItemCallbackArgs } from './menuCommandItemCallbackArgs.interface';
+import { SlickGrid } from './slickGrid.interface';
 
 export interface GridMenu {
   /** Defaults to 0 (auto), minimum width of grid menu content (command, column list) */
@@ -129,16 +130,16 @@ export interface GridMenu {
   onExtensionRegistered?: (plugin: any) => void;
 
   /** SlickGrid Event fired After the menu is shown. */
-  onAfterMenuShow?: (e: Event, args: { grid: any; menu: any; columns: Column[] }) => void;
+  onAfterMenuShow?: (e: Event, args: { grid: SlickGrid; menu: any; columns: Column[] }) => void;
 
   /** SlickGrid Event fired Before the menu is shown. */
-  onBeforeMenuShow?: (e: Event, args: { grid: any; menu: any; columns: Column[] }) => void;
+  onBeforeMenuShow?: (e: Event, args: { grid: SlickGrid; menu: any; columns: Column[] }) => void;
 
   /** SlickGrid Event fired when any of the columns checkbox selection changes. */
-  onColumnsChanged?: (e: Event, args: { grid: any; allColumns: Column[]; columns: Column[]; }) => void;
+  onColumnsChanged?: (e: Event, args: { grid: SlickGrid; allColumns: Column[]; columns: Column[]; }) => void;
 
   /** SlickGrid Event fired when the menu is closing. */
-  onMenuClose?: (e: Event, args: { grid: any; menu: any; allColumns: Column[], visibleColumns: Column[] }) => void;
+  onMenuClose?: (e: Event, args: { grid: SlickGrid; menu: any; allColumns: Column[], visibleColumns: Column[] }) => void;
 
   /** SlickGrid Event fired on menu option clicked from the Command items list */
   onCommand?: (e: Event, args: MenuCommandItemCallbackArgs) => void;
diff --git a/packages/common/src/interfaces/gridMenuItem.interface.ts b/packages/common/src/interfaces/gridMenuItem.interface.ts
index 2a656c1d6..a4645351c 100644
--- a/packages/common/src/interfaces/gridMenuItem.interface.ts
+++ b/packages/common/src/interfaces/gridMenuItem.interface.ts
@@ -1,4 +1,5 @@
 import { Column } from './column.interface';
+import { SlickGrid } from './slickGrid.interface';
 
 export interface GridMenuItem {
   /** A command identifier to be passed to the onCommand event callback handlers. */
@@ -38,11 +39,11 @@ export interface GridMenuItem {
   // action/override callbacks
 
   /** Optionally define a callback function that gets executed when item is chosen (and/or use the onCommand event) */
-  action?: (event: Event, callbackArgs: { command: string; grid: any; menu: any; columns: Column[]; visibleColumns: Column[] }) => void;
+  action?: (event: Event, callbackArgs: { command: string; grid: SlickGrid; menu: any; columns: Column[]; visibleColumns: Column[] }) => void;
 
   /** Callback method that user can override the default behavior of showing/hiding an item from the list. */
-  itemVisibilityOverride?: (args: { grid: any; menu: any; columns: Column[]; visibleColumns: Column[] }) => boolean;
+  itemVisibilityOverride?: (args: { grid: SlickGrid; menu: any; columns: Column[]; visibleColumns: Column[] }) => boolean;
 
   /** Callback method that user can override the default behavior of enabling/disabling an item from the list. */
-  itemUsabilityOverride?: (args: { grid: any; menu: any; columns: Column[]; visibleColumns: Column[] }) => boolean;
+  itemUsabilityOverride?: (args: { grid: SlickGrid; menu: any; columns: Column[]; visibleColumns: Column[] }) => boolean;
 }
diff --git a/packages/common/src/interfaces/gridOption.interface.ts b/packages/common/src/interfaces/gridOption.interface.ts
index 75cc42d30..7ea2137fe 100644
--- a/packages/common/src/interfaces/gridOption.interface.ts
+++ b/packages/common/src/interfaces/gridOption.interface.ts
@@ -396,6 +396,9 @@ export interface GridOption {
   /** Register 1 or more Slick Plugins */
   registerPlugins?: any | any[];
 
+  /** Register any external Services like the ExcelExportService, FileExportService, ... */
+  registerExternalServices?: any[];
+
   /** Row Detail View Plugin options & events (columnId, cssClass, toolTip, width) */
   // rowDetailView?: RowDetailView;
 
diff --git a/packages/common/src/interfaces/grouping.interface.ts b/packages/common/src/interfaces/grouping.interface.ts
index f807dee08..e29ac0a93 100644
--- a/packages/common/src/interfaces/grouping.interface.ts
+++ b/packages/common/src/interfaces/grouping.interface.ts
@@ -6,15 +6,18 @@ import { SortDirectionNumber } from '../enums/sortDirectionNumber.enum';
 export type GroupingGetterFunction = (value: any) => string;
 
 export interface Grouping {
-  /** Getter of the Column to be Grouped */
-  getter?: string | GroupingGetterFunction;
-
   /** Grouping Aggregators array */
   aggregators?: Aggregator[];
 
+  /** Defaults to false, are we aggregating child grouping? */
+  aggregateChildGroups?: boolean;
+
   /** Defaults to false, are the Aggregator Collapsed when grid is loaded */
   aggregateCollapsed?: boolean;
 
+  /** Defaults to false, are we aggregating empty grouping? */
+  aggregateEmpty?: boolean;
+
   /** Defaults to false, is the Group Collapsed when grid is loaded */
   collapsed?: boolean;
 
@@ -27,6 +30,9 @@ export interface Grouping {
   /** String Formatter of the Grouping Header */
   formatter?: (g: GroupingFormatterItem) => string;
 
+  /** Getter of the Column to be Grouped */
+  getter?: string | GroupingGetterFunction;
+
   /** Defaults to false, lazy load the Group Totals Calculation */
   lazyTotalsCalculation?: boolean;
 
diff --git a/packages/common/src/interfaces/headerButtonItem.interface.ts b/packages/common/src/interfaces/headerButtonItem.interface.ts
index 4abbe27a2..2e52df52a 100644
--- a/packages/common/src/interfaces/headerButtonItem.interface.ts
+++ b/packages/common/src/interfaces/headerButtonItem.interface.ts
@@ -1,4 +1,5 @@
 import { Column } from './column.interface';
+import { SlickGrid } from './slickGrid.interface';
 
 export interface HeaderButtonItem {
   /** A command identifier to be passed to the onCommand event handlers. */
@@ -23,11 +24,11 @@ export interface HeaderButtonItem {
   // action/override callbacks
 
   /** Optionally define a callback function that gets executed when item is chosen (and/or use the onCommand event) */
-  action?: (event: Event, callbackArgs: { command: string; button: any; column: Column; grid: any; }) => void;
+  action?: (event: Event, callbackArgs: { command: string; button: any; column: Column; grid: SlickGrid; }) => void;
 
   /** Callback method that user can override the default behavior of showing/hiding an item from the list. */
-  itemVisibilityOverride?: (args: { node: any; column: Column; grid: any; }) => boolean;
+  itemVisibilityOverride?: (args: { node: any; column: Column; grid: SlickGrid; }) => boolean;
 
   /** Callback method that user can override the default behavior of enabling/disabling an item from the list. */
-  itemUsabilityOverride?: (args: { node: any; column: Column; grid: any; }) => boolean;
+  itemUsabilityOverride?: (args: { node: any; column: Column; grid: SlickGrid; }) => boolean;
 }
diff --git a/packages/common/src/interfaces/headerButtonOnCommandArgs.interface.ts b/packages/common/src/interfaces/headerButtonOnCommandArgs.interface.ts
index 13333e114..0a7ccbe2c 100644
--- a/packages/common/src/interfaces/headerButtonOnCommandArgs.interface.ts
+++ b/packages/common/src/interfaces/headerButtonOnCommandArgs.interface.ts
@@ -1,8 +1,9 @@
 import { Column } from './column.interface';
 import { HeaderButtonItem } from './headerButtonItem.interface';
+import { SlickGrid } from './slickGrid.interface';
 
 export interface HeaderButtonOnCommandArgs {
-  grid: any;
+  grid: SlickGrid;
   column: Column;
   command: string;
   button: HeaderButtonItem;
diff --git a/packages/common/src/interfaces/headerMenu.interface.ts b/packages/common/src/interfaces/headerMenu.interface.ts
index c0964c269..00b21d878 100644
--- a/packages/common/src/interfaces/headerMenu.interface.ts
+++ b/packages/common/src/interfaces/headerMenu.interface.ts
@@ -1,5 +1,6 @@
 import { Column } from './column.interface';
 import { MenuCommandItemCallbackArgs } from './menuCommandItemCallbackArgs.interface';
+import { SlickGrid } from './slickGrid.interface';
 
 export interface HeaderMenu {
   /** Auto-align drop menu to the left when not enough viewport space to show on the right */
@@ -79,10 +80,10 @@ export interface HeaderMenu {
   onExtensionRegistered?: (plugin: any) => void;
 
   /** Fired After the header menu shows up. */
-  onAfterMenuShow?: (e: Event, args: { grid: any; column: Column; menu: any; }) => void;
+  onAfterMenuShow?: (e: Event, args: { grid: SlickGrid; column: Column; menu: any; }) => void;
 
   /** Fired Before the header menu shows up. */
-  onBeforeMenuShow?: (e: Event, args: { grid: any; column: Column; menu: any; }) => void;
+  onBeforeMenuShow?: (e: Event, args: { grid: SlickGrid; column: Column; menu: any; }) => void;
 
   /** Fired when a command is clicked */
   onCommand?: (e: Event, args: MenuCommandItemCallbackArgs) => void;
diff --git a/packages/common/src/interfaces/index.ts b/packages/common/src/interfaces/index.ts
index b9b96b616..c5bcff360 100644
--- a/packages/common/src/interfaces/index.ts
+++ b/packages/common/src/interfaces/index.ts
@@ -18,13 +18,14 @@ export * from './columnFilter.interface';
 export * from './columnFilters.interface';
 export * from './columnPicker.interface';
 export * from './columnSort.interface';
+export * from './contextMenu.interface';
 export * from './currentColumn.interface';
 export * from './currentFilter.interface';
 export * from './currentPagination.interface';
 export * from './currentRowSelection.interface';
 export * from './currentSorter.interface';
-export * from './contextMenu.interface';
 export * from './customFooterOption.interface';
+export * from './dataView.interface';
 export * from './draggableGrouping.interface';
 export * from './editCommand.interface';
 export * from './editor.interface';
@@ -59,7 +60,6 @@ export * from './gridMenuItem.interface';
 export * from './gridOption.interface';
 export * from './gridServiceDeleteOption.interface';
 export * from './gridServiceInsertOption.interface';
-export * from './gridServiceUpdateOption.interface';
 export * from './gridState.interface';
 export * from './gridStateChange.interface';
 export * from './grouping.interface';
@@ -71,30 +71,33 @@ export * from './headerButtonItem.interface';
 export * from './headerButtonOnCommandArgs.interface';
 export * from './headerMenu.interface';
 export * from './htmlElementPosition.interface';
-export * from './jQueryUiSliderOption.interface';
+export * from './gridServiceUpdateOption.interface';
 export * from './jQueryUiSliderResponse.interface';
 export * from './keyTitlePair.interface';
 export * from './locale.interface';
+export * from './menuCallbackArgs.interface';
 export * from './menuCommandItem.interface';
 export * from './menuCommandItemCallbackArgs.interface';
 export * from './menuItem.interface';
 export * from './menuOptionItem.interface';
 export * from './menuOptionItemCallbackArgs.interface';
 export * from './metrics.interface';
+export * from './jQueryUiSliderOption.interface';
 export * from './multiColumnSort.interface';
-export * from './multipleSelectOption.interface';
 export * from './onEventArgs.interface';
+export * from './multipleSelectOption.interface';
 export * from './onValidationErrorResult.interface';
 export * from './pagination.interface';
+export * from './pagingInfo.interface';
 export * from './paginationChangedArgs.interface';
-export * from './menuCallbackArgs.interface';
 export * from './rowMoveManager.interface';
 export * from './selectedRange.interface';
+export * from './selectOption.interface';
 export * from './servicePagination.interface';
 export * from './slickEvent.interface';
 export * from './slickEventData.interface';
 export * from './slickEventHandler.interface';
-export * from './selectOption.interface';
+export * from './slickGrid.interface';
 export * from './sorter.interface';
 export * from './subscription.interface';
 export * from './treeDataOption.interface';
diff --git a/packages/common/src/interfaces/menuCallbackArgs.interface.ts b/packages/common/src/interfaces/menuCallbackArgs.interface.ts
index 791670b81..74696352c 100644
--- a/packages/common/src/interfaces/menuCallbackArgs.interface.ts
+++ b/packages/common/src/interfaces/menuCallbackArgs.interface.ts
@@ -1,4 +1,5 @@
 import { Column } from './column.interface';
+import { SlickGrid } from './slickGrid.interface';
 
 export interface MenuCallbackArgs {
   /** Cell or column index */
@@ -8,7 +9,7 @@ export interface MenuCallbackArgs {
   row?: number;
 
   /** Reference to the grid. */
-  grid: any;
+  grid: SlickGrid;
 
   /** Cell Column definition */
   column: Column;
diff --git a/packages/common/src/interfaces/onEventArgs.interface.ts b/packages/common/src/interfaces/onEventArgs.interface.ts
index 68091f034..e96a2eeeb 100644
--- a/packages/common/src/interfaces/onEventArgs.interface.ts
+++ b/packages/common/src/interfaces/onEventArgs.interface.ts
@@ -1,10 +1,12 @@
 import { Column } from './column.interface';
+import { DataView } from './dataView.interface';
+import { SlickGrid } from './slickGrid.interface';
 
 export interface OnEventArgs {
   row: number;
   cell: number;
   columnDef: Column;
   dataContext: any;
-  dataView: any; // TODO replace by a DataView interface
-  grid: any;    // TODO replace by a SlickGrid interface
+  dataView: DataView;
+  grid: SlickGrid;
 }
diff --git a/packages/common/src/interfaces/pagingInfo.interface.ts b/packages/common/src/interfaces/pagingInfo.interface.ts
new file mode 100644
index 000000000..edadd72aa
--- /dev/null
+++ b/packages/common/src/interfaces/pagingInfo.interface.ts
@@ -0,0 +1,9 @@
+import { DataView } from './dataView.interface';
+
+export interface PagingInfo {
+  pageSize: number;
+  pageNum: number;
+  totalRows?: number;
+  totalPages?: number;
+  dataView?: DataView;
+}
diff --git a/packages/common/src/interfaces/rowMoveManager.interface.ts b/packages/common/src/interfaces/rowMoveManager.interface.ts
index 7ba62887f..3b93bdac3 100644
--- a/packages/common/src/interfaces/rowMoveManager.interface.ts
+++ b/packages/common/src/interfaces/rowMoveManager.interface.ts
@@ -1,3 +1,5 @@
+import { SlickGrid } from './slickGrid.interface';
+
 export interface RowMoveManager {
   /** Defaults to false, option to cancel editing while dragging a row */
   cancelEditOnDrag?: boolean;
@@ -25,7 +27,7 @@ export interface RowMoveManager {
   width?: number;
 
   /** Override the logic for showing (or not) the move icon (use case example: only every 2nd row is moveable) */
-  usabilityOverride?: (row: number, dataContext: any, grid: any) => boolean;
+  usabilityOverride?: (row: number, dataContext: any, grid: SlickGrid) => boolean;
 
   //
   // SlickGrid Events
diff --git a/packages/common/src/interfaces/slickEvent.interface.ts b/packages/common/src/interfaces/slickEvent.interface.ts
index b2426f68e..8ff79c3cb 100644
--- a/packages/common/src/interfaces/slickEvent.interface.ts
+++ b/packages/common/src/interfaces/slickEvent.interface.ts
@@ -19,11 +19,11 @@ export interface SlickEvent {
    * object the event was fired with.
    * @param fn {Function} Event handler.
    */
-  subscribe: (fn: any) => Promise<any>;
+  subscribe: (fn: (e: SlickEventData, data: any) => void) => Promise<any>;
 
   /**
    * Removes an event handler added with <code>subscribe(fn).
    * @param fn {Function} Event handler to be removed.
    */
-  unsubscribe: (fn: any) => void;
+  unsubscribe: (fn: (e: SlickEventData, data: any) => void) => void;
 }
diff --git a/packages/common/src/interfaces/slickGrid.interface.ts b/packages/common/src/interfaces/slickGrid.interface.ts
new file mode 100644
index 000000000..4ac77ab94
--- /dev/null
+++ b/packages/common/src/interfaces/slickGrid.interface.ts
@@ -0,0 +1,482 @@
+import { GridOption } from './gridOption.interface';
+import { Column } from './column.interface';
+import { Editor } from './editor.interface';
+import { ElementPosition } from './elementPosition.interface';
+import { PagingInfo } from './pagingInfo.interface';
+import { SlickEvent } from './slickEvent.interface';
+import { FormatterResultObject } from './formatterResultObject.interface';
+import { ColumnSort } from './columnSort.interface';
+
+export interface SlickGrid {
+  /**
+   * Adds an "overlay" of CSS classes to cell DOM elements. SlickGrid can have many such overlays associated with different keys and they are frequently used by plugins. For example, SlickGrid uses this method internally to decorate selected cells with selectedCellCssClass (see options).
+   * @param key A unique key you can use in calls to setCellCssStyles and removeCellCssStyles. If a hash with that key has already been set, an exception will be thrown.
+   * @param hash A hash of additional cell CSS classes keyed by row number and then by column id. Multiple CSS classes can be specified and separated by space.
+   * @example
+   * {
+   * 	0:    {
+   * 		number_column: SlickEvent;
+   * 		title_column: SlickEvent;
+   * 	},
+   * 	4:    {
+   * 		percent_column: SlickEvent;
+   * 	}
+   * }
+   */
+  addCellCssStyles(key: string, hash: any): void;
+
+  /** Apply a Formatter Result to a Cell DOM Node */
+  applyFormatResultToCellNode: (formatterResult?: FormatterResultObject, cellNode?: HTMLElement, suppressRemove?: boolean) => void;
+
+  /** Proportionally resize a specific column by its name, index or Id */
+  autosizeColumn: (columnOrIndexOrId: string | number, isInit: boolean) => void;
+
+  /** Proportionately resizes all columns to fill available horizontal space. This does not take the cell contents into consideration. */
+  autosizeColumns(): void;
+
+  /**
+   * Returns true if you can click on a given cell and make it the active focus.
+   * @param row A row index.
+   * @param col A column index.
+   */
+  canCellBeActive(row: number, col: number): boolean;
+
+  /**
+   * Returns true if selecting the row causes this particular cell to have the selectedCellCssClass applied to it. A cell can be selected if it exists and if it isn't on an empty / "Add New" row and if it is not marked as "unselectable" in the column definition.
+   * @param row A row index.
+   * @param col A column index.
+   */
+  canCellBeSelected(row: number, col: number): boolean;
+
+  /** Destroy (dispose) of SlickGrid */
+  destroy(): void;
+
+  /**
+   * Attempts to switch the active cell into edit mode. Will throw an error if the cell is set to be not editable. Uses the specified editor, otherwise defaults to any default editor for that given cell.
+   * @param editor A SlickGrid editor (see examples in slick.editors.js).
+   */
+  editActiveCell(editor: Editor): void;
+
+  /**
+   * Flashes the cell twice by toggling the CSS class 4 times.
+   * @param row A row index.
+   * @param cell A column index.
+   * @param speed (optional) - The milliseconds delay between the toggling calls. Defaults to 100 ms.
+   */
+  flashCell(row: number, cell: number, speed?: number): void;
+
+  /** Set focus */
+  focus(): void;
+
+  /** Get the canvas DOM element */
+  getActiveCanvasNode: () => HTMLElement;
+
+  /**
+   * Returns an object representing the coordinates of the currently active cell:
+   * @example
+   * 	{
+   * 	  row: activeRow,
+   * 	  cell: activeCell
+   * 	}
+   */
+  getActiveCell(): number;
+
+  /** Returns the DOM element containing the currently active cell. If no cell is active, null is returned. */
+  getActiveCellNode(): HTMLElement;
+
+  /** Returns an object representing information about the active cell's position. All coordinates are absolute and take into consideration the visibility and scrolling position of all ancestors. */
+  getActiveCellPosition(): ElementPosition;
+
+  /** Get the active Viewport DOM node element */
+  getActiveViewportNode: () => HTMLElement;
+
+  /** Get the canvas DOM element */
+  getCanvases: () => HTMLElement;
+
+  /** Get Grid Canvas Node DOM Element */
+  getCanvasNode(): HTMLCanvasElement;
+
+  /** Get the grid canvas width */
+  getCanvasWidth: () => number;
+
+  /**
+   * Accepts a key name, returns the group of CSS styles defined under that name. See setCellCssStyles for more info.
+   * @param key A string.
+   */
+  getCellCssStyles(key: string): any;
+
+  /** Returns the active cell editor. If there is no actively edited cell, null is returned.   */
+  getCellEditor(): Editor;
+
+  /**
+   * Returns a hash containing row and cell indexes from a standard W3C/jQuery event.
+   * @param e A standard W3C/jQuery event.
+   */
+  getCellFromEvent(e: Event): any;
+
+  /**
+   * Returns a hash containing row and cell indexes. Coordinates are relative to the top left corner of the grid beginning with the first row (not including the column headers).
+   * @param x An x coordinate.
+   * @param y A y coordinate.
+   */
+  getCellFromPoint(x: number, y: number): any;
+
+  /**
+   * Returns a DOM element containing a cell at a given row and cell.
+   * @param row A row index.
+   * @param cell A column index.
+   */
+  getCellNode(row: number, cell: number): HTMLElement;
+
+  /**
+   * Returns an object representing information about a cell's position. All coordinates are absolute and take into consideration the visibility and scrolling position of all ancestors.
+   * @param row A row index.
+   * @param cell A column index.
+   */
+  getCellNodeBox(row: number, cell: number): ElementPosition;
+
+  /**
+   * Returns the index of a column with a given id. Since columns can be reordered by the user, this can be used to get the column definition independent of the order:
+   * @param id A column id.
+   */
+  getColumnIndex(id: string | number): number;
+
+  /** Returns an array of column definitions, containing the option settings for each individual column.*/
+  getColumns(): Column[];
+
+  /** Get Grid Canvas Node DOM Element */
+  getContainerNode: () => HTMLElement;
+
+  /** Returns an array of every data object, unless you're using DataView in which case it returns a DataView object. */
+  getData(): any;
+
+  /**
+   * Returns the databinding item at a given position.
+   * @param index Item index.
+   */
+  getDataItem(index: number): any;
+
+  /** Returns the size of the databinding source. */
+  getDataLength(): number;
+
+  /** Get Editor lock */
+  getEditorLock(): any;
+
+  /** Get Editor Controller */
+  getEditController(): { commitCurrentEdit(): boolean; cancelCurrentEdit(): boolean; };
+
+  /** Get the Footer DOM element */
+  getFooterRow: () => HTMLElement;
+
+  /** Get the Footer Row Column DOM element */
+  getFooterRowColumn: (columnIdOrIdx: string | number) => HTMLElement;
+
+  /** Get frozen (pinned) row offset */
+  getFrozenRowOffset: (row: number) => number;
+
+  /** Get the Grid Position */
+  getGridPosition(): ElementPosition;
+
+  /** Get the Header DOM element */
+  getHeader: (columnDef: Column) => HTMLElement;
+
+  /** Get a specific Header Column DOM element */
+  getHeaderColumn: (columnIdOrIdx: string | number) => HTMLElement;
+
+  /** Get Header Column Width Difference in pixel */
+  getHeaderColumnWidthDiff: () => number;
+
+  /** Get the Header Row DOM element */
+  getHeaderRow(): HTMLElement;
+
+  /** Get Header Row Column DOM element by its column Id */
+  getHeaderRowColumn(columnId: string | number): HTMLElement;
+
+  /** Get the headers width in pixel */
+  getHeadersWidth: () => number;
+
+  /** Returns an object containing all of the Grid options set on the grid. See a list of Grid Options here.  */
+  getOptions(): GridOption;
+
+  /** Get a Plugin (addon) by its name */
+  getPluginByName: (name: string) => any;
+
+  /** Get the Pre-Header Panel DOM node element */
+  getPreHeaderPanel: () => HTMLElement;
+
+  /** Get the Pre-Header Panel Left DOM node element */
+  getPreHeaderPanelLeft: () => HTMLElement;
+
+  /** Get the Pre-Header Panel Right DOM node element */
+  getPreHeaderPanelRight: () => HTMLElement;
+
+  /** Get rendered range */
+  getRenderedRange(viewportTop: number, viewportLeft: number): { top: number; bottom: number; leftPx: number; rightPx: number; };
+
+  /** Get scrollbar dimensions */
+  getScrollbarDimensions: () => { height: number; width: number; };
+
+  /** Returns an array of row indices corresponding to the currently selected rows. */
+  getSelectedRows(): number[];
+
+  /** Returns the current SelectionModel. See here for more information about SelectionModels.*/
+  getSelectionModel(): any;
+
+  /** Get sorted columns **/
+  getSortColumns(): ColumnSort[];
+
+  /** Get Top Panel DOM element */
+  getTopPanel(): HTMLElement;
+
+  /** Get grid unique identifier */
+  getUID: () => string;
+
+  /** Get Viewport position */
+  getViewport(viewportTop?: number, viewportLeft?: number): { top: number; bottom: number; leftPx: number; rightPx: number; };
+
+  /** Get the Viewport DOM node element */
+  getViewportNode: () => HTMLElement;
+
+  /**
+   * Accepts a row integer and a cell integer, scrolling the view to the row where row is its row index, and cell is its cell index. Optionally accepts a forceEdit boolean which, if true, will attempt to initiate the edit dialogue for the field in the specified cell.
+   * Unlike setActiveCell, this scrolls the row into the viewport and sets the keyboard focus.
+   * @param row A row index.
+   * @param cell A column index.
+   * @param forceEdit If true, will attempt to initiate the edit dialogue for the field in the specified cell.
+   */
+  gotoCell(row: number, cell: number, forceEdit?: boolean): void;
+
+  /** Initializes the grid. Called after plugins are registered. Normally, this is called by the constructor, so you don't need to call it. However, in certain cases you may need to delay the initialization until some other process has finished. In that case, set the explicitInitialization option to true and call the grid.init() manually. */
+  init(): void;
+
+  /** Invalidate all rows and re-render the grid rows */
+  invalidate(): void;
+
+  /** Invalidate all rows */
+  invalidateAllRows: () => void;
+
+  /** Invalidate a specific row number */
+  invalidateRow(row: number): void;
+
+  /** Invalidate a specific set of row numbers */
+  invalidateRows(rows: number[]): void;
+
+  /** Navigate to the bottom of the grid */
+  navigateBottom: () => void;
+
+  /** Switches the active cell one row down skipping unselectable cells. Returns a boolean saying whether it was able to complete or not. */
+  navigateDown(): boolean;
+
+  /** Switches the active cell one cell left skipping unselectable cells. Unline navigatePrev, navigateLeft stops at the first cell of the row. Returns a boolean saying whether it was able to complete or not. */
+  navigateLeft(): boolean;
+
+  /** Tabs over active cell to the next selectable cell. Returns a boolean saying whether it was able to complete or not. */
+  navigateNext(): boolean;
+
+  /** Navigate (scroll) by a page up */
+  navigatePageUp: () => void;
+
+  /** Navigate (scroll) by a page down */
+  navigatePageDown: () => void;
+
+  /**  Tabs over active cell to the previous selectable cell. Returns a boolean saying whether it was able to complete or not. */
+  navigatePrev(): boolean;
+
+  /** Switches the active cell one cell right skipping unselectable cells. Unline navigateNext, navigateRight stops at the last cell of the row. Returns a boolean saying whether it was able to complete or not. */
+  navigateRight(): boolean;
+
+  /** Navigate to the start row in the grid */
+  navigateRowStart: () => boolean;
+
+  /** Navigate to the end row in the grid */
+  navigateRowEnd: () => boolean;
+
+  /** Navigate to the top of the grid */
+  navigateTop: () => void;
+
+  /** Switches the active cell one row up skipping unselectable cells. Returns a boolean saying whether it was able to complete or not. */
+  navigateUp(): boolean;
+
+  /** (re)Render the grid */
+  render(): void;
+
+  /** Register an external Plugin (addon) */
+  registerPlugin(plugin: any): void;
+
+  /**
+   * Removes an "overlay" of CSS classes from cell DOM elements. See setCellCssStyles for more.
+   * @param key A string key.
+   */
+  removeCellCssStyles(key: string): void;
+
+  /**  Resets active cell. */
+  resetActiveCell(): void;
+
+  /** Execute a Resize of the Canvas */
+  resizeCanvas(): void;
+
+  /** Scroll to a specific cell and make it into the view */
+  scrollCellIntoView(row: number, cell: number, doPaging: boolean): void;
+
+  /** Scroll to a specific column and show it into the viewport */
+  scrollColumnIntoView: (cell: number) => void;
+
+  /** Scroll to a specific row and make it into the view */
+  scrollRowIntoView(row: number, doPaging?: boolean): void;
+
+  /** Scroll to the top row and make it into the view */
+  scrollRowToTop(row: number): void;
+
+  /** Scroll to an Y position in the grid */
+  scrollTo: (yPos: number) => void;
+
+  /** Sets an active canvas node */
+  setActiveCanvasNode: (element: HTMLElement) => void;
+
+  /**
+   * Sets an active cell.
+   * @param row A row index.
+   * @param cell A column index.
+   */
+  setActiveCell(row: number, cell: number): void;
+
+  /** Sets an active viewport node */
+  setActiveViewportNode: (element: HTMLElement) => void;
+
+  /**
+   * Sets CSS classes to specific grid cells by calling removeCellCssStyles(key) followed by addCellCssStyles(key, hash). key is name for this set of styles so you can reference it later - to modify it or remove it, for example. hash is a per-row-index, per-column-name nested hash of CSS classes to apply.
+   * Suppose you have a grid with columns:
+   * ["login", "name", "birthday", "age", "likes_icecream", "favorite_cake"]
+   * ...and you'd like to highlight the "birthday" and "age" columns for people whose birthday is today, in this case, rows at index 0 and 9. (The first and tenth row in the grid).
+   * @param key A string key. Will overwrite any data already associated with this key.
+   * @param hash A hash of additional cell CSS classes keyed by row number and then by column id. Multiple CSS classes can be specified and separated by space.
+   */
+  setCellCssStyles(key: string, hash: any): void;
+
+  /** Set the Column Header Visibility and optionally enable/disable animation (enabled by default) */
+  setColumnHeaderVisibility: (visible: boolean, animate?: boolean) => void;
+
+  /**
+   * Sets grid columns. Column headers will be recreated and all rendered rows will be removed. To rerender the grid (if necessary), call render().
+   * @param columnDefinitions An array of column definitions.
+   */
+  setColumns(columnDefinitions: Column[]): void;
+
+  /**
+   * Sets a new source for databinding and removes all rendered rows. Note that this doesn't render the new rows - you can follow it with a call to render() to do that.
+   * @param newData New databinding source using a regular JavaScript array.. or a custom object exposing getItem(index) and getLength() functions.
+   * @param scrollToTop If true, the grid will reset the vertical scroll position to the top of the grid.
+   */
+  setData(newData: any | any[], scrollToTop: boolean): void;
+
+  /** Set the Footer Visibility and optionally enable/disable animation (enabled by default) */
+  setFooterRowVisibility: (visible: boolean, animate?: boolean) => void;
+
+  /** Set the Header Row Visibility and optionally enable/disable animation (enabled by default) */
+  setHeaderRowVisibility(visible: boolean, animate?: boolean): void;
+
+  /**
+   * Extends grid options with a given hash. If an there is an active edit, the grid will attempt to commit the changes and only continue if the attempt succeeds.
+   * @options An object with configuration options.
+   */
+  setOptions(options: GridOption): void;
+
+  /** Set the Pre-Header Visibility and optionally enable/disable animation (enabled by default) */
+  setPreHeaderPanelVisibility: (visible: boolean, animate?: boolean) => void;
+
+  /**
+   * Accepts an array of row indices and applies the current selectedCellCssClass to the cells in the row, respecting whether cells have been flagged as selectable.
+   * @param rowsArray An array of row numbers.
+   */
+  setSelectedRows(rowsArray: number[]): void;
+
+  /**
+   * Unregisters a current selection model and registers a new one. See the definition of SelectionModel for more information.
+   * @selectionModel A SelectionModel.
+   */
+  setSelectionModel(selectionModel: any): void;		// todo: don't know the type of the event data type
+
+  /**
+   * Accepts a columnId string and an ascending boolean. Applies a sort glyph in either ascending or descending form to the header of the column. Note that this does not actually sort the column. It only adds the sort glyph to the header.
+   * @param columnId
+   * @param ascending
+   */
+  setSortColumn(columnId: string | number, ascending: boolean): void;
+
+  /**
+   * Accepts an array of objects in the form [ { columnId: [string], sortAsc: [boolean] }, ... ]. When called, this will apply a sort glyph in either ascending or descending form to the header of each column specified in the array. Note that this does not actually sort the column. It only adds the sort glyph to the header
+   * @param cols
+   */
+  setSortColumns(cols: ColumnSort[]): void;
+
+  /** Set the Top Panel Visibility and optionally enable/disable animation (enabled by default) */
+  setTopPanelVisibility(visible: boolean, animate?: boolean): void;
+
+  /** Unregister an external Plugin (addon) */
+  unregisterPlugin(plugin: any): void;
+
+  /** Update a specific cell by its row and column index */
+  updateCell(row: number, cell: number): void;
+
+  /**
+   * Updates an existing column definition and a corresponding header DOM element with the new title and tooltip.
+   * @param columnId Column id.
+   * @param title New column name.
+   * @param toolTip New column tooltip.
+   */
+  updateColumnHeader(columnId: string | number, title?: string, toolTip?: string): void;
+
+  /** Update paging information status from the View */
+  updatePagingStatusFromView: (pagingInfo: PagingInfo) => void;
+
+  /** Update a specific row by its row index */
+  updateRow(row: number): void;
+
+  /** Update the dataset row count */
+  updateRowCount(): void;
+
+  // -----------------------------
+  // Available Slick Grid Events
+  // -----------------------------
+
+  onActiveCellChanged: SlickEvent;
+  onActiveCellPositionChanged: SlickEvent;
+  onAddNewRow: SlickEvent;
+  onAutosizeColumns: SlickEvent;
+  onBeforeAppendCell: SlickEvent;
+  onBeforeCellEditorDestroy: SlickEvent;
+  onBeforeDestroy: SlickEvent;
+  onBeforeEditCell: SlickEvent;
+  onBeforeHeaderCellDestroy: SlickEvent;
+  onBeforeHeaderRowCellDestroy: SlickEvent;
+  onBeforeFooterRowCellDestroy: SlickEvent;
+  onCellChange: SlickEvent;
+  onCellCssStylesChanged: SlickEvent;
+  onClick: SlickEvent;
+  onColumnsReordered: SlickEvent;
+  onColumnsResized: SlickEvent;
+  onContextMenu: SlickEvent;
+  onDrag: SlickEvent;
+  onDragEnd: SlickEvent;
+  onDragInit: SlickEvent;
+  onDragStart: SlickEvent;
+  onDblClick: SlickEvent;
+  onFooterContextMenu: SlickEvent;
+  onFooterRowCellRendered: SlickEvent;
+  onHeaderCellRendered: SlickEvent;
+  onFooterClick: SlickEvent;
+  onHeaderClick: SlickEvent;
+  onHeaderContextMenu: SlickEvent;
+  onHeaderMouseEnter: SlickEvent;
+  onHeaderMouseLeave: SlickEvent;
+  onHeaderRowCellRendered: SlickEvent;
+  onKeyDown: SlickEvent;
+  onMouseEnter: SlickEvent;
+  onMouseLeave: SlickEvent;
+  onValidationError: SlickEvent;
+  onViewportChanged: SlickEvent;
+  onRendered: SlickEvent;
+  onSelectedRowsChanged: SlickEvent;
+  onScroll: SlickEvent;
+  onSort: SlickEvent;
+}
diff --git a/packages/common/src/interfaces/treeDataOption.interface.ts b/packages/common/src/interfaces/treeDataOption.interface.ts
index 0e26b1582..7dbcb074e 100644
--- a/packages/common/src/interfaces/treeDataOption.interface.ts
+++ b/packages/common/src/interfaces/treeDataOption.interface.ts
@@ -15,7 +15,7 @@ export interface TreeDataOption {
 
     /** Direction of the initial Sort (ASC/DESC) */
     direction: SortDirection | SortDirectionString;
-  }
+  };
 
   /** Defaults to "children", object property name used to designate the Children array */
   childrenPropName?: string;
diff --git a/packages/common/src/services/__tests__/export-utilities.spec.ts b/packages/common/src/services/__tests__/export-utilities.spec.ts
index da99339c6..e3f255995 100644
--- a/packages/common/src/services/__tests__/export-utilities.spec.ts
+++ b/packages/common/src/services/__tests__/export-utilities.spec.ts
@@ -1,11 +1,11 @@
 import { exportWithFormatterWhenDefined } from '../export-utilities';
-import { Formatter, Column } from '../../interfaces/index';
+import { Column, Formatter, SlickGrid } from '../../interfaces/index';
 
 describe('Export Utilities', () => {
   let mockItem;
   let mockColumn: Column;
-  const myBoldHtmlFormatter: Formatter = (row, cell, value, columnDef, dataContext) => value !== null ? { text: value ? `<b>${value}</b>` : '' } : null;
-  const myUppercaseFormatter: Formatter = (row, cell, value, columnDef, dataContext) => value ? { text: value.toUpperCase() } : null;
+  const myBoldHtmlFormatter: Formatter = (row, cell, value) => value !== null ? { text: value ? `<b>${value}</b>` : '' } : null;
+  const myUppercaseFormatter: Formatter = (row, cell, value) => value ? { text: value.toUpperCase() } : null;
 
   beforeEach(() => {
     mockItem = { firstName: 'John', lastName: 'Doe', age: 45, address: { zip: 12345 } };
@@ -14,55 +14,55 @@ describe('Export Utilities', () => {
 
   describe('exportWithFormatterWhenDefined method', () => {
     it('should NOT enable exportWithFormatter and expect the firstName to returned', () => {
-      const output = exportWithFormatterWhenDefined(1, 1, mockItem, mockColumn, {}, { exportWithFormatter: false });
+      const output = exportWithFormatterWhenDefined(1, 1, mockItem, mockColumn, {} as SlickGrid, { exportWithFormatter: false });
       expect(output).toBe('John');
     });
 
     it('should provide a column definition field defined with a dot (.) notation and expect a complex object result', () => {
-      const output = exportWithFormatterWhenDefined(1, 1, mockItem, { ...mockColumn, field: 'address.zip' }, {}, {});
+      const output = exportWithFormatterWhenDefined(1, 1, mockItem, { ...mockColumn, field: 'address.zip' }, {} as SlickGrid, {});
       expect(output).toEqual({ zip: 12345 });
     });
 
     it('should provide a exportCustomFormatter in the column definition and expect the output to be formatted', () => {
-      const output = exportWithFormatterWhenDefined(1, 1, mockItem, { ...mockColumn, exportCustomFormatter: myBoldHtmlFormatter }, {}, { exportWithFormatter: true });
+      const output = exportWithFormatterWhenDefined(1, 1, mockItem, { ...mockColumn, exportCustomFormatter: myBoldHtmlFormatter }, {} as SlickGrid, { exportWithFormatter: true });
       expect(output).toBe('<b>John</b>');
     });
 
     it('should provide a exportCustomFormatter in the column definition and expect empty string when associated item property is null', () => {
-      const output = exportWithFormatterWhenDefined(1, 1, { ...mockItem, firstName: null }, { ...mockColumn, exportCustomFormatter: myBoldHtmlFormatter }, {}, { exportWithFormatter: true });
+      const output = exportWithFormatterWhenDefined(1, 1, { ...mockItem, firstName: null }, { ...mockColumn, exportCustomFormatter: myBoldHtmlFormatter }, {} as SlickGrid, { exportWithFormatter: true });
       expect(output).toBe('');
     });
 
     it('should provide a exportCustomFormatter in the column definition and expect empty string when associated item property is undefined', () => {
-      const output = exportWithFormatterWhenDefined(1, 1, { ...mockItem, firstName: undefined }, { ...mockColumn, exportCustomFormatter: myBoldHtmlFormatter }, {}, { exportWithFormatter: true });
+      const output = exportWithFormatterWhenDefined(1, 1, { ...mockItem, firstName: undefined }, { ...mockColumn, exportCustomFormatter: myBoldHtmlFormatter }, {} as SlickGrid, { exportWithFormatter: true });
       expect(output).toBe('');
     });
 
     it('should enable exportWithFormatter as an exportOption and expect the firstName to be formatted', () => {
-      const output = exportWithFormatterWhenDefined(1, 1, mockItem, mockColumn, {}, { exportWithFormatter: true });
+      const output = exportWithFormatterWhenDefined(1, 1, mockItem, mockColumn, {} as SlickGrid, { exportWithFormatter: true });
       expect(output).toBe('JOHN');
     });
 
     it('should enable exportWithFormatter as a grid option and expect the firstName to be formatted', () => {
       mockColumn.exportWithFormatter = true;
-      const output = exportWithFormatterWhenDefined(1, 1, mockItem, mockColumn, {}, { exportWithFormatter: true });
+      const output = exportWithFormatterWhenDefined(1, 1, mockItem, mockColumn, {} as SlickGrid, { exportWithFormatter: true });
       expect(output).toBe('JOHN');
     });
 
     it('should enable exportWithFormatter as a grid option and expect empty string when associated item property is null', () => {
       mockColumn.exportWithFormatter = true;
-      const output = exportWithFormatterWhenDefined(1, 1, { ...mockItem, firstName: null }, mockColumn, {}, { exportWithFormatter: true });
+      const output = exportWithFormatterWhenDefined(1, 1, { ...mockItem, firstName: null }, mockColumn, {} as SlickGrid, { exportWithFormatter: true });
       expect(output).toBe('');
     });
 
     it('should enable exportWithFormatter as a grid option and expect empty string when associated item property is undefined', () => {
       mockColumn.exportWithFormatter = true;
-      const output = exportWithFormatterWhenDefined(1, 1, { ...mockItem, firstName: undefined }, mockColumn, {}, { exportWithFormatter: true });
+      const output = exportWithFormatterWhenDefined(1, 1, { ...mockItem, firstName: undefined }, mockColumn, {} as SlickGrid, { exportWithFormatter: true });
       expect(output).toBe('');
     });
 
     it('should expect empty string when associated item property is undefined and has no formatter defined', () => {
-      const output = exportWithFormatterWhenDefined(1, 1, { ...mockItem, firstName: undefined }, mockColumn, {}, {});
+      const output = exportWithFormatterWhenDefined(1, 1, { ...mockItem, firstName: undefined }, mockColumn, {} as SlickGrid, {});
       expect(output).toBe('');
     });
   });
diff --git a/packages/common/src/services/__tests__/export.service.spec.ts b/packages/common/src/services/__tests__/export.service.spec.ts
index 1b944d933..5933adc4b 100644
--- a/packages/common/src/services/__tests__/export.service.spec.ts
+++ b/packages/common/src/services/__tests__/export.service.spec.ts
@@ -1,11 +1,11 @@
-import { ExportService } from '../export.service';
+import { FileExportService } from '../fileExport.service';
 
 describe('Export Service', () => {
   it('should display a not implemented when calling "init" method', () => {
-    expect(() => ExportService.prototype.init({}, {})).toThrow('ExportService the "init" method must be implemented');
+    expect(() => FileExportService.prototype.init({} as any, {} as any)).toThrow('ExportService the "init" method must be implemented');
   });
 
   it('should display a not implemented when calling "exportToFile" method', () => {
-    expect(() => ExportService.prototype.exportToFile({})).toThrow('ExportService the "exportToFile" method must be implemented');
+    expect(() => FileExportService.prototype.exportToFile({})).toThrow('ExportService the "exportToFile" method must be implemented');
   });
 });
diff --git a/packages/common/src/services/__tests__/extension.service.spec.ts b/packages/common/src/services/__tests__/extension.service.spec.ts
index b895ffadf..842048fef 100644
--- a/packages/common/src/services/__tests__/extension.service.spec.ts
+++ b/packages/common/src/services/__tests__/extension.service.spec.ts
@@ -1,5 +1,5 @@
 import { ExtensionName } from '../../enums/index';
-import { Column, ExtensionModel, GridOption, } from '../../interfaces/index';
+import { Column, ExtensionModel, GridOption, SlickGrid } from '../../interfaces/index';
 import {
   AutoTooltipExtension,
   CellExternalCopyManagerExtension,
@@ -25,12 +25,13 @@ const gridStub = {
   autosizeColumns: jest.fn(),
   getColumnIndex: jest.fn(),
   getOptions: jest.fn(),
+  getPluginByName: jest.fn(),
   getColumns: jest.fn(),
   setColumns: jest.fn(),
   onColumnsReordered: jest.fn(),
   onColumnsResized: jest.fn(),
   registerPlugin: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 const extensionStub = {
   create: jest.fn(),
@@ -171,6 +172,10 @@ describe('ExtensionService', () => {
     describe('bindDifferentExtensions method', () => {
       const instanceMock = { onColumnsChanged: jest.fn() };
 
+      beforeEach(() => {
+        jest.clearAllMocks();
+      });
+
       it('should return undefined when calling "getExtensionByName" method without anything set yet', () => {
         service.bindDifferentExtensions();
         const output = service.getExtensionByName(ExtensionName.autoTooltip);
@@ -405,7 +410,8 @@ describe('ExtensionService', () => {
         const gridOptionsMock = { registerPlugins: [pluginMock] } as GridOption;
         const gridSpy = jest.spyOn(SharedService.prototype, 'grid', 'get').mockReturnValue(gridStub);
         const optionSpy = jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(gridOptionsMock);
-        const pluginSpy = jest.spyOn(SharedService.prototype.grid, 'registerPlugin').mockReturnValue(instanceMock);
+        const pluginSpy = jest.spyOn(SharedService.prototype.grid, 'registerPlugin');
+        jest.spyOn(SharedService.prototype.grid, 'getPluginByName').mockReturnValue(instanceMock);
 
         service.bindDifferentExtensions();
         const output = service.getExtensionByName(ExtensionName.noname);
@@ -422,7 +428,8 @@ describe('ExtensionService', () => {
         const gridOptionsMock = { registerPlugins: pluginMock } as GridOption;
         const gridSpy = jest.spyOn(SharedService.prototype, 'grid', 'get').mockReturnValue(gridStub);
         const optionSpy = jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(gridOptionsMock);
-        const pluginSpy = jest.spyOn(SharedService.prototype.grid, 'registerPlugin').mockReturnValue(instanceMock);
+        const pluginSpy = jest.spyOn(SharedService.prototype.grid, 'registerPlugin');
+        jest.spyOn(SharedService.prototype.grid, 'getPluginByName').mockReturnValue(instanceMock);
 
         service.bindDifferentExtensions();
         const output = service.getExtensionByName(ExtensionName.noname);
diff --git a/packages/common/src/services/__tests__/filter.service.spec.ts b/packages/common/src/services/__tests__/filter.service.spec.ts
index 553dad312..e76894314 100644
--- a/packages/common/src/services/__tests__/filter.service.spec.ts
+++ b/packages/common/src/services/__tests__/filter.service.spec.ts
@@ -8,8 +8,10 @@ import {
   BackendService,
   Column,
   CurrentFilter,
+  DataView,
   GridOption,
   SlickEventHandler,
+  SlickGrid,
 } from '../../interfaces/index';
 import { Filters } from '../../filters';
 import { FilterService } from '../filter.service';
@@ -49,7 +51,7 @@ const dataViewStub = {
   setFilter: jest.fn(),
   setFilterArgs: jest.fn(),
   sort: jest.fn(),
-};
+} as unknown as DataView;
 
 const backendServiceStub = {
   buildQuery: jest.fn(),
@@ -73,7 +75,7 @@ const gridStub = {
   onHeaderRowCellRendered: new Slick.Event(),
   render: jest.fn(),
   setSortColumns: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 const pubSubServiceStub = {
   publish: jest.fn(),
diff --git a/packages/common/src/services/__tests__/grid.service.spec.ts b/packages/common/src/services/__tests__/grid.service.spec.ts
index 3f3c54e7e..4b19526e9 100644
--- a/packages/common/src/services/__tests__/grid.service.spec.ts
+++ b/packages/common/src/services/__tests__/grid.service.spec.ts
@@ -1,7 +1,7 @@
 import 'jest-extended';
 
 import { FilterService, GridService, ExtensionService, PubSubService, SharedService, SortService } from '../index';
-import { GridOption, CellArgs, Column, OnEventArgs } from '../../interfaces/index';
+import { GridOption, CellArgs, Column, OnEventArgs, SlickGrid, DataView } from '../../interfaces/index';
 
 declare const Slick: any;
 
@@ -47,12 +47,13 @@ const dataviewStub = {
   insertItem: jest.fn(),
   reSort: jest.fn(),
   updateItem: jest.fn(),
-};
+} as unknown as DataView;
 
 const gridStub = {
   autosizeColumns: jest.fn(),
   insertItem: jest.fn(),
   invalidate: jest.fn(),
+  getData: () => dataviewStub,
   getDataItem: jest.fn(),
   getOptions: jest.fn(),
   getColumns: jest.fn(),
@@ -66,7 +67,7 @@ const gridStub = {
   setSelectedRows: jest.fn(),
   scrollRowIntoView: jest.fn(),
   updateRow: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('Grid Service', () => {
   let service: GridService;
@@ -77,7 +78,7 @@ describe('Grid Service', () => {
 
   beforeEach(() => {
     service = new GridService(extensionServiceStub, filterServiceStub, pubSubServiceStub, sharedService, sortServiceStub);
-    service.init(gridStub, dataviewStub);
+    service.init(gridStub);
   });
 
   afterEach(() => {
@@ -1138,7 +1139,7 @@ describe('Grid Service', () => {
 
       expect(invalidateSpy).toHaveBeenCalled();
       expect(renderSpy).toHaveBeenCalled();
-      expect(gridStub.invalidate).toHaveBeenCalledBefore(gridStub.render);
+      expect(gridStub.invalidate).toHaveBeenCalledBefore(gridStub.render as any);
     });
   });
 
diff --git a/packages/common/src/services/__tests__/gridEvent.service.spec.ts b/packages/common/src/services/__tests__/gridEvent.service.spec.ts
index 19c9dce0d..33345a5a5 100644
--- a/packages/common/src/services/__tests__/gridEvent.service.spec.ts
+++ b/packages/common/src/services/__tests__/gridEvent.service.spec.ts
@@ -1,5 +1,5 @@
 import { GridEventService } from '../gridEvent.service';
-import { Column } from '../../interfaces/index';
+import { Column, DataView, SlickGrid } from '../../interfaces/index';
 
 declare const Slick: any;
 
@@ -7,7 +7,7 @@ const dataViewStub = {
   refresh: jest.fn(),
   sort: jest.fn(),
   reSort: jest.fn(),
-};
+} as unknown as DataView;
 
 const gridStub = {
   getColumnIndex: jest.fn(),
@@ -20,7 +20,7 @@ const gridStub = {
   onBeforeEditCell: new Slick.Event(),
   onCellChange: new Slick.Event(),
   onClick: new Slick.Event(),
-};
+} as unknown as SlickGrid;
 
 describe('GridEventService', () => {
   let service: GridEventService;
diff --git a/packages/common/src/services/__tests__/gridState.service.spec.ts b/packages/common/src/services/__tests__/gridState.service.spec.ts
index 927c1431e..9131d6a82 100644
--- a/packages/common/src/services/__tests__/gridState.service.spec.ts
+++ b/packages/common/src/services/__tests__/gridState.service.spec.ts
@@ -16,8 +16,10 @@ import {
   CurrentFilter,
   Column,
   CurrentColumn,
+  DataView,
   GridStateChange,
   GridState,
+  SlickGrid,
 } from '../../interfaces/index';
 import { SharedService } from '../shared.service';
 
@@ -50,10 +52,11 @@ const dataViewStub = {
   mapRowsToIds: jest.fn(),
   onBeforePagingInfoChanged: new Slick.Event(),
   onPagingInfoChanged: new Slick.Event(),
-};
+} as unknown as DataView;
 
 const gridStub = {
   autosizeColumns: jest.fn(),
+  getData: () => dataViewStub,
   getScrollbarDimensions: jest.fn(),
   getOptions: () => gridOptionMock,
   getColumns: jest.fn(),
@@ -63,7 +66,7 @@ const gridStub = {
   onColumnsReordered: new Slick.Event(),
   onColumnsResized: new Slick.Event(),
   onSelectedRowsChanged: new Slick.Event(),
-};
+} as unknown as SlickGrid;
 
 const extensionServiceStub = {
   getExtensionByName: (name: string) => { }
@@ -82,7 +85,7 @@ describe('GridStateService', () => {
   beforeEach(() => {
     sharedService = new SharedService();
     service = new GridStateService(extensionServiceStub, filterServiceStub, mockPubSub, sharedService, sortServiceStub);
-    service.init(gridStub, dataViewStub);
+    service.init(gridStub);
     jest.spyOn(gridStub, 'getSelectionModel').mockReturnValue(true);
   });
 
@@ -109,7 +112,7 @@ describe('GridStateService', () => {
       const gridStateSpy = jest.spyOn(service, 'subscribeToAllGridChanges');
       const pubSubSpy = jest.spyOn(mockPubSub, 'subscribe');
 
-      service.init(gridStub, dataViewStub);
+      service.init(gridStub);
       jest.spyOn(gridStub, 'getSelectionModel').mockReturnValue(true);
 
       expect(gridStateSpy).toHaveBeenCalled();
@@ -155,7 +158,7 @@ describe('GridStateService', () => {
         const gridStateSpy = jest.spyOn(service, 'getCurrentGridState').mockReturnValue(gridStateMock);
         const extensionSpy = jest.spyOn(extensionServiceStub, 'getExtensionByName').mockReturnValue(extensionMock);
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub);
         jest.spyOn(gridStub, 'getSelectionModel').mockReturnValue(true);
         slickgridEvent.notify({ columns: columnsMock }, new Slick.EventData(), gridStub);
 
@@ -179,7 +182,7 @@ describe('GridStateService', () => {
         const gridColumnResizeSpy = jest.spyOn(gridStub.onColumnsResized, 'subscribe');
         const gridStateSpy = jest.spyOn(service, 'getCurrentGridState').mockReturnValue(gridStateMock);
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub);
         jest.spyOn(gridStub, 'getSelectionModel').mockReturnValue(true);
         gridStub.onColumnsReordered.notify({ impactedColumns: columnsMock }, new Slick.EventData(), gridStub);
         service.resetColumns();
@@ -386,7 +389,7 @@ describe('GridStateService', () => {
         jest.spyOn(service, 'getCurrentFilters').mockReturnValue(filterMock);
         jest.spyOn(service, 'getCurrentSorters').mockReturnValue(sorterMock);
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub);
         service.selectedRowDataContextIds = mockRowIds;
         gridStub.onSelectedRowsChanged.notify({ rows: mockRowIndexes, previousSelectedRows: [] });
 
@@ -433,7 +436,7 @@ describe('GridStateService', () => {
         const pubSubSpy = jest.spyOn(mockPubSub, 'publish');
         const mapRowsSpy = jest.spyOn(dataViewStub, 'mapRowsToIds').mockReturnValue(mockRowIds);
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub);
         service.selectedRowDataContextIds = mockRowIds;
 
         // the regular event flow is 1.onBeforePagingInfoChanged, 2.onPagingInfoChanged then 3.onSelectedRowsChanged
@@ -468,7 +471,7 @@ describe('GridStateService', () => {
         jest.spyOn(service, 'getCurrentPagination').mockReturnValue(paginationMock);
         const setSelectSpy = jest.spyOn(gridStub, 'setSelectedRows');
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub);
         service.selectedRowDataContextIds = mockRowIds;
 
         // this comparison which has different arrays, will trigger the expectation we're looking for
@@ -502,7 +505,7 @@ describe('GridStateService', () => {
         const mapRowsSpy = jest.spyOn(dataViewStub, 'mapRowsToIds').mockReturnValue(mockRowIds);
         const setSelectSpy = jest.spyOn(gridStub, 'setSelectedRows');
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub);
         service.selectedRowDataContextIds = mockRowIds;
 
         // this comparison which has different arrays, will trigger the expectation we're looking for
@@ -544,7 +547,7 @@ describe('GridStateService', () => {
         jest.spyOn(service, 'getCurrentPagination').mockReturnValue(paginationMock);
         const mapRowsSpy = jest.spyOn(dataViewStub, 'mapRowsToIds').mockReturnValue(mockNewDataIds);
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub);
         service.selectedRowDataContextIds = mockPreviousDataIds;
 
         // the regular event flow is 1.onBeforePagingInfoChanged, 2.onPagingInfoChanged then 3.onSelectedRowsChanged
@@ -571,7 +574,7 @@ describe('GridStateService', () => {
         jest.spyOn(service, 'getCurrentPagination').mockReturnValue(paginationMock);
         const mapRowsSpy = jest.spyOn(dataViewStub, 'mapRowsToIds').mockReturnValue([555]); // remove [555], will remain [333, 777]
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub);
         service.selectedRowDataContextIds = mockPreviousDataIds;
 
         // the regular event flow is 1.onBeforePagingInfoChanged, 2.onPagingInfoChanged then 3.onSelectedRowsChanged
@@ -608,7 +611,7 @@ describe('GridStateService', () => {
         jest.spyOn(service, 'getCurrentPagination').mockReturnValue(paginationMock);
         const pubSubSpy = jest.spyOn(mockPubSub, 'publish');
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub);
         service.selectedRowDataContextIds = mockRowIds;
 
         fnCallbacks['onFilterChanged'](filterMock);
diff --git a/packages/common/src/services/__tests__/groupingAndColspan.service.spec.ts b/packages/common/src/services/__tests__/groupingAndColspan.service.spec.ts
index 7ddb538ce..cdaa9d0d9 100644
--- a/packages/common/src/services/__tests__/groupingAndColspan.service.spec.ts
+++ b/packages/common/src/services/__tests__/groupingAndColspan.service.spec.ts
@@ -1,5 +1,5 @@
 import { GroupingAndColspanService } from '../groupingAndColspan.service';
-import { GridOption, SlickEventHandler, Column } from '../../interfaces/index';
+import { Column, DataView, GridOption, SlickEventHandler, SlickGrid } from '../../interfaces/index';
 import { ExtensionUtility } from '../../extensions/extensionUtility';
 
 declare const Slick: any;
@@ -17,7 +17,7 @@ const dataViewStub = {
   sort: jest.fn(),
   onRowCountChanged: new Slick.Event(),
   reSort: jest.fn(),
-};
+} as unknown as DataView;
 
 const resizerPluginStub = {
   init: jest.fn(),
@@ -33,6 +33,7 @@ const gridStub = {
   getColumns: jest.fn(),
   getHeadersWidth: jest.fn(),
   getHeaderColumnWidthDiff: jest.fn(),
+  getPluginByName: jest.fn(),
   getPreHeaderPanel: jest.fn(),
   getPreHeaderPanelLeft: jest.fn(),
   getPreHeaderPanelRight: jest.fn(),
@@ -44,7 +45,7 @@ const gridStub = {
   render: jest.fn(),
   setColumns: jest.fn(),
   setSortColumns: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 const mockExtensionUtility = {
   loadExtensionDynamically: jest.fn(),
@@ -98,7 +99,7 @@ describe('GroupingAndColspanService', () => {
   it('should not call the "renderPreHeaderRowGroupingTitles" when there are no grid options', () => {
     gridStub.getOptions = undefined;
     const spy = jest.spyOn(service, 'renderPreHeaderRowGroupingTitles');
-    service.init(gridStub, resizerPluginStub);
+    service.init(gridStub);
     expect(spy).not.toHaveBeenCalled();
   });
 
@@ -113,15 +114,16 @@ describe('GroupingAndColspanService', () => {
         { id: 'start', name: 'Start', field: 'start' },
       ];
       gridStub.getColumns = jest.fn();
+      jest.spyOn(gridStub, 'getPluginByName').mockReturnValue(resizerPluginStub);
       jest.spyOn(gridStub, 'getColumns').mockReturnValue(mockColumns);
-      jest.spyOn(gridStub, 'getPreHeaderPanel').mockReturnValue(`<div style="width: 2815px; left: -1000px;" class="slick-header-columns"></div>`);
+      jest.spyOn(gridStub, 'getPreHeaderPanel').mockReturnValue(`<div style="width: 2815px; left: -1000px;" class="slick-header-columns"></div>` as unknown as HTMLElement);
     });
 
     it('should call the "renderPreHeaderRowGroupingTitles" on initial load even when there are no column definitions', () => {
       const spy = jest.spyOn(service, 'renderPreHeaderRowGroupingTitles');
       gridStub.getColumns = undefined;
 
-      service.init(gridStub, resizerPluginStub);
+      service.init(gridStub);
       jest.runAllTimers(); // fast-forward timer
 
       expect(spy).toHaveBeenCalledTimes(1);
@@ -132,7 +134,7 @@ describe('GroupingAndColspanService', () => {
     it('should call the "renderPreHeaderRowGroupingTitles" after triggering a grid "onSort"', () => {
       const spy = jest.spyOn(service, 'renderPreHeaderRowGroupingTitles');
 
-      service.init(gridStub, resizerPluginStub);
+      service.init(gridStub);
       gridStub.onSort.notify({ impactedColumns: mockColumns }, new Slick.EventData(), gridStub);
       jest.runAllTimers(); // fast-forward timer
 
@@ -144,7 +146,7 @@ describe('GroupingAndColspanService', () => {
     it('should call the "renderPreHeaderRowGroupingTitles" after triggering a grid "onColumnsResized"', () => {
       const spy = jest.spyOn(service, 'renderPreHeaderRowGroupingTitles');
 
-      service.init(gridStub, resizerPluginStub);
+      service.init(gridStub);
       gridStub.onColumnsResized.notify({}, new Slick.EventData(), gridStub);
       jest.runAllTimers(); // fast-forward timer
 
@@ -156,7 +158,7 @@ describe('GroupingAndColspanService', () => {
     it('should call the "renderPreHeaderRowGroupingTitles" after triggering a grid "onColumnsReordered"', () => {
       const spy = jest.spyOn(service, 'renderPreHeaderRowGroupingTitles');
 
-      service.init(gridStub, resizerPluginStub);
+      service.init(gridStub);
       gridStub.onColumnsReordered.notify({}, new Slick.EventData(), gridStub);
       jest.runAllTimers(); // fast-forward timer
 
@@ -168,7 +170,7 @@ describe('GroupingAndColspanService', () => {
     it('should call the "renderPreHeaderRowGroupingTitles" after triggering a dataView "onColumnsResized"', () => {
       const spy = jest.spyOn(service, 'renderPreHeaderRowGroupingTitles');
 
-      service.init(gridStub, resizerPluginStub);
+      service.init(gridStub);
       dataViewStub.onRowCountChanged.notify({ previous: 1, current: 2, dataView: dataViewStub, callingOnRowsChanged: 1 }, new Slick.EventData(), gridStub);
       jest.runAllTimers(); // fast-forward timer
 
@@ -180,7 +182,7 @@ describe('GroupingAndColspanService', () => {
     it('should call the "renderPreHeaderRowGroupingTitles" after triggering a grid resize', () => {
       const spy = jest.spyOn(service, 'renderPreHeaderRowGroupingTitles');
 
-      service.init(gridStub, resizerPluginStub);
+      service.init(gridStub);
       resizerPluginStub.onGridAfterResize.notify({}, new Slick.EventData(), gridStub);
       jest.runAllTimers(); // fast-forward timer
 
@@ -196,7 +198,7 @@ describe('GroupingAndColspanService', () => {
       const getColSpy = jest.spyOn(gridStub, 'getColumns');
       const setColSpy = jest.spyOn(gridStub, 'setColumns');
 
-      service.init(gridStub, resizerPluginStub);
+      service.init(gridStub);
       service.translateGroupingAndColSpan();
 
       expect(getColSpy).toHaveBeenCalled();
@@ -209,7 +211,7 @@ describe('GroupingAndColspanService', () => {
       const spy = jest.spyOn(service, 'renderPreHeaderRowGroupingTitles');
       const divHeaderColumns = document.getElementsByClassName('slick-header-columns');
 
-      service.init(gridStub, resizerPluginStub);
+      service.init(gridStub);
       jest.runAllTimers(); // fast-forward timer
 
       expect(spy).toHaveBeenCalledTimes(1);
@@ -227,7 +229,7 @@ describe('GroupingAndColspanService', () => {
       const preHeaderRightSpy = jest.spyOn(gridStub, 'getPreHeaderPanelRight');
       const divHeaderColumns = document.getElementsByClassName('slick-header-columns');
 
-      service.init(gridStub, resizerPluginStub);
+      service.init(gridStub);
       jest.runAllTimers(); // fast-forward timer
 
       expect(preHeaderLeftSpy).toHaveBeenCalledTimes(1);
diff --git a/packages/common/src/services/__tests__/pagination.service.spec.ts b/packages/common/src/services/__tests__/pagination.service.spec.ts
index bd650df9f..4b193e675 100644
--- a/packages/common/src/services/__tests__/pagination.service.spec.ts
+++ b/packages/common/src/services/__tests__/pagination.service.spec.ts
@@ -2,7 +2,7 @@ import 'jest-extended';
 
 import { PaginationService } from './../pagination.service';
 import { SharedService } from '../shared.service';
-import { Column, GridOption } from '../../interfaces/index';
+import { Column, DataView, GridOption, SlickGrid } from '../../interfaces/index';
 import * as utilities from '../backend-utilities';
 
 declare const Slick: any;
@@ -32,7 +32,7 @@ const dataviewStub = {
   onRowsChanged: new Slick.Event(),
   setPagingOptions: jest.fn(),
   setRefreshHints: jest.fn(),
-};
+} as unknown as DataView;
 
 const mockBackendService = {
   resetPaginationOptions: jest.fn(),
@@ -71,6 +71,7 @@ const mockGridOption = {
 const gridStub = {
   autosizeColumns: jest.fn(),
   getColumnIndex: jest.fn(),
+  getData: () => dataviewStub,
   getOptions: () => mockGridOption,
   getColumns: jest.fn(),
   setColumns: jest.fn(),
@@ -78,7 +79,7 @@ const gridStub = {
   onColumnsReordered: jest.fn(),
   onColumnsResized: jest.fn(),
   registerPlugin: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('PaginationService', () => {
   let service: PaginationService;
@@ -104,7 +105,7 @@ describe('PaginationService', () => {
 
   it('should initialize the service and call "refreshPagination" and trigger "onPaginationChanged" event', () => {
     const refreshSpy = jest.spyOn(service, 'refreshPagination');
-    service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+    service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
 
     expect(service.paginationOptions).toEqual(mockGridOption.pagination);
     expect(refreshSpy).toHaveBeenCalled();
@@ -113,7 +114,7 @@ describe('PaginationService', () => {
 
   it('should initialize the service and be able to change the grid options by the SETTER and expect the GETTER to have updated options', () => {
     const mockGridOptionCopy = { ...mockGridOption, options: null };
-    service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+    service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
     service.paginationOptions = mockGridOption.pagination;
 
     expect(service.paginationOptions).toEqual(mockGridOption.pagination);
@@ -123,7 +124,7 @@ describe('PaginationService', () => {
   it('should initialize the service and be able to change the totalItems by the SETTER and not expect the "refreshPagination" method to be called within the SETTER before initialization', () => {
     const spy = jest.spyOn(service, 'refreshPagination');
     service.totalItems = 125;
-    service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+    service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
 
     expect(service.totalItems).toEqual(125);
     expect(service.getCurrentPageNumber()).toBe(2);
@@ -132,7 +133,7 @@ describe('PaginationService', () => {
 
   it('should be able to change the totalItems by the SETTER after the initialization and expect the "refreshPagination" method to be called', () => {
     const spy = jest.spyOn(service, 'refreshPagination');
-    service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+    service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
     service.totalItems = 125;
 
     expect(service.totalItems).toEqual(125);
@@ -143,24 +144,24 @@ describe('PaginationService', () => {
   describe('Getters and Setters', () => {
     it('should get the availablePageSizes and equal the one defined in the grid options pagination', () => {
       mockGridOption.pagination.pageSizes = [5, 10, 15, 20];
-      service.init(gridStub, dataviewStub, mockGridOption.pagination);
+      service.init(gridStub, mockGridOption.pagination);
       expect(service.availablePageSizes).toEqual(mockGridOption.pagination.pageSizes);
     });
 
     it('should get the itemsPerPage and equal the one defined in the grid options pagination', () => {
       mockGridOption.pagination.pageSize = 20;
-      service.init(gridStub, dataviewStub, mockGridOption.pagination);
+      service.init(gridStub, mockGridOption.pagination);
       expect(service.itemsPerPage).toEqual(mockGridOption.pagination.pageSize);
     });
 
     it('should get the pageCount and equal the one defined in the grid options pagination', () => {
-      service.init(gridStub, dataviewStub, mockGridOption.pagination);
+      service.init(gridStub, mockGridOption.pagination);
       expect(service.pageCount).toEqual(4); // since totalItems is 85 and our pageSize is 20/page
     });
 
     it('should get the pageNumber and equal the one defined in the grid options pagination', () => {
       mockGridOption.pagination.pageNumber = 3;
-      service.init(gridStub, dataviewStub, mockGridOption.pagination);
+      service.init(gridStub, mockGridOption.pagination);
       expect(service.pageNumber).toEqual(mockGridOption.pagination.pageNumber);
     });
   });
@@ -168,7 +169,7 @@ describe('PaginationService', () => {
   describe('changeItemPerPage method', () => {
     it('should be on page 0 when total items is 0', () => {
       mockGridOption.pagination.totalItems = 0;
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       service.changeItemPerPage(30);
 
       expect(service.getCurrentPageNumber()).toBe(0);
@@ -180,7 +181,7 @@ describe('PaginationService', () => {
       mockGridOption.pagination.pageNumber = 2;
       mockGridOption.pagination.totalItems = 51;
 
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       service.changeItemPerPage(50);
 
       expect(service.getCurrentPageNumber()).toBe(1);
@@ -192,7 +193,7 @@ describe('PaginationService', () => {
       mockGridOption.pagination.pageNumber = 2;
       mockGridOption.pagination.totalItems = 100;
 
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       service.changeItemPerPage(50);
 
       expect(service.getCurrentPageNumber()).toBe(1);
@@ -203,7 +204,7 @@ describe('PaginationService', () => {
   describe('goToFirstPage method', () => {
     it('should expect current page to be 1 and "processOnPageChanged" method to be called', () => {
       const spy = jest.spyOn(service, 'processOnPageChanged');
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       service.goToFirstPage();
 
       expect(service.dataFrom).toBe(1);
@@ -217,7 +218,7 @@ describe('PaginationService', () => {
     it('should call "goToLastPage" method and expect current page to be last page and "processOnPageChanged" method to be called', () => {
       const spy = jest.spyOn(service, 'processOnPageChanged');
 
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       service.goToLastPage();
 
       expect(service.dataFrom).toBe(76);
@@ -231,7 +232,7 @@ describe('PaginationService', () => {
     it('should expect page to increment by 1 and "processOnPageChanged" method to be called', () => {
       const spy = jest.spyOn(service, 'processOnPageChanged');
 
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       service.goToNextPage();
 
       expect(service.dataFrom).toBe(51);
@@ -243,7 +244,7 @@ describe('PaginationService', () => {
     it('should expect page to increment by 1 and "processOnPageChanged" method to be called', () => {
       const spy = jest.spyOn(service, 'processOnPageChanged');
 
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       service.goToNextPage();
 
       expect(service.dataFrom).toBe(51);
@@ -256,7 +257,7 @@ describe('PaginationService', () => {
       const spy = jest.spyOn(service, 'processOnPageChanged');
       mockGridOption.pagination.pageNumber = 4;
 
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       service.goToNextPage();
 
       expect(service.dataFrom).toBe(76);
@@ -270,7 +271,7 @@ describe('PaginationService', () => {
     it('should expect page to decrement by 1 and "processOnPageChanged" method to be called', () => {
       const spy = jest.spyOn(service, 'processOnPageChanged');
 
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       service.goToPreviousPage();
 
       expect(service.dataFrom).toBe(1);
@@ -283,7 +284,7 @@ describe('PaginationService', () => {
       const spy = jest.spyOn(service, 'processOnPageChanged');
       mockGridOption.pagination.pageNumber = 1;
 
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       service.goToPreviousPage();
 
       expect(service.dataFrom).toBe(1);
@@ -297,7 +298,7 @@ describe('PaginationService', () => {
     it('should expect page to decrement by 1 and "processOnPageChanged" method to be called', () => {
       const spy = jest.spyOn(service, 'processOnPageChanged');
 
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       service.goToPageNumber(4);
 
       expect(service.dataFrom).toBe(76);
@@ -309,7 +310,7 @@ describe('PaginationService', () => {
     it('should expect to go to page 1 when input number is below 1', () => {
       const spy = jest.spyOn(service, 'processOnPageChanged');
 
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       service.goToPageNumber(0);
 
       expect(service.dataFrom).toBe(1);
@@ -321,7 +322,7 @@ describe('PaginationService', () => {
     it('should expect to go to last page (4) when input number is bigger than the last page number', () => {
       const spy = jest.spyOn(service, 'processOnPageChanged');
 
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       service.goToPageNumber(10);
 
       expect(service.dataFrom).toBe(76);
@@ -334,7 +335,7 @@ describe('PaginationService', () => {
       const spy = jest.spyOn(service, 'processOnPageChanged');
       mockGridOption.pagination.pageNumber = 2;
 
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       service.goToPageNumber(2);
 
       expect(service.dataFrom).toBe(26);
@@ -364,7 +365,7 @@ describe('PaginationService', () => {
       const spy = jest.fn();
       mockGridOption.backendServiceApi.preProcess = spy;
 
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       service.processOnPageChanged(1);
 
       expect(spy).toHaveBeenCalled();
@@ -379,7 +380,7 @@ describe('PaginationService', () => {
       jest.spyOn(mockGridOption.backendServiceApi, 'process').mockReturnValue(promise);
 
       try {
-        service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+        service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
         await service.processOnPageChanged(1);
       } catch (e) {
         expect(mockBackendError).toHaveBeenCalledWith(mockError, mockGridOption.backendServiceApi);
@@ -395,7 +396,7 @@ describe('PaginationService', () => {
       const promise = new Promise((resolve) => setTimeout(() => resolve(processResult), 1));
       jest.spyOn(mockGridOption.backendServiceApi, 'process').mockReturnValue(promise);
 
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       service.processOnPageChanged(1);
 
       setTimeout(() => {
@@ -410,7 +411,7 @@ describe('PaginationService', () => {
       const setPagingSpy = jest.spyOn(dataviewStub, 'setPagingOptions');
 
       mockGridOption.backendServiceApi = null;
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       service.processOnPageChanged(1);
 
       expect(setPagingSpy).toHaveBeenCalledWith({ pageSize: 25, pageNum: 0 });
@@ -426,7 +427,7 @@ describe('PaginationService', () => {
       mockGridOption.pagination.pageNumber = 2;
       mockGridOption.pagination.totalItems = 0;
 
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       service.recalculateFromToIndexes();
 
       expect(service.dataFrom).toBe(0);
@@ -438,7 +439,7 @@ describe('PaginationService', () => {
       mockGridOption.pagination.pageNumber = 2;
       mockGridOption.pagination.totalItems = 85;
 
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       service.recalculateFromToIndexes();
 
       expect(service.dataFrom).toBe(26);
@@ -450,7 +451,7 @@ describe('PaginationService', () => {
       mockGridOption.pagination.pageNumber = 4;
       mockGridOption.pagination.totalItems = 85;
 
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       service.recalculateFromToIndexes();
 
       expect(service.dataFrom).toBe(76);
@@ -478,7 +479,7 @@ describe('PaginationService', () => {
       try {
         // @ts-ignore
         mockGridOption.backendServiceApi = {};
-        service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+        service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
         service.refreshPagination();
       } catch (e) {
         expect(e.toString()).toContain(`BackendServiceApi requires the following 2 properties "process" and "service" to be defined.`);
@@ -490,7 +491,7 @@ describe('PaginationService', () => {
       const resetSpy = jest.spyOn(service, 'resetPagination');
       const refreshSpy = jest.spyOn(service, 'refreshPagination');
 
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       fnCallbacks['onFilterCleared'](true);
 
       expect(resetSpy).toHaveBeenCalled();
@@ -502,7 +503,7 @@ describe('PaginationService', () => {
       const resetSpy = jest.spyOn(service, 'resetPagination');
       const refreshSpy = jest.spyOn(service, 'refreshPagination');
 
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       fnCallbacks['onFilterChanged']({ columnId: 'field1', operator: '=', searchTerms: [] });
 
       expect(pubSubSpy).toHaveBeenCalledWith('onPaginationChanged', {
@@ -516,7 +517,7 @@ describe('PaginationService', () => {
   describe('resetPagination method', () => {
     it('should call "refreshPagination" with 2 arguments True when calling the method', () => {
       const spy = jest.spyOn(service, 'refreshPagination');
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       service.resetPagination();
 
       expect(spy).toHaveBeenCalledWith(true, true);
@@ -524,7 +525,7 @@ describe('PaginationService', () => {
 
     it('should call "refreshPagination" with True and False arguments when calling the method with False being passed as input argument', () => {
       const spy = jest.spyOn(service, 'refreshPagination');
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       service.resetPagination(false);
 
       expect(spy).toHaveBeenCalledWith(true, false);
@@ -535,7 +536,7 @@ describe('PaginationService', () => {
       const setPagingSpy = jest.spyOn(dataviewStub, 'setPagingOptions');
 
       mockGridOption.backendServiceApi = null;
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, null);
+      service.init(gridStub, mockGridOption.pagination, null);
       service.resetPagination();
 
       expect(setPagingSpy).toHaveBeenCalledWith({ pageSize: 25, pageNum: 0 });
@@ -557,7 +558,7 @@ describe('PaginationService', () => {
       const pubSubSpy = jest.spyOn(mockPubSub, 'publish');
       const recalculateSpy = jest.spyOn(service, 'recalculateFromToIndexes');
 
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       fnCallbacks['onItemAdded'](mockItems);
 
       expect(recalculateSpy).toHaveBeenCalledTimes(2);
@@ -573,7 +574,7 @@ describe('PaginationService', () => {
       const pubSubSpy = jest.spyOn(mockPubSub, 'publish');
       const recalculateSpy = jest.spyOn(service, 'recalculateFromToIndexes');
 
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       fnCallbacks['onItemAdded'](mockItems);
 
       expect(recalculateSpy).toHaveBeenCalledTimes(2);
@@ -587,7 +588,7 @@ describe('PaginationService', () => {
     it('should call "processOnItemAddedOrRemoved" and expect not onPaginationChanged to be triggered and the (To) to remain the same when "onItemAdded" is triggered without any items', () => {
       const recalculateSpy = jest.spyOn(service, 'recalculateFromToIndexes');
 
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       fnCallbacks['onItemAdded'](null);
 
       expect(recalculateSpy).toHaveBeenCalledTimes(1);
@@ -600,7 +601,7 @@ describe('PaginationService', () => {
       const pubSubSpy = jest.spyOn(mockPubSub, 'publish');
       const recalculateSpy = jest.spyOn(service, 'recalculateFromToIndexes');
 
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       fnCallbacks['onItemDeleted'](mockItems);
 
       // called 2x times by init() then by processOnItemAddedOrRemoved()
@@ -617,7 +618,7 @@ describe('PaginationService', () => {
       const pubSubSpy = jest.spyOn(mockPubSub, 'publish');
       const recalculateSpy = jest.spyOn(service, 'recalculateFromToIndexes');
 
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       fnCallbacks['onItemDeleted'](mockItems);
 
       expect(recalculateSpy).toHaveBeenCalledTimes(2); // called 2x times by init() then by processOnItemAddedOrRemoved()
@@ -630,7 +631,7 @@ describe('PaginationService', () => {
       const recalculateSpy = jest.spyOn(service, 'recalculateFromToIndexes');
 
       // service.totalItems = 85;
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       fnCallbacks['onItemDeleted'](null);
 
       // called 1x time by init() only
@@ -644,7 +645,7 @@ describe('PaginationService', () => {
       mockGridOption.pagination.totalItems = 100;
       const mockItems = { name: 'John' };
 
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       fnCallbacks['onItemAdded'](mockItems);
       service.changeItemPerPage(200);
 
@@ -657,7 +658,7 @@ describe('PaginationService', () => {
       mockGridOption.pagination.totalItems = 99;
       const mockItems = { name: 'John' };
 
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       fnCallbacks['onItemAdded'](mockItems);
       service.changeItemPerPage(100);
 
@@ -679,7 +680,7 @@ describe('PaginationService', () => {
       const onPagingSpy = jest.spyOn(dataviewStub.onPagingInfoChanged, 'subscribe');
       const setRefreshSpy = jest.spyOn(dataviewStub, 'setRefreshHints');
       const setPagingSpy = jest.spyOn(dataviewStub, 'setPagingOptions');
-      service.init(gridStub, dataviewStub, mockGridOption.pagination);
+      service.init(gridStub, mockGridOption.pagination);
 
       setTimeout(() => {
         expect(service.paginationOptions).toEqual(mockGridOption.pagination);
@@ -698,7 +699,7 @@ describe('PaginationService', () => {
       const setRefreshSpy = jest.spyOn(dataviewStub, 'setRefreshHints');
       const setPagingSpy = jest.spyOn(dataviewStub, 'setPagingOptions');
       mockGridOption.pagination.pageNumber = 3;
-      service.init(gridStub, dataviewStub, mockGridOption.pagination);
+      service.init(gridStub, mockGridOption.pagination);
 
       setTimeout(() => {
         expect(service.paginationOptions).toEqual(mockGridOption.pagination);
@@ -715,7 +716,7 @@ describe('PaginationService', () => {
       const expectedNewTotal = 22;
       const mockSlickPagingInfo = { pageSize: 5, pageNum: 2, totalRows: expectedNewTotal, totalPages: 3, dataView: dataviewStub };
 
-      service.init(gridStub, dataviewStub, mockGridOption.pagination);
+      service.init(gridStub, mockGridOption.pagination);
       dataviewStub.onPagingInfoChanged.notify(mockSlickPagingInfo, new Slick.EventData(), dataviewStub);
 
       expect(service.totalItems).toBe(expectedNewTotal);
@@ -736,7 +737,7 @@ describe('PaginationService', () => {
         process: jest.fn(),
       };
 
-      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.init(gridStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       service.togglePaginationVisibility(false);
 
       expect(sharedService.gridOptions.enablePagination).toBeFalse();
@@ -749,7 +750,7 @@ describe('PaginationService', () => {
       const setPagingSpy = jest.spyOn(dataviewStub, 'setPagingOptions');
       mockGridOption.backendServiceApi = null;
 
-      service.init(gridStub, dataviewStub, mockGridOption.pagination);
+      service.init(gridStub, mockGridOption.pagination);
       service.togglePaginationVisibility(false);
 
       expect(sharedService.gridOptions.enablePagination).toBeFalse();
@@ -763,7 +764,7 @@ describe('PaginationService', () => {
       const gotoSpy = jest.spyOn(service, 'goToFirstPage');
       mockGridOption.backendServiceApi = null;
 
-      service.init(gridStub, dataviewStub, mockGridOption.pagination);
+      service.init(gridStub, mockGridOption.pagination);
       service.togglePaginationVisibility(true);
 
       expect(sharedService.gridOptions.enablePagination).toBeTrue();
diff --git a/packages/common/src/services/__tests__/shared.service.spec.ts b/packages/common/src/services/__tests__/shared.service.spec.ts
index 2b4b049f7..763fc2f4d 100644
--- a/packages/common/src/services/__tests__/shared.service.spec.ts
+++ b/packages/common/src/services/__tests__/shared.service.spec.ts
@@ -1,12 +1,14 @@
-import { SharedService } from '..';
-import { Column, CurrentPagination, GridOption } from '../../interfaces/index';
+import { SharedService } from '../shared.service';
+import { PubSubService } from '../pubSub.service';
+import { Column, CurrentPagination, DataView, GridOption, SlickGrid } from '../../interfaces/index';
+import { ExcelExportService } from '../excelExport.service';
 
 jest.mock('flatpickr', () => { });
 
 const dataviewStub = {
   onRowCountChanged: jest.fn(),
   onRowsChanged: jest.fn(),
-};
+} as unknown as DataView;
 
 const gridStub = {
   autosizeColumns: jest.fn(),
@@ -17,7 +19,14 @@ const gridStub = {
   onColumnsReordered: jest.fn(),
   onColumnsResized: jest.fn(),
   registerPlugin: jest.fn(),
-};
+} as unknown as SlickGrid;
+
+const pubSubServiceStub = {
+  publish: jest.fn(),
+  subscribe: jest.fn(),
+  unsubscribe: jest.fn(),
+  unsubscribeAll: jest.fn(),
+} as PubSubService;
 
 describe('Shared Service', () => {
   let mockColumns: Column[];
@@ -248,4 +257,34 @@ describe('Shared Service', () => {
     service.hideHeaderRowAfterPageLoad = true;
     expect(service.hideHeaderRowAfterPageLoad).toEqual(true);
   });
+
+  it('should call "internalPubSubService" GETTER and SETTER expect same value to be returned', () => {
+    service.internalPubSubService = pubSubServiceStub;
+    expect(service.internalPubSubService).toEqual(pubSubServiceStub);
+  });
+
+  it('should call "externalRegisteredServices" GETTER and return all columns', () => {
+    // @ts-ignore
+    const mockRegisteredServices = [new ExcelExportService()];
+    const spy = jest.spyOn(service, 'externalRegisteredServices', 'get').mockReturnValue(mockRegisteredServices);
+
+    const columns = service.externalRegisteredServices;
+
+    expect(spy).toHaveBeenCalled();
+    expect(columns).toEqual(mockRegisteredServices);
+  });
+
+  it('should call "externalRegisteredServices" SETTER and expect GETTER to return the same', () => {
+    // @ts-ignore
+    const mockRegisteredServices = [new ExcelExportService()];
+    const getSpy = jest.spyOn(service, 'externalRegisteredServices', 'get');
+    const setSpy = jest.spyOn(service, 'externalRegisteredServices', 'set');
+
+    service.externalRegisteredServices = mockRegisteredServices;
+    const columns = service.externalRegisteredServices;
+
+    expect(getSpy).toHaveBeenCalled();
+    expect(setSpy).toHaveBeenCalled();
+    expect(columns).toEqual(mockRegisteredServices);
+  });
 });
diff --git a/packages/common/src/services/__tests__/sort.service.spec.ts b/packages/common/src/services/__tests__/sort.service.spec.ts
index 774a27557..a2e7f57a5 100644
--- a/packages/common/src/services/__tests__/sort.service.spec.ts
+++ b/packages/common/src/services/__tests__/sort.service.spec.ts
@@ -4,9 +4,11 @@ import {
   Column,
   ColumnSort,
   CurrentSorter,
+  DataView,
   GridOption,
   MultiColumnSort,
   SlickEventHandler,
+  SlickGrid,
 } from '../../interfaces/index';
 import { SortComparers } from '../../sortComparers';
 import { SortService } from '../sort.service';
@@ -35,7 +37,7 @@ const dataViewStub = {
   sort: jest.fn(),
   reSort: jest.fn(),
   setItems: jest.fn(),
-};
+} as unknown as DataView;
 
 const backendServiceStub = {
   buildQuery: jest.fn(),
@@ -58,7 +60,7 @@ const gridStub = {
   onSort: new Slick.Event(),
   render: jest.fn(),
   setSortColumns: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 const pubSubServiceStub = {
   publish: jest.fn(),
diff --git a/packages/common/src/services/__tests__/treeData.service.spec.ts b/packages/common/src/services/__tests__/treeData.service.spec.ts
index 00db5c41b..5c95fdc0e 100644
--- a/packages/common/src/services/__tests__/treeData.service.spec.ts
+++ b/packages/common/src/services/__tests__/treeData.service.spec.ts
@@ -1,4 +1,4 @@
-import { Column, GridOption, SlickEventHandler } from '../../interfaces/index';
+import { Column, DataView, GridOption, SlickEventHandler, SlickGrid } from '../../interfaces/index';
 import { SharedService } from '../shared.service';
 import { TreeDataService } from '../treeData.service';
 
@@ -19,7 +19,7 @@ const dataViewStub = {
   reSort: jest.fn(),
   setItems: jest.fn(),
   updateItem: jest.fn(),
-};
+} as unknown as DataView;
 
 const gridStub = {
   autosizeColumns: jest.fn(),
@@ -33,7 +33,7 @@ const gridStub = {
   onClick: new Slick.Event(),
   render: jest.fn(),
   setSortColumns: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('SortService', () => {
   let service: TreeDataService;
diff --git a/packages/common/src/services/excelExport.service.ts b/packages/common/src/services/excelExport.service.ts
index 5b7ba4abb..21200d545 100644
--- a/packages/common/src/services/excelExport.service.ts
+++ b/packages/common/src/services/excelExport.service.ts
@@ -1,12 +1,15 @@
-import { ExcelExportOption } from '../interfaces/index';
+import { ExcelExportOption, SlickGrid } from '../interfaces/index';
+import { SharedService } from '../services/shared.service';
 
 export abstract class ExcelExportService {
+  /** ExcelExportService class name which is use to find service instance in the external registered services */
+  className: string;
+
   /**
    * Initialize the Export Service
    * @param grid
-   * @param dataView
    */
-  init(grid: any, dataView: any): void {
+  init(grid: SlickGrid, sharedService: SharedService): void {
     throw new Error('ExcelExportService the "init" method must be implemented');
   }
 
diff --git a/packages/common/src/services/export-utilities.ts b/packages/common/src/services/export-utilities.ts
index ae952156a..c8d09722a 100644
--- a/packages/common/src/services/export-utilities.ts
+++ b/packages/common/src/services/export-utilities.ts
@@ -1,6 +1,6 @@
-import { Column, ExportOption, ExcelExportOption, Formatter } from '../interfaces/index';
+import { Column, ExportOption, ExcelExportOption, Formatter, SlickGrid } from '../interfaces/index';
 
-export function exportWithFormatterWhenDefined(row: number, col: number, dataContext: any, columnDef: Column, grid: any, exportOptions?: ExportOption | ExcelExportOption) {
+export function exportWithFormatterWhenDefined(row: number, col: number, dataContext: any, columnDef: Column, grid: SlickGrid, exportOptions?: ExportOption | ExcelExportOption) {
   let output = '';
   let isEvaluatingFormatter = false;
 
diff --git a/packages/common/src/services/extension.service.ts b/packages/common/src/services/extension.service.ts
index 9d85c2685..570d4294c 100644
--- a/packages/common/src/services/extension.service.ts
+++ b/packages/common/src/services/extension.service.ts
@@ -49,7 +49,6 @@ export class ExtensionService {
 
   /** Dispose of all the controls & plugins */
   dispose() {
-    this.sharedService.grid = null;
     this.sharedService.visibleColumns = [];
 
     // dispose of each control/plugin & reset the list
@@ -220,16 +219,18 @@ export class ExtensionService {
 
       // manually register other plugins
       if (this.sharedService.gridOptions.registerPlugins !== undefined) {
-        if (Array.isArray(this.sharedService.gridOptions.registerPlugins)) {
-          this.sharedService.gridOptions.registerPlugins.forEach((plugin) => {
-            const instance = this.sharedService.grid.registerPlugin(plugin);
-            this._extensionList.push({ name: ExtensionName.noname, class: null, instance });
+        const grid = this.sharedService.grid;
+        const gridOptions = this.sharedService.gridOptions;
+
+        if (Array.isArray(gridOptions.registerPlugins)) {
+          gridOptions.registerPlugins.forEach((plugin) => {
+            grid.registerPlugin(plugin);
+            this._extensionList.push({ name: ExtensionName.noname, class: null, instance: grid.getPluginByName(plugin.name) });
           });
         } else {
-          this.sharedService.grid.registerPlugin(this.sharedService.gridOptions.registerPlugins);
-          const plugin = this.sharedService.gridOptions.registerPlugins;
-          const instance = this.sharedService.grid.registerPlugin(plugin);
-          this._extensionList.push({ name: ExtensionName.noname, class: null, instance });
+          const plugin = gridOptions.registerPlugins;
+          grid.registerPlugin(plugin);
+          this._extensionList.push({ name: ExtensionName.noname, class: null, instance: grid.getPluginByName(plugin.name) });
         }
       }
     }
diff --git a/packages/common/src/services/export.service.ts b/packages/common/src/services/fileExport.service.ts
similarity index 53%
rename from packages/common/src/services/export.service.ts
rename to packages/common/src/services/fileExport.service.ts
index 8fc5adbd9..aeb3f4041 100644
--- a/packages/common/src/services/export.service.ts
+++ b/packages/common/src/services/fileExport.service.ts
@@ -1,12 +1,15 @@
-import { ExportOption } from '../interfaces/index';
+import { ExportOption, SlickGrid } from '../interfaces/index';
+import { SharedService } from './shared.service';
+
+export abstract class FileExportService {
+  /** ExcelExportService class name which is use to find service instance in the external registered services */
+  className: string;
 
-export abstract class ExportService {
   /**
    * Initialize the Export Service
    * @param grid
-   * @param dataView
    */
-  init(grid: any, dataView: any): void {
+  init(grid: SlickGrid, sharedService: SharedService): void {
     throw new Error('ExportService the "init" method must be implemented');
   }
 
diff --git a/packages/common/src/services/filter.service.ts b/packages/common/src/services/filter.service.ts
index 88d7359bd..a963a2433 100644
--- a/packages/common/src/services/filter.service.ts
+++ b/packages/common/src/services/filter.service.ts
@@ -16,6 +16,7 @@ import {
   ColumnFilter,
   ColumnFilters,
   CurrentFilter,
+  DataView,
   Filter,
   FilterArguments,
   FilterCallbackArg,
@@ -24,6 +25,7 @@ import {
   GridOption,
   SlickEvent,
   SlickEventHandler,
+  SlickGrid,
 } from './../interfaces/index';
 import { executeBackendCallback, refreshBackendDataset } from './backend-utilities';
 import { getDescendantProperty } from './utilities';
@@ -43,8 +45,8 @@ export class FilterService {
   private _firstColumnIdRendered = '';
   private _filtersMetadata: any[] = [];
   private _columnFilters: ColumnFilters = {};
-  private _dataView: any;
-  private _grid: any;
+  private _dataView: DataView;
+  private _grid: SlickGrid;
   private _onSearchChange: SlickEvent;
   private _tmpPreFilteredData: number[];
 
@@ -82,7 +84,7 @@ export class FilterService {
    * Initialize the Service
    * @param grid
    */
-  init(grid: any): void {
+  init(grid: SlickGrid): void {
     this._grid = grid;
 
     if (this._gridOptions && this._gridOptions.enableTreeData && this._gridOptions.treeDataOptions) {
@@ -133,7 +135,7 @@ export class FilterService {
    * Bind a backend filter hook to the grid
    * @param grid SlickGrid Grid object
    */
-  bindBackendOnFilter(grid: any, dataView: any) {
+  bindBackendOnFilter(grid: SlickGrid, dataView: DataView) {
     this._dataView = dataView;
     this._filtersMetadata = [];
 
@@ -160,7 +162,7 @@ export class FilterService {
    * @param gridOptions Grid Options object
    * @param dataView
    */
-  bindLocalOnFilter(grid: any, dataView: any) {
+  bindLocalOnFilter(grid: SlickGrid, dataView: DataView) {
     this._filtersMetadata = [];
     this._dataView = dataView;
 
@@ -309,7 +311,7 @@ export class FilterService {
     return true;
   }
 
-  getFilterConditionOptionsOrBoolean(item: any, columnFilter: ColumnFilter, columnId: string | number, grid: any, dataView: any): FilterConditionOption | boolean {
+  getFilterConditionOptionsOrBoolean(item: any, columnFilter: ColumnFilter, columnId: string | number, grid: SlickGrid, dataView: DataView): FilterConditionOption | boolean {
     let columnIndex = grid.getColumnIndex(columnId) as number;
     let columnDef = grid.getColumns()[columnIndex] as Column;
 
@@ -678,7 +680,7 @@ export class FilterService {
   // -------------------
 
   /** Add all created filters (from their template) to the header row section area */
-  private addFilterTemplateToHeaderRow(args: { column: Column; grid: any; node: HTMLElement }, isFilterFirstRender = true) {
+  private addFilterTemplateToHeaderRow(args: { column: Column; grid: SlickGrid; node: HTMLElement }, isFilterFirstRender = true) {
     const columnDef = args.column;
     const columnId = columnDef && columnDef.id || '';
 
diff --git a/packages/common/src/services/grid.service.ts b/packages/common/src/services/grid.service.ts
index 36d9d84d6..3f6e4f455 100644
--- a/packages/common/src/services/grid.service.ts
+++ b/packages/common/src/services/grid.service.ts
@@ -1,11 +1,13 @@
 import {
   CellArgs,
   Column,
+  DataView,
   GridOption,
   GridServiceDeleteOption,
   GridServiceInsertOption,
   GridServiceUpdateOption,
-  OnEventArgs
+  OnEventArgs,
+  SlickGrid,
 } from '../interfaces/index';
 import { ExtensionService } from './extension.service';
 import { FilterService } from './filter.service';
@@ -22,8 +24,7 @@ const GridServiceInsertOptionDefaults: GridServiceInsertOption = { highlightRow:
 const GridServiceUpdateOptionDefaults: GridServiceUpdateOption = { highlightRow: true, selectRow: false, scrollRowIntoView: false, triggerEvent: true };
 
 export class GridService {
-  private _grid: any;
-  private _dataView: any;
+  private _grid: SlickGrid;
 
   constructor(
     private extensionService: ExtensionService,
@@ -34,14 +35,18 @@ export class GridService {
     private sortService: SortService
   ) { }
 
+  /** Getter of SlickGrid DataView object */
+  get _dataView(): DataView {
+    return this._grid && this._grid.getData && this._grid.getData();
+  }
+
   /** Getter for the Grid Options pulled through the Grid Object */
   private get _gridOptions(): GridOption {
     return (this._grid && this._grid.getOptions) ? this._grid.getOptions() : {};
   }
 
-  init(grid: any, dataView: any): void {
+  init(grid: SlickGrid): void {
     this._grid = grid;
-    this._dataView = dataView;
   }
 
   /** Clear all Filters & Sorts */
diff --git a/packages/common/src/services/gridEvent.service.ts b/packages/common/src/services/gridEvent.service.ts
index 8e5244761..c16a674c7 100644
--- a/packages/common/src/services/gridEvent.service.ts
+++ b/packages/common/src/services/gridEvent.service.ts
@@ -1,4 +1,4 @@
-import { CellArgs, Column, GridOption, OnEventArgs, SlickEventHandler } from './../interfaces/index';
+import { CellArgs, Column, DataView, GridOption, OnEventArgs, SlickEventHandler, SlickGrid } from './../interfaces/index';
 
 // using external non-typed js libraries
 declare const Slick: any;
@@ -15,7 +15,7 @@ export class GridEventService {
   }
 
   /* OnCellChange Event */
-  bindOnBeforeEditCell(grid: any, dataView: any) {
+  bindOnBeforeEditCell(grid: SlickGrid, dataView: DataView) {
     // subscribe to this Slickgrid event of onBeforeEditCell
     this._eventHandler.subscribe(grid.onBeforeEditCell, (e: KeyboardEvent | MouseEvent, args: CellArgs) => {
       if (!e || !args || !grid || args.cell === undefined || !grid.getColumns || !grid.getDataItem) {
@@ -42,7 +42,7 @@ export class GridEventService {
   }
 
   /* OnCellChange Event */
-  bindOnCellChange(grid: any, dataView: any) {
+  bindOnCellChange(grid: SlickGrid, dataView: DataView) {
     // subscribe to this Slickgrid event of onCellChange
     this._eventHandler.subscribe(grid.onCellChange, (e: KeyboardEvent | MouseEvent, args: CellArgs) => {
       if (!e || !args || !grid || args.cell === undefined || !grid.getColumns || !grid.getDataItem) {
@@ -69,7 +69,7 @@ export class GridEventService {
   }
 
   /* OnClick Event */
-  bindOnClick(grid: any, dataView: any) {
+  bindOnClick(grid: SlickGrid, dataView: DataView) {
     this._eventHandler.subscribe(grid.onClick, (e: KeyboardEvent | MouseEvent, args: CellArgs) => {
       if (!e || !args || !grid || args.cell === undefined || !grid.getColumns || !grid.getDataItem) {
         return;
diff --git a/packages/common/src/services/gridState.service.ts b/packages/common/src/services/gridState.service.ts
index bc240abea..1f0b1bfc0 100644
--- a/packages/common/src/services/gridState.service.ts
+++ b/packages/common/src/services/gridState.service.ts
@@ -12,8 +12,10 @@ import {
   CurrentPagination,
   CurrentRowSelection,
   CurrentSorter,
+  DataView,
   GridOption,
   GridState,
+  SlickGrid,
   Subscription,
 } from '../interfaces/index';
 import { ExtensionService } from './extension.service';
@@ -29,8 +31,7 @@ export class GridStateService {
   private _eventHandler = new Slick.EventHandler();
   private _columns: Column[] = [];
   private _currentColumns: CurrentColumn[] = [];
-  private _dataView: any;
-  private _grid: any;
+  private _grid: SlickGrid;
   private _subscriptions: Subscription[] = [];
   private _selectedRowDataContextIds: Array<number | string> | undefined = []; // used with row selection
   private _selectedFilteredRowDataContextIds: Array<number | string> | undefined = []; // used with row selection
@@ -44,6 +45,11 @@ export class GridStateService {
     private sortService: SortService
   ) { }
 
+  /** Getter of SlickGrid DataView object */
+  get _dataView(): DataView {
+    return this._grid && this._grid.getData && this._grid.getData();
+  }
+
   /** Getter for the Grid Options pulled through the Grid Object */
   private get _gridOptions(): GridOption {
     return (this._grid && this._grid.getOptions) ? this._grid.getOptions() : {};
@@ -70,9 +76,8 @@ export class GridStateService {
    * Initialize the Service
    * @param grid
    */
-  init(grid: any, dataView: any): void {
+  init(grid: SlickGrid): void {
     this._grid = grid;
-    this._dataView = dataView;
     this.subscribeToAllGridChanges(grid);
   }
 
@@ -150,7 +155,7 @@ export class GridStateService {
    * @param grid
    * @param currentColumns
    */
-  getAssociatedGridColumns(grid: any, currentColumns: CurrentColumn[]): Column[] {
+  getAssociatedGridColumns(grid: SlickGrid, currentColumns: CurrentColumn[]): Column[] {
     const columns: Column[] = [];
     const gridColumns: Column[] = grid.getColumns();
 
@@ -302,7 +307,7 @@ export class GridStateService {
    * Subscribe to all necessary SlickGrid or Service Events that deals with a Grid change,
    * when triggered, we will publish a Grid State Event with current Grid State
    */
-  subscribeToAllGridChanges(grid: any) {
+  subscribeToAllGridChanges(grid: SlickGrid) {
     // Subscribe to Event Emitter of Filter changed
     this._subscriptions.push(
       this.pubSubService.subscribe('onFilterChanged', (currentFilters: CurrentFilter[]) => {
@@ -387,7 +392,7 @@ export class GridStateService {
    * @param event name
    * @param grid
    */
-  bindSlickGridColumnChangeEventToGridStateChange(eventName: string, grid: any) {
+  bindSlickGridColumnChangeEventToGridStateChange(eventName: string, grid: SlickGrid) {
     const slickGridEvent = grid && grid[eventName];
 
     if (slickGridEvent && typeof slickGridEvent.subscribe === 'function') {
diff --git a/packages/common/src/services/groupingAndColspan.service.ts b/packages/common/src/services/groupingAndColspan.service.ts
index 3867379e5..8f9f17b69 100644
--- a/packages/common/src/services/groupingAndColspan.service.ts
+++ b/packages/common/src/services/groupingAndColspan.service.ts
@@ -1,7 +1,9 @@
 import {
   Column,
+  DataView,
   GridOption,
   SlickEventHandler,
+  SlickGrid,
 } from './../interfaces/index';
 import { ExtensionUtility } from '../extensions/extensionUtility';
 
@@ -11,12 +13,17 @@ declare const Slick: any;
 
 export class GroupingAndColspanService {
   private _eventHandler: SlickEventHandler;
-  private _grid: any;
+  private _grid: SlickGrid;
 
   constructor(private extensionUtility: ExtensionUtility) {
     this._eventHandler = new Slick.EventHandler();
   }
 
+  /** Getter of SlickGrid DataView object */
+  get _dataView(): DataView {
+    return this._grid && this._grid.getData && this._grid.getData();
+  }
+
   /** Getter of the SlickGrid Event Handler */
   get eventHandler(): SlickEventHandler {
     return this._eventHandler;
@@ -37,9 +44,9 @@ export class GroupingAndColspanService {
    * @param {object} grid
    * @param {object} resizerPlugin
    */
-  init(grid: any, resizerPlugin: any) {
+  init(grid: SlickGrid) {
     this._grid = grid;
-    const dataView = grid.getData && grid.getData();
+    const resizerPlugin = grid.getPluginByName('Resizer');
 
     if (grid && this._gridOptions) {
       // When dealing with Pre-Header Grouping colspan, we need to re-create the pre-header in multiple occasions
@@ -48,8 +55,10 @@ export class GroupingAndColspanService {
         this._eventHandler.subscribe(grid.onSort, () => this.renderPreHeaderRowGroupingTitles());
         this._eventHandler.subscribe(grid.onColumnsResized, () => this.renderPreHeaderRowGroupingTitles());
         this._eventHandler.subscribe(grid.onColumnsReordered, () => this.renderPreHeaderRowGroupingTitles());
-        this._eventHandler.subscribe(resizerPlugin.onGridAfterResize, () => this.renderPreHeaderRowGroupingTitles());
-        this._eventHandler.subscribe(dataView.onRowCountChanged, () => this.renderPreHeaderRowGroupingTitles());
+        this._eventHandler.subscribe(this._dataView.onRowCountChanged, () => this.renderPreHeaderRowGroupingTitles());
+        if (resizerPlugin && resizerPlugin.onGridAfterResize) {
+          this._eventHandler.subscribe(resizerPlugin.onGridAfterResize, () => this.renderPreHeaderRowGroupingTitles());
+        }
 
         // also not sure why at this point, but it seems that I need to call the 1st create in a delayed execution
         // probably some kind of timing issues and delaying it until the grid is fully ready does help
diff --git a/packages/common/src/services/index.ts b/packages/common/src/services/index.ts
index 00ed2c9a8..de2f6a276 100644
--- a/packages/common/src/services/index.ts
+++ b/packages/common/src/services/index.ts
@@ -1,7 +1,7 @@
 export * from './collection.service';
 export * from './excelExport.service';
 export * from './export-utilities';
-export * from './export.service';
+export * from './fileExport.service';
 export * from './extension.service';
 export * from './filter.service';
 export * from './grid.service';
diff --git a/packages/common/src/services/pagination.service.ts b/packages/common/src/services/pagination.service.ts
index 5514324e8..7f0009f64 100644
--- a/packages/common/src/services/pagination.service.ts
+++ b/packages/common/src/services/pagination.service.ts
@@ -1,7 +1,7 @@
 import * as isequal_ from 'lodash.isequal';
 const isequal = isequal_; // patch to fix rollup to work
 
-import { BackendServiceApi, CurrentPagination, Pagination, ServicePagination, Subscription } from '../interfaces/index';
+import { BackendServiceApi, CurrentPagination, DataView, Pagination, ServicePagination, SlickGrid, Subscription, SlickEventData } from '../interfaces/index';
 import { executeBackendProcessesCallback, onBackendError } from './backend-utilities';
 import { SharedService } from './shared.service';
 import { PubSubService } from './pubSub.service';
@@ -24,12 +24,17 @@ export class PaginationService {
   private _paginationOptions: Pagination;
   private _subscriptions: Subscription[] = [];
 
-  dataView: any;
-  grid: any;
+  /** SlickGrid Grid object */
+  grid: SlickGrid;
 
   /** Constructor */
   constructor(private pubSubService: PubSubService, private sharedService: SharedService) { }
 
+  /** Getter of SlickGrid DataView object */
+  get dataView(): DataView {
+    return this.grid && this.grid.getData && this.grid.getData();
+  }
+
   set paginationOptions(paginationOptions: Pagination) {
     this._paginationOptions = paginationOptions;
   }
@@ -73,9 +78,8 @@ export class PaginationService {
     }
   }
 
-  init(grid: any, dataView: any, paginationOptions: Pagination, backendServiceApi?: BackendServiceApi) {
+  init(grid: SlickGrid, paginationOptions: Pagination, backendServiceApi?: BackendServiceApi) {
     this._availablePageSizes = paginationOptions.pageSizes;
-    this.dataView = dataView;
     this.grid = grid;
     this._backendServiceApi = backendServiceApi;
     this._paginationOptions = paginationOptions;
@@ -87,7 +91,7 @@ export class PaginationService {
     }
 
     if (this._isLocalGrid && this.dataView) {
-      this.dataView.onPagingInfoChanged.subscribe((e: Event, pagingInfo: { totalRows: number; pageNum: number; }) => {
+      this.dataView.onPagingInfoChanged.subscribe((_e: SlickEventData, pagingInfo: { totalRows: number; pageNum: number; }) => {
         if (this._totalItems !== pagingInfo.totalRows) {
           this._totalItems = pagingInfo.totalRows;
           this._paginationOptions.totalItems = this._totalItems;
@@ -208,7 +212,7 @@ export class PaginationService {
     }
   }
 
-  refreshPagination(isPageNumberReset: boolean = false, triggerChangedEvent = true) {
+  refreshPagination(isPageNumberReset = false, triggerChangedEvent = true) {
     const previousPagination = { ...this.getCurrentPagination() };
 
     if (this._paginationOptions) {
diff --git a/packages/common/src/services/shared.service.ts b/packages/common/src/services/shared.service.ts
index eea28144a..343158b7e 100644
--- a/packages/common/src/services/shared.service.ts
+++ b/packages/common/src/services/shared.service.ts
@@ -1,15 +1,18 @@
-import { Column, GridOption, CurrentPagination } from '../interfaces/index';
+import { Column, CurrentPagination, DataView, GridOption, SlickGrid } from '../interfaces/index';
+import { PubSubService } from '..';
 
 export class SharedService {
   private _allColumns: Column[];
-  private _dataView: any;
+  private _dataView: DataView;
   private _groupItemMetadataProvider: any;
-  private _grid: any;
+  private _grid: SlickGrid;
   private _gridOptions: GridOption;
   private _currentPagination: CurrentPagination;
   private _visibleColumns: Column[];
   private _hideHeaderRowAfterPageLoad = false;
   private _hierarchicalDataset: any[];
+  private _internalPubSubService: PubSubService;
+  private _externalRegisteredServices: any[];
 
   // --
   // public
@@ -39,20 +42,20 @@ export class SharedService {
   }
 
   /** Getter for SlickGrid DataView object */
-  get dataView(): any {
+  get dataView(): DataView {
     return this._dataView;
   }
   /** Setter for SlickGrid DataView object */
-  set dataView(dataView: any) {
+  set dataView(dataView: DataView) {
     this._dataView = dataView;
   }
 
   /** Getter for SlickGrid Grid object */
-  get grid(): any {
+  get grid(): SlickGrid {
     return this._grid;
   }
   /** Setter for SlickGrid Grid object */
-  set grid(grid: any) {
+  set grid(grid: SlickGrid) {
     this._grid = grid;
   }
 
@@ -84,6 +87,24 @@ export class SharedService {
     this._hideHeaderRowAfterPageLoad = hideHeaderRowAfterPageLoad;
   }
 
+  /** Getter to know if user want to hide header row after 1st page load */
+  get internalPubSubService(): PubSubService {
+    return this._internalPubSubService;
+  }
+  /** Setter for knowing if user want to hide header row after 1st page load */
+  set internalPubSubService(internalPubSubService: PubSubService) {
+    this._internalPubSubService = internalPubSubService;
+  }
+
+  /** Getter to know if user want to hide header row after 1st page load */
+  get externalRegisteredServices(): any[] {
+    return this._externalRegisteredServices;
+  }
+  /** Setter for knowing if user want to hide header row after 1st page load */
+  set externalRegisteredServices(externalRegisteredServices: any[]) {
+    this._externalRegisteredServices = externalRegisteredServices;
+  }
+
   /** Getter for the Visible Columns in the grid */
   get visibleColumns(): Column[] {
     return this._visibleColumns;
diff --git a/packages/common/src/services/sort.service.ts b/packages/common/src/services/sort.service.ts
index 843224247..244accc59 100644
--- a/packages/common/src/services/sort.service.ts
+++ b/packages/common/src/services/sort.service.ts
@@ -1,10 +1,12 @@
 import {
   Column,
   ColumnSort,
+  DataView,
   GridOption,
   CurrentSorter,
   SlickEventHandler,
   TreeDataOption,
+  SlickGrid,
 } from '../interfaces/index';
 import {
   EmitterType,
@@ -25,8 +27,8 @@ declare const Slick: any;
 export class SortService {
   private _currentLocalSorters: CurrentSorter[] = [];
   private _eventHandler: SlickEventHandler;
-  private _dataView: any;
-  private _grid: any;
+  private _dataView: DataView;
+  private _grid: SlickGrid;
   private _isBackendGrid = false;
 
   constructor(private sharedService: SharedService, private pubSubService: PubSubService) {
@@ -53,7 +55,7 @@ export class SortService {
    * @param grid SlickGrid Grid object
    * @param dataView SlickGrid DataView object
    */
-  bindBackendOnSort(grid: any, dataView: any) {
+  bindBackendOnSort(grid: SlickGrid, dataView: DataView) {
     this._isBackendGrid = true;
     this._grid = grid;
     this._dataView = dataView;
@@ -68,7 +70,7 @@ export class SortService {
    * @param gridOptions Grid Options object
    * @param dataView
    */
-  bindLocalOnSort(grid: any, dataView: any) {
+  bindLocalOnSort(grid: SlickGrid, dataView: DataView) {
     this._isBackendGrid = false;
     this._grid = grid;
     this._dataView = dataView;
@@ -171,18 +173,20 @@ export class SortService {
    */
   getCurrentColumnSorts(excludedColumnId?: string) {
     // getSortColumns() only returns sortAsc & columnId, we want the entire column definition
-    const oldSortColumns = this._grid && this._grid.getSortColumns();
-
-    // get the column definition but only keep column which are not equal to our current column
-    if (Array.isArray(oldSortColumns)) {
-      const sortedCols = oldSortColumns.reduce((cols: ColumnSort[], col: ColumnSort) => {
-        if (!excludedColumnId || col.columnId !== excludedColumnId) {
-          cols.push({ sortCol: this._columnDefinitions[this._grid.getColumnIndex(col.columnId)], sortAsc: col.sortAsc });
-        }
-        return cols;
-      }, []);
+    if (this._grid) {
+      const oldSortColumns = this._grid.getSortColumns();
+
+      // get the column definition but only keep column which are not equal to our current column
+      if (Array.isArray(oldSortColumns)) {
+        const sortedCols = oldSortColumns.reduce((cols: ColumnSort[], col: ColumnSort) => {
+          if (col && (!excludedColumnId || col.columnId !== excludedColumnId)) {
+            cols.push({ sortCol: this._columnDefinitions[this._grid.getColumnIndex(col.columnId || '')], sortAsc: col.sortAsc });
+          }
+          return cols;
+        }, []);
 
-      return sortedCols;
+        return sortedCols;
+      }
     }
     return [];
   }
@@ -253,7 +257,7 @@ export class SortService {
     }
   }
 
-  onBackendSortChanged(event: Event | undefined, args: { multiColumnSort?: boolean; grid: any; sortCols: ColumnSort[]; clearSortTriggered?: boolean }) {
+  onBackendSortChanged(event: Event | undefined, args: { multiColumnSort?: boolean; grid: SlickGrid; sortCols: ColumnSort[]; clearSortTriggered?: boolean }) {
     if (!args || !args.grid) {
       throw new Error('Something went wrong when trying to bind the "onBackendSortChanged(event, args)" function, it seems that "args" is not populated correctly');
     }
@@ -278,7 +282,7 @@ export class SortService {
   }
 
   /** When a Sort Changes on a Local grid (JSON dataset) */
-  onLocalSortChanged(grid: any, dataView: any, sortColumns: ColumnSort[], forceReSort = false) {
+  onLocalSortChanged(grid: SlickGrid, dataView: DataView, sortColumns: ColumnSort[], forceReSort = false) {
     const isTreeDataEnabled = this._gridOptions?.enableTreeData ?? false;
 
     if (grid && dataView) {
diff --git a/packages/common/src/services/translater.service.ts b/packages/common/src/services/translater.service.ts
index 8a5fe4c70..008bb2d84 100644
--- a/packages/common/src/services/translater.service.ts
+++ b/packages/common/src/services/translater.service.ts
@@ -7,7 +7,6 @@ export abstract class TranslaterService {
     throw new Error('TranslaterService "getCurrentLocale" method must be implemented');
   }
 
-
   /**
    * Method to set the locale to use in the App
    * @param locale
diff --git a/packages/common/src/services/treeData.service.ts b/packages/common/src/services/treeData.service.ts
index 774e9952f..d266ee4a2 100644
--- a/packages/common/src/services/treeData.service.ts
+++ b/packages/common/src/services/treeData.service.ts
@@ -1,11 +1,11 @@
-import { GridOption, SlickEventHandler } from '../interfaces/index';
+import { DataView, GridOption, SlickEventHandler, SlickGrid } from '../interfaces/index';
 import { SharedService } from './shared.service';
 
 // using external non-typed js libraries
 declare const Slick: any;
 
 export class TreeDataService {
-  private _grid: any;
+  private _grid: SlickGrid;
   private _eventHandler: SlickEventHandler;
 
   constructor(private sharedService: SharedService) {
@@ -13,15 +13,15 @@ export class TreeDataService {
   }
 
   get dataset(): any[] {
-    return this.dataView && this.dataView.getItems && this.dataView.getItems();
+    return this.dataView?.getItems();
   }
 
   get datasetHierarchical(): any[] | undefined {
     return this.sharedService.hierarchicalDataset;
   }
 
-  get dataView(): any {
-    return this._grid && this._grid.getData && this._grid.getData();
+  get dataView(): DataView {
+    return this._grid?.getData();
   }
 
   /** Getter of the SlickGrid Event Handler */
@@ -30,17 +30,17 @@ export class TreeDataService {
   }
 
   get gridOptions(): GridOption {
-    return this._grid && this._grid.getOptions && this._grid.getOptions() || {};
+    return this._grid?.getOptions() || {};
   }
 
   dispose() {
     // unsubscribe all SlickGrid events
-    if (this._eventHandler && this._eventHandler.unsubscribeAll) {
+    if (this._eventHandler?.unsubscribeAll) {
       this._eventHandler.unsubscribeAll();
     }
   }
 
-  init(grid: any) {
+  init(grid: SlickGrid) {
     this._grid = grid;
 
     // subscribe to the SlickGrid event and call the backend execution
diff --git a/packages/excel-export/README.md b/packages/excel-export/README.md
index 0436211f0..33a3bf0d0 100644
--- a/packages/excel-export/README.md
+++ b/packages/excel-export/README.md
@@ -8,3 +8,46 @@ This package requires [excel-builder-webpacker](https://www.npmjs.com/package/ex
 
 ### Installation
 Follow the instruction provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation), you can see a demo by looking at the [GitHub Demo](https://ghiscoding.github.io/slickgrid-universal) page and click on "Export to CSV" from the Grid Menu (aka hamburger menu).
+
+### Usage
+In order to use the Service, you will need to register it in your grid options via the `registerExternalServices` as shown below.
+
+##### ViewModel
+```ts
+import { ExcelExportService } from '@slickgrid-universal/excel-export';
+
+export class MyExample {
+  prepareGrid {
+    this.gridOptions = {
+      enableExcelExport: true,
+      excelExportOptions: {
+        sanitizeDataExport: true
+      },
+      registerExternalServices: [new ExcelExportService()],
+    }
+  }
+}
+```
+
+If you wish to reference the service to use it with external export button, then simply create a reference while instantiating it.
+```ts
+import { ExcelExportService } from '@slickgrid-universal/excel-export';
+
+export class MyExample {
+  excelExportService = new ExcelExportService();
+
+  prepareGrid {
+    this.gridOptions = {
+      enableExcelExport: true,
+      excelExportOptions: {
+        sanitizeDataExport: true
+      },
+      registerExternalServices: [this.excelExportService],
+    }
+  }
+
+  exportToExcel() {
+    this.excelExportService.exportToExcel({ filename: 'export', format: FileType.xlsx });
+  }
+}
+```
diff --git a/packages/excel-export/src/excelExport.service.spec.ts b/packages/excel-export/src/excelExport.service.spec.ts
index 79bc66183..604c697ac 100644
--- a/packages/excel-export/src/excelExport.service.spec.ts
+++ b/packages/excel-export/src/excelExport.service.spec.ts
@@ -1,6 +1,7 @@
 import moment = require('moment-mini');
 import {
   Column,
+  DataView,
   ExcelExportOption,
   FieldType,
   FileType,
@@ -9,6 +10,8 @@ import {
   GridOption,
   GroupTotalsFormatter,
   GroupTotalFormatters,
+  SharedService,
+  SlickGrid,
   SortDirectionNumber,
   SortComparers,
   PubSubService,
@@ -26,8 +29,8 @@ const pubSubServiceStub = {
 // URL object is not supported in JSDOM, we can simply mock it
 (global as any).URL.createObjectURL = jest.fn();
 
-const myBoldHtmlFormatter: Formatter = (row, cell, value, columnDef, dataContext) => value !== null ? { text: `<b>${value}</b>` } : null;
-const myUppercaseFormatter: Formatter = (row, cell, value, columnDef, dataContext) => value ? { text: value.toUpperCase() } : null;
+const myBoldHtmlFormatter: Formatter = (row, cell, value) => value !== null ? { text: `<b>${value}</b>` } : null;
+const myUppercaseFormatter: Formatter = (row, cell, value) => value ? { text: value.toUpperCase() } : null;
 const myUppercaseGroupTotalFormatter: GroupTotalsFormatter = (totals: any, columnDef: Column) => {
   const field = columnDef.field || '';
   const val = totals.sum && totals.sum[field];
@@ -36,7 +39,7 @@ const myUppercaseGroupTotalFormatter: GroupTotalsFormatter = (totals: any, colum
   }
   return '';
 };
-const myCustomObjectFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: any) => {
+const myCustomObjectFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any) => {
   let textValue = value && value.hasOwnProperty('text') ? value.text : value;
   const toolTip = value && value.hasOwnProperty('toolTip') ? value.toolTip : '';
   const cssClasses = value && value.hasOwnProperty('addClasses') ? [value.addClasses] : [''];
@@ -52,7 +55,7 @@ const dataViewStub = {
   getItem: jest.fn(),
   getLength: jest.fn(),
   setGrouping: jest.fn(),
-};
+} as unknown as DataView;
 
 const mockGridOptions = {
   enableExcelExport: true,
@@ -62,13 +65,15 @@ const mockGridOptions = {
 
 const gridStub = {
   getColumnIndex: jest.fn(),
+  getData: () => dataViewStub,
   getOptions: () => mockGridOptions,
   getColumns: jest.fn(),
   getGrouping: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('ExcelExportService', () => {
   let service: ExcelExportService;
+  let sharedService: SharedService;
   let translateService: TranslateServiceStub;
   let mockColumns: Column[];
   let mockExcelBlob: Blob;
@@ -76,7 +81,10 @@ describe('ExcelExportService', () => {
 
   describe('with I18N Service', () => {
     beforeEach(() => {
+      sharedService = new SharedService();
       translateService = new TranslateServiceStub();
+      mockGridOptions.i18n = translateService;
+      sharedService.internalPubSubService = pubSubServiceStub;
 
       // @ts-ignore
       navigator.__defineGetter__('appName', () => 'Netscape');
@@ -88,7 +96,7 @@ describe('ExcelExportService', () => {
         format: FileType.xlsx,
       };
 
-      service = new ExcelExportService(pubSubServiceStub, translateService);
+      service = new ExcelExportService();
     });
 
     afterEach(() => {
@@ -108,7 +116,7 @@ describe('ExcelExportService', () => {
 
       const optionExpectation = { filename: 'export.xlsx', format: FileType.xlsx };
 
-      service.init(gridStub, dataViewStub);
+      service.init(gridStub, sharedService);
       const result = await service.exportToExcel(mockExportExcelOptions);
 
       expect(result).toBeTruthy();
@@ -134,7 +142,7 @@ describe('ExcelExportService', () => {
 
       it('should throw an error when trying call exportToExcel" without a grid and/or dataview object initialized', async () => {
         try {
-          service.init(null, null);
+          service.init(null, sharedService);
           await service.exportToExcel(mockExportExcelOptions);
         } catch (e) {
           expect(e.toString()).toContain('[Slickgrid-Universal] it seems that the SlickGrid & DataView objects are not initialized did you forget to enable the grid option flag "enableExcelExport"?');
@@ -144,7 +152,7 @@ describe('ExcelExportService', () => {
       it('should trigger an event before exporting the file', async () => {
         const pubSubSpy = jest.spyOn(pubSubServiceStub, 'publish');
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         const result = await service.exportToExcel(mockExportExcelOptions);
 
         expect(result).toBeTruthy();
@@ -154,7 +162,7 @@ describe('ExcelExportService', () => {
       it('should trigger an event after exporting the file', async () => {
         const pubSubSpy = jest.spyOn(pubSubServiceStub, 'publish');
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         const result = await service.exportToExcel(mockExportExcelOptions);
 
         expect(result).toBeTruthy();
@@ -167,7 +175,7 @@ describe('ExcelExportService', () => {
         const pubSubSpy = jest.spyOn(pubSubServiceStub, 'publish');
         const spyUrlCreate = jest.spyOn(URL, 'createObjectURL');
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         const result = await service.exportToExcel(mockExportExcelOptions);
 
         expect(result).toBeTruthy();
@@ -182,7 +190,7 @@ describe('ExcelExportService', () => {
         const pubSubSpy = jest.spyOn(pubSubServiceStub, 'publish');
         const spyMsSave = jest.spyOn(navigator, 'msSaveOrOpenBlob');
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         const result = await service.exportToExcel(mockExportExcelOptions);
 
         expect(result).toBeTruthy();
@@ -195,7 +203,7 @@ describe('ExcelExportService', () => {
         navigator.__defineGetter__('appName', () => 'Microsoft Internet Explorer');
 
         try {
-          service.init(gridStub, dataViewStub);
+          service.init(gridStub, sharedService);
           await service.exportToExcel(mockExportExcelOptions);
         } catch (e) {
           expect(e.toString()).toContain('Microsoft Internet Explorer 6 to 10 do not support javascript export to Excel.');
@@ -216,7 +224,7 @@ describe('ExcelExportService', () => {
 
         const optionExpectation = { filename: 'export.xlsx', format: FileType.xlsx };
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
 
         expect(pubSubSpy).toHaveBeenCalledWith(`onAfterExportToExcel`, optionExpectation);
@@ -245,7 +253,7 @@ describe('ExcelExportService', () => {
 
         const optionExpectation = { filename: 'export.xlsx', format: 'xlsx' };
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
 
         expect(pubSubSpy).toHaveBeenCalledWith(`onAfterExportToExcel`, optionExpectation);
@@ -274,7 +282,7 @@ describe('ExcelExportService', () => {
 
         const optionExpectation = { filename: 'export.xlsx', format: 'xlsx' };
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
 
         expect(pubSubSpy).toHaveBeenCalledWith(`onAfterExportToExcel`, optionExpectation);
@@ -303,7 +311,7 @@ describe('ExcelExportService', () => {
 
         const optionExpectation = { filename: 'export.xlsx', format: 'xlsx' };
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
 
         expect(pubSubSpy).toHaveBeenCalledWith(`onAfterExportToExcel`, optionExpectation);
@@ -332,7 +340,7 @@ describe('ExcelExportService', () => {
 
         const optionExpectation = { filename: 'export.xlsx', format: 'xlsx' };
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
 
         expect(pubSubSpy).toHaveBeenCalledWith(`onAfterExportToExcel`, optionExpectation);
@@ -361,7 +369,7 @@ describe('ExcelExportService', () => {
 
         const optionExpectation = { filename: 'export.xlsx', format: 'xlsx' };
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
 
         expect(pubSubSpy).toHaveBeenCalledWith(`onAfterExportToExcel`, optionExpectation);
@@ -391,7 +399,7 @@ describe('ExcelExportService', () => {
 
         const optionExpectation = { filename: 'export.xlsx', format: 'xlsx' };
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
 
         expect(pubSubSpy).toHaveBeenCalledWith(`onAfterExportToExcel`, optionExpectation);
@@ -421,7 +429,7 @@ describe('ExcelExportService', () => {
 
         const optionExpectation = { filename: 'export.xlsx', format: 'xlsx' };
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
 
         expect(pubSubSpy).toHaveBeenCalledWith(`onAfterExportToExcel`, optionExpectation);
@@ -471,7 +479,7 @@ describe('ExcelExportService', () => {
 
         const optionExpectation = { filename: 'export.xlsx', format: 'xlsx' };
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
 
         expect(pubSubSpy).toHaveBeenCalledWith(`onAfterExportToExcel`, optionExpectation);
@@ -527,7 +535,7 @@ describe('ExcelExportService', () => {
 
         const optionExpectation = { filename: 'export.xlsx', format: FileType.xlsx };
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
 
         expect(pubSubSpy).toHaveBeenCalledWith(`onAfterExportToExcel`, optionExpectation);
@@ -574,7 +582,7 @@ describe('ExcelExportService', () => {
 
         const optionExpectation = { filename: 'export.xlsx', format: 'xlsx' };
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
 
         expect(pubSubSpy).toHaveBeenCalledWith(`onAfterExportToExcel`, optionExpectation);
@@ -621,7 +629,7 @@ describe('ExcelExportService', () => {
 
         const optionExpectation = { filename: 'export.xlsx', format: 'xlsx' };
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
 
         expect(pubSubSpy).toHaveBeenCalledWith(`onAfterExportToExcel`, optionExpectation);
@@ -712,7 +720,7 @@ describe('ExcelExportService', () => {
 
         const optionExpectation = { filename: 'export.xlsx', format: 'xlsx' };
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
 
         expect(pubSubSpy).toHaveBeenCalledWith(`onAfterExportToExcel`, optionExpectation);
@@ -806,7 +814,7 @@ describe('ExcelExportService', () => {
 
         const optionExpectation = { filename: 'export.xlsx', format: 'xlsx' };
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
 
         expect(pubSubSpy).toHaveBeenCalledWith(`onAfterExportToExcel`, optionExpectation);
@@ -946,7 +954,7 @@ describe('ExcelExportService', () => {
 
         const optionExpectation = { filename: 'export.xlsx', format: 'xlsx' };
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
 
         expect(pubSubSpy).toHaveBeenCalledWith(`onAfterExportToExcel`, optionExpectation);
@@ -983,7 +991,7 @@ describe('ExcelExportService', () => {
 
         const optionExpectation = { filename: 'export.xlsx', format: 'xlsx' };
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
 
         expect(pubSubSpy).toHaveBeenCalledWith(`onAfterExportToExcel`, optionExpectation);
@@ -1016,7 +1024,7 @@ describe('ExcelExportService', () => {
         const input = new Date('2012-02-28 15:07:59');
         const expectedDate = '2012-02-28 15:07:59';
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
         const output = service.useCellFormatByFieldType(input, FieldType.dateTime);
 
@@ -1027,7 +1035,7 @@ describe('ExcelExportService', () => {
         const input = '2012-02-28 15:07:59';
         const expectedDate = '2012-02-28 15:07:59';
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
         const output = service.useCellFormatByFieldType(input, FieldType.dateTimeIso);
 
@@ -1038,7 +1046,7 @@ describe('ExcelExportService', () => {
         const input = '2012-02-28 15:07:59';
         const expectedDate = '2012-02-28 15:07';
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
         const output = service.useCellFormatByFieldType(input, FieldType.dateTimeShortIso);
 
@@ -1049,7 +1057,7 @@ describe('ExcelExportService', () => {
         const input = '2012-02-28 15:07:59';
         const expectedDate = '2012-02-28 03:07:59 pm';
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
         const output = service.useCellFormatByFieldType(input, FieldType.dateTimeIsoAmPm);
 
@@ -1060,7 +1068,7 @@ describe('ExcelExportService', () => {
         const input = '2012-02-28 15:07:59';
         const expectedDate = '2012-02-28 03:07:59 PM';
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
         const output = service.useCellFormatByFieldType(input, FieldType.dateTimeIsoAM_PM);
 
@@ -1071,7 +1079,7 @@ describe('ExcelExportService', () => {
         const input = '2012-02-28 15:07:59';
         const expectedDate = '28/02/2012';
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
         const output = service.useCellFormatByFieldType(input, FieldType.dateEuro);
 
@@ -1082,7 +1090,7 @@ describe('ExcelExportService', () => {
         const input = '2012-02-28 15:07:59';
         const expectedDate = '28/2/12';
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
         const output = service.useCellFormatByFieldType(input, FieldType.dateEuroShort);
 
@@ -1093,7 +1101,7 @@ describe('ExcelExportService', () => {
         const input = '2012-02-28 15:07:59';
         const expectedDate = '28/02/2012 15:07:59';
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
         const output = service.useCellFormatByFieldType(input, FieldType.dateTimeEuro);
 
@@ -1104,7 +1112,7 @@ describe('ExcelExportService', () => {
         const input = '2012-02-28 15:07:59';
         const expectedDate = '28/02/2012 15:07';
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
         const output = service.useCellFormatByFieldType(input, FieldType.dateTimeShortEuro);
 
@@ -1115,7 +1123,7 @@ describe('ExcelExportService', () => {
         const input = '2012-02-28 15:07:59';
         const expectedDate = '28/02/2012 03:07:59 pm';
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
         const output = service.useCellFormatByFieldType(input, FieldType.dateTimeEuroAmPm);
 
@@ -1126,7 +1134,7 @@ describe('ExcelExportService', () => {
         const input = '2012-02-28 15:07:59';
         const expectedDate = '28/02/2012 03:07:59 PM';
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
         const output = service.useCellFormatByFieldType(input, FieldType.dateTimeEuroAM_PM);
 
@@ -1137,7 +1145,7 @@ describe('ExcelExportService', () => {
         const input = '2012-02-28 15:07:59';
         const expectedDate = '28/2/12 15:7:59';
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
         const output = service.useCellFormatByFieldType(input, FieldType.dateTimeEuroShort);
 
@@ -1148,7 +1156,7 @@ describe('ExcelExportService', () => {
         const input = '2012-02-28 15:07:59';
         const expectedDate = '28/2/12 3:7:59 pm';
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
         const output = service.useCellFormatByFieldType(input, FieldType.dateTimeEuroShortAmPm);
 
@@ -1159,7 +1167,7 @@ describe('ExcelExportService', () => {
         const input = new Date('2012-02-28 15:07:59');
         const expectedDate = '02/28/2012';
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
         const output = service.useCellFormatByFieldType(input, FieldType.dateUs);
 
@@ -1170,7 +1178,7 @@ describe('ExcelExportService', () => {
         const input = new Date('2012-02-28 15:07:59');
         const expectedDate = '2/28/12';
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
         const output = service.useCellFormatByFieldType(input, FieldType.dateUsShort);
 
@@ -1181,7 +1189,7 @@ describe('ExcelExportService', () => {
         const input = new Date('2012-02-28 15:07:59');
         const expectedDate = '02/28/2012 15:07:59';
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
         const output = service.useCellFormatByFieldType(input, FieldType.dateTimeUs);
 
@@ -1192,7 +1200,7 @@ describe('ExcelExportService', () => {
         const input = new Date('2012-02-28 15:07:59');
         const expectedDate = '02/28/2012 15:07';
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
         const output = service.useCellFormatByFieldType(input, FieldType.dateTimeShortUs);
 
@@ -1203,7 +1211,7 @@ describe('ExcelExportService', () => {
         const input = new Date('2012-02-28 15:07:59');
         const expectedDate = '02/28/2012 03:07:59 pm';
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
         const output = service.useCellFormatByFieldType(input, FieldType.dateTimeUsAmPm);
 
@@ -1214,7 +1222,7 @@ describe('ExcelExportService', () => {
         const input = new Date('2012-02-28 15:07:59');
         const expectedDate = '02/28/2012 03:07:59 PM';
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
         const output = service.useCellFormatByFieldType(input, FieldType.dateTimeUsAM_PM);
 
@@ -1225,7 +1233,7 @@ describe('ExcelExportService', () => {
         const input = new Date('2012-02-28 15:07:59');
         const expectedDate = '2/28/12 15:7:59';
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
         const output = service.useCellFormatByFieldType(input, FieldType.dateTimeUsShort);
 
@@ -1236,7 +1244,7 @@ describe('ExcelExportService', () => {
         const input = new Date('2012-02-28 15:07:59');
         const expectedDate = '2/28/12 3:7:59 pm';
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
         const output = service.useCellFormatByFieldType(input, FieldType.dateTimeUsShortAmPm);
 
@@ -1247,7 +1255,7 @@ describe('ExcelExportService', () => {
         const input = moment('2013-05-23T17:55:00.325').utcOffset(420); // timezone that is +7 UTC hours
         const expectedDate = '2013-05-24T04:55:00.325+07:00';
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
         const output = service.useCellFormatByFieldType(input, FieldType.dateUtc);
 
@@ -1258,7 +1266,7 @@ describe('ExcelExportService', () => {
         const input = new Date(Date.UTC(2012, 1, 28, 23, 1, 52, 103));
         const expectedDate = '2012-02-28';
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
         const output = service.useCellFormatByFieldType(input, FieldType.date);
 
@@ -1296,7 +1304,7 @@ describe('ExcelExportService', () => {
 
         const optionExpectation = { filename: 'export.xlsx', format: FileType.xlsx };
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         await service.exportToExcel(mockExportExcelOptions);
 
         expect(pubSubSpy).toHaveBeenCalledWith(`onAfterExportToExcel`, optionExpectation);
@@ -1323,7 +1331,7 @@ describe('ExcelExportService', () => {
       });
 
       describe('with Translation', () => {
-        let mockCollection2: any[];
+        let mockTranslateCollection: any[];
 
         beforeEach(() => {
           mockGridOptions.enableTranslate = true;
@@ -1346,16 +1354,16 @@ describe('ExcelExportService', () => {
 
         it(`should have the LastName header title translated when defined as a "headerKey" and "i18n" is set in grid option`, async () => {
           mockGridOptions.excelExportOptions.sanitizeDataExport = false;
-          mockCollection2 = [{ id: 0, userId: '1E06', firstName: 'John', lastName: 'Z', position: 'SALES_REP', order: 10 }];
-          jest.spyOn(dataViewStub, 'getLength').mockReturnValue(mockCollection2.length);
-          jest.spyOn(dataViewStub, 'getItem').mockReturnValue(null).mockReturnValueOnce(mockCollection2[0]);
+          mockTranslateCollection = [{ id: 0, userId: '1E06', firstName: 'John', lastName: 'Z', position: 'SALES_REP', order: 10 }];
+          jest.spyOn(dataViewStub, 'getLength').mockReturnValue(mockTranslateCollection.length);
+          jest.spyOn(dataViewStub, 'getItem').mockReturnValue(null).mockReturnValueOnce(mockTranslateCollection[0]);
           const pubSubSpy = jest.spyOn(pubSubServiceStub, 'publish');
           const spyUrlCreate = jest.spyOn(URL, 'createObjectURL');
           const spyDownload = jest.spyOn(service, 'startDownloadFile');
 
           const optionExpectation = { filename: 'export.xlsx', format: FileType.xlsx };
 
-          service.init(gridStub, dataViewStub);
+          service.init(gridStub, sharedService);
           await service.exportToExcel(mockExportExcelOptions);
 
           expect(pubSubSpy).toHaveBeenCalledWith(`onAfterExportToExcel`, optionExpectation);
@@ -1387,14 +1395,14 @@ describe('ExcelExportService', () => {
   describe('without I18N Service', () => {
     beforeEach(() => {
       translateService = null;
-      service = new ExcelExportService(pubSubServiceStub, translateService);
+      service = new ExcelExportService();
     });
 
     it('should throw an error if "enableTranslate" is set but the I18N Service is null', () => {
-      const gridOptionsMock = { enableTranslate: true, enableGridMenu: true, gridMenu: { hideForceFitButton: false, hideSyncResizeButton: true, columnTitleKey: 'TITLE' } } as GridOption;
+      const gridOptionsMock = { enableTranslate: true, enableGridMenu: true, i18n: null, gridMenu: { hideForceFitButton: false, hideSyncResizeButton: true, columnTitleKey: 'TITLE' } } as GridOption;
       jest.spyOn(gridStub, 'getOptions').mockReturnValue(gridOptionsMock);
 
-      expect(() => service.init(gridStub, dataViewStub)).toThrowError('[Slickgrid-Universal] requires "I18N" to be installed and configured when the grid option "enableTranslate" is enabled.');
+      expect(() => service.init(gridStub, sharedService)).toThrowError('[Slickgrid-Universal] requires a Translate Service to be passed in the "i18n" Grid Options when "enableTranslate" is enabled.');
     });
   });
 });
diff --git a/packages/excel-export/src/excelExport.service.ts b/packages/excel-export/src/excelExport.service.ts
index e30788e85..dbcc1b2fa 100644
--- a/packages/excel-export/src/excelExport.service.ts
+++ b/packages/excel-export/src/excelExport.service.ts
@@ -15,12 +15,16 @@ import {
   // interfaces
   Column,
   Constants,
+  DataView,
+  ExcelExportService as BaseExcelExportService,
   FileType,
   FieldType,
   GridOption,
   KeyTitlePair,
   Locale,
   PubSubService,
+  SharedService,
+  SlickGrid,
   TranslaterService,
 } from '@slickgrid-universal/common';
 
@@ -33,10 +37,9 @@ import {
   ExcelWorksheet,
 } from './interfaces/index';
 
-export class ExcelExportService {
+export class ExcelExportService implements BaseExcelExportService {
   private _fileFormat = FileType.xlsx;
-  private _dataView: any;
-  private _grid: any;
+  private _grid: SlickGrid;
   private _locales: Locale;
   private _groupedColumnHeaders: Array<KeyTitlePair>;
   private _columnHeaders: Array<KeyTitlePair>;
@@ -45,12 +48,22 @@ export class ExcelExportService {
   private _sheet: ExcelWorksheet;
   private _stylesheet: ExcelStylesheet;
   private _stylesheetFormats: any;
+  private _pubSubService: PubSubService;
+  private _translaterService: TranslaterService | undefined;
   private _workbook: ExcelWorkbook;
 
-  constructor(private pubSubService: PubSubService, private translaterService: TranslaterService) { }
+  /** ExcelExportService class name which is use to find service instance in the external registered services */
+  className = 'ExcelExportService';
 
-  private get datasetIdName(): string {
-    return this._gridOptions && this._gridOptions.datasetIdPropertyName || 'id';
+  constructor() { }
+
+  private get _datasetIdPropName(): string {
+    return this._gridOptions?.datasetIdPropertyName ?? 'id';
+  }
+
+  /** Getter of SlickGrid DataView object */
+  get _dataView(): DataView {
+    return this._grid?.getData();
   }
 
   /** Getter for the Grid Options pulled through the Grid Object */
@@ -61,18 +74,18 @@ export class ExcelExportService {
   /**
    * Initialize the Export Service
    * @param grid
-   * @param gridOptions
-   * @param dataView
+   * @param sharedService
    */
-  init(grid: any, dataView: any): void {
+  init(grid: SlickGrid, sharedService: SharedService): void {
     this._grid = grid;
-    this._dataView = dataView;
+    this._pubSubService = sharedService.internalPubSubService;
 
     // get locales provided by user in main file or else use default English locales via the Constants
-    this._locales = this._gridOptions && this._gridOptions.locales || Constants.locales;
+    this._locales = this._gridOptions?.locales ?? Constants.locales;
+    this._translaterService = this._gridOptions?.i18n;
 
-    if (this._gridOptions.enableTranslate && (!this.translaterService || !this.translaterService.translate)) {
-      throw new Error('[Slickgrid-Universal] requires "I18N" to be installed and configured when the grid option "enableTranslate" is enabled.');
+    if (this._gridOptions.enableTranslate && (!this._translaterService || !this._translaterService.translate)) {
+      throw new Error('[Slickgrid-Universal] requires a Translate Service to be passed in the "i18n" Grid Options when "enableTranslate" is enabled. (example: this.gridOptions = { enableTranslate: true, i18n: this.translaterService })');
     }
   }
 
@@ -91,7 +104,7 @@ export class ExcelExportService {
     }
 
     return new Promise((resolve, reject) => {
-      this.pubSubService.publish(`onBeforeExportToExcel`, true);
+      this._pubSubService.publish(`onBeforeExportToExcel`, true);
       this._excelExportOptions = deepCopy({ ...this._gridOptions.excelExportOptions, ...options });
       this._fileFormat = this._excelExportOptions.format || FileType.xlsx;
 
@@ -147,7 +160,7 @@ export class ExcelExportService {
 
           // start downloading but add the Blob property only on the start download not on the event itself
           this.startDownloadFile({ ...downloadOptions, blob: excelBlob, data: this._sheet.data });
-          this.pubSubService.publish(`onAfterExportToExcel`, downloadOptions);
+          this._pubSubService.publish(`onAfterExportToExcel`, downloadOptions);
           resolve(true);
         } catch (error) {
           reject(error);
@@ -368,8 +381,8 @@ export class ExcelExportService {
   private getGroupColumnTitle(): string | null {
     // Group By text, it could be set in the export options or from translation or if nothing is found then use the English constant text
     let groupByColumnHeader = this._excelExportOptions.groupingColumnHeaderTitle;
-    if (!groupByColumnHeader && this._gridOptions.enableTranslate && this.translaterService && this.translaterService.translate && this.translaterService.getCurrentLocale && this.translaterService.getCurrentLocale()) {
-      groupByColumnHeader = this.translaterService.translate(`${getTranslationPrefix(this._gridOptions)}GROUP_BY`);
+    if (!groupByColumnHeader && this._gridOptions.enableTranslate && this._translaterService?.translate) {
+      groupByColumnHeader = this._translaterService.translate(`${getTranslationPrefix(this._gridOptions)}GROUP_BY`);
     } else if (!groupByColumnHeader) {
       groupByColumnHeader = this._locales && this._locales.TEXT_GROUP_BY;
     }
@@ -397,8 +410,8 @@ export class ExcelExportService {
       // Populate the Grouped Column Header, pull the columnGroup(Key) defined
       columns.forEach((columnDef) => {
         let groupedHeaderTitle = '';
-        if ((columnDef.columnGroupKey || columnDef.columnGroupKey) && this._gridOptions.enableTranslate && this.translaterService && this.translaterService.translate && this.translaterService.getCurrentLocale && this.translaterService.getCurrentLocale()) {
-          groupedHeaderTitle = this.translaterService.translate((columnDef.columnGroupKey || columnDef.columnGroupKey));
+        if ((columnDef.columnGroupKey || columnDef.columnGroupKey) && this._gridOptions.enableTranslate && this._translaterService?.translate) {
+          groupedHeaderTitle = this._translaterService.translate((columnDef.columnGroupKey || columnDef.columnGroupKey));
         } else {
           groupedHeaderTitle = columnDef.columnGroup || '';
         }
@@ -427,8 +440,8 @@ export class ExcelExportService {
       // Populate the Column Header, pull the name defined
       columns.forEach((columnDef) => {
         let headerTitle = '';
-        if ((columnDef.nameKey || columnDef.nameKey) && this._gridOptions.enableTranslate && this.translaterService && this.translaterService.translate && this.translaterService.getCurrentLocale && this.translaterService.getCurrentLocale()) {
-          headerTitle = this.translaterService.translate((columnDef.nameKey || columnDef.nameKey));
+        if ((columnDef.nameKey || columnDef.nameKey) && this._gridOptions.enableTranslate && this._translaterService?.translate) {
+          headerTitle = this._translaterService.translate((columnDef.nameKey || columnDef.nameKey));
         } else {
           headerTitle = columnDef.name || titleCase(columnDef.field);
         }
@@ -455,9 +468,9 @@ export class ExcelExportService {
     // loop through all the grid rows of data
     for (let rowNumber = 0; rowNumber < lineCount; rowNumber++) {
       const itemObj = this._dataView.getItem(rowNumber);
-      if (itemObj !== null && itemObj !== undefined) {
+      if (itemObj) {
         // Normal row (not grouped by anything) would have an ID which was predefined in the Grid Columns definition
-        if (itemObj[this.datasetIdName] !== null && itemObj[this.datasetIdName] !== undefined) {
+        if (itemObj[this._datasetIdPropName] !== null && itemObj[this._datasetIdPropName] !== undefined) {
           // get regular row item data
           originalDaraArray.push(this.readRegularRowData(columns, rowNumber, itemObj));
         } else if (this._hasGroupedItems && itemObj.__groupTotals === undefined) {
diff --git a/packages/file-export/README.md b/packages/file-export/README.md
index 05de7623c..a980bcc71 100644
--- a/packages/file-export/README.md
+++ b/packages/file-export/README.md
@@ -12,3 +12,46 @@ This package requires [text-encoding-utf-8](https://www.npmjs.com/package/text-e
 
 ### Installation
 Follow the instruction provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation), you can see a demo by looking at the [GitHub Demo](https://ghiscoding.github.io/slickgrid-universal) page and click on "Export to CSV" from the Grid Menu (aka hamburger menu).
+
+### Usage
+In order to use the Service, you will need to register it in your grid options via the `registerExternalServices` as shown below.
+
+##### ViewModel
+```ts
+import { FileExportService } from '@slickgrid-universal/file-export';
+
+export class MyExample {
+  prepareGrid {
+    this.gridOptions = {
+      enableExport: true,
+      exportOptions: {
+        sanitizeDataExport: true
+      },
+      registerExternalServices: [new FileExportService()],
+    }
+  }
+}
+```
+
+If you wish to reference the service to use it with external export button, then simply create a reference while instantiating it.
+```ts
+import { FileExportService } from '@slickgrid-universal/file-export';
+
+export class MyExample {
+  exportService = new FileExportService();
+
+  prepareGrid {
+    this.gridOptions = {
+      enableExport: true,
+      exportOptions: {
+        sanitizeDataExport: true
+      },
+      registerExternalServices: [this.exportService],
+    }
+  }
+
+  exportToFile() {
+    this.exportService.exportToFile({ filename: 'export', format: FileType.csv });
+  }
+}
+```
diff --git a/packages/file-export/src/fileExport.service.spec.ts b/packages/file-export/src/fileExport.service.spec.ts
index eaad0cca6..5ea403180 100644
--- a/packages/file-export/src/fileExport.service.spec.ts
+++ b/packages/file-export/src/fileExport.service.spec.ts
@@ -1,6 +1,7 @@
 import { FileExportService } from './fileExport.service';
 import {
   Column,
+  DataView,
   DelimiterType,
   FieldType,
   FileType,
@@ -9,6 +10,8 @@ import {
   GridOption,
   GroupTotalFormatters,
   PubSubService,
+  SharedService,
+  SlickGrid,
   SortComparers,
   SortDirectionNumber,
 } from '@slickgrid-universal/common';
@@ -28,9 +31,9 @@ const pubSubServiceStub = {
 // URL object is not supported in JSDOM, we can simply mock it
 (global as any).URL.createObjectURL = jest.fn();
 
-const myBoldHtmlFormatter: Formatter = (row, cell, value, columnDef, dataContext) => value !== null ? { text: `<b>${value}</b>` } : null;
-const myUppercaseFormatter: Formatter = (row, cell, value, columnDef, dataContext) => value ? { text: value.toUpperCase() } : null;
-const myCustomObjectFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: any) => {
+const myBoldHtmlFormatter: Formatter = (row, cell, value) => value !== null ? { text: `<b>${value}</b>` } : null;
+const myUppercaseFormatter: Formatter = (row, cell, value) => value ? { text: value.toUpperCase() } : null;
+const myCustomObjectFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any) => {
   let textValue = value && value.hasOwnProperty('text') ? value.text : value;
   const toolTip = value && value.hasOwnProperty('toolTip') ? value.toolTip : '';
   const cssClasses = value && value.hasOwnProperty('addClasses') ? [value.addClasses] : [''];
@@ -46,7 +49,7 @@ const dataViewStub = {
   getItem: jest.fn(),
   getLength: jest.fn(),
   setGrouping: jest.fn(),
-};
+} as unknown as DataView;
 
 const mockGridOptions = {
   enablePagination: true,
@@ -55,13 +58,15 @@ const mockGridOptions = {
 
 const gridStub = {
   getColumnIndex: jest.fn(),
+  getData: () => dataViewStub,
   getOptions: () => mockGridOptions,
   getColumns: jest.fn(),
   getGrouping: jest.fn(),
-};
+} as unknown as SlickGrid;
 
 describe('ExportService', () => {
   let service: FileExportService;
+  let sharedService: SharedService;
   let translateService: TranslateServiceStub;
   let mockColumns: Column[];
   let mockExportCsvOptions;
@@ -71,7 +76,10 @@ describe('ExportService', () => {
 
   describe('with I18N Service', () => {
     beforeEach(() => {
+      sharedService = new SharedService();
       translateService = new TranslateServiceStub();
+      mockGridOptions.i18n = translateService;
+      sharedService.internalPubSubService = pubSubServiceStub;
 
       // @ts-ignore
       navigator.__defineGetter__('appName', () => 'Netscape');
@@ -92,7 +100,7 @@ describe('ExportService', () => {
         format: FileType.txt
       };
 
-      service = new FileExportService(pubSubServiceStub, translateService);
+      service = new FileExportService();
     });
 
     afterEach(() => {
@@ -112,7 +120,7 @@ describe('ExportService', () => {
       const optionExpectation = { filename: 'export.csv', format: 'csv', mimeType: 'text/plain', useUtf8WithBom: false };
       const contentExpectation = '';
 
-      service.init(gridStub, dataViewStub);
+      service.init(gridStub, sharedService);
       service.exportToFile(mockExportCsvOptions);
 
       setTimeout(() => {
@@ -139,7 +147,7 @@ describe('ExportService', () => {
 
       it('should throw an error when trying call exportToFile" without a grid and/or dataview object initialized', (done) => {
         try {
-          service.init(null, null);
+          service.init(null, sharedService);
           service.exportToFile(mockExportTxtOptions);
         } catch (e) {
           expect(e.toString()).toContain('[Slickgrid-Universal] it seems that the SlickGrid & DataView objects are not initialized did you forget to enable the grid option flag "enableExport"?');
@@ -150,7 +158,7 @@ describe('ExportService', () => {
       it('should trigger an event before exporting the file', () => {
         const pubSubSpy = jest.spyOn(pubSubServiceStub, 'publish');
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         service.exportToFile(mockExportTxtOptions);
 
         expect(pubSubSpy).toHaveBeenCalledWith(`onBeforeExportToFile`, true);
@@ -159,7 +167,7 @@ describe('ExportService', () => {
       it('should trigger an event after exporting the file', (done) => {
         const pubSubSpy = jest.spyOn(pubSubServiceStub, 'publish');
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         service.exportToFile(mockExportTxtOptions);
 
         setTimeout(() => {
@@ -173,7 +181,7 @@ describe('ExportService', () => {
         const pubSubSpy = jest.spyOn(pubSubServiceStub, 'publish');
         const spyUrlCreate = jest.spyOn(URL, 'createObjectURL');
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         service.exportToFile(mockExportCsvOptions);
 
         setTimeout(() => {
@@ -188,7 +196,7 @@ describe('ExportService', () => {
         const pubSubSpy = jest.spyOn(pubSubServiceStub, 'publish');
         const spyMsSave = jest.spyOn(navigator, 'msSaveOrOpenBlob');
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         service.exportToFile(mockExportCsvOptions);
 
         setTimeout(() => {
@@ -202,7 +210,7 @@ describe('ExportService', () => {
         const pubSubSpy = jest.spyOn(pubSubServiceStub, 'publish');
         const spyUrlCreate = jest.spyOn(URL, 'createObjectURL');
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         service.exportToFile(mockExportTxtOptions);
 
         setTimeout(() => {
@@ -217,7 +225,7 @@ describe('ExportService', () => {
         const pubSubSpy = jest.spyOn(pubSubServiceStub, 'publish');
         const spyMsSave = jest.spyOn(navigator, 'msSaveOrOpenBlob');
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         service.exportToFile(mockExportTxtOptions);
 
         setTimeout(() => {
@@ -231,7 +239,7 @@ describe('ExportService', () => {
         // @ts-ignore
         navigator.__defineGetter__('appName', () => 'Microsoft Internet Explorer');
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         service.exportToFile(mockExportTxtOptions)
           .catch((e) => {
             expect(e.toString()).toContain('Microsoft Internet Explorer 6 to 10 do not support javascript export to CSV');
@@ -260,7 +268,7 @@ describe('ExportService', () => {
           `"User Id","FirstName","LastName","Position","Order"
           ="1E06","John","Z","SALES_REP","<b>10</b>"`;
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         service.exportToFile(mockExportCsvOptions);
 
         setTimeout(() => {
@@ -285,7 +293,7 @@ describe('ExportService', () => {
           `"User Id";;"FirstName";;"LastName";;"Position";;"Order"
               ="1E06";;"John";;"Z";;"SALES_REP";;"<b>10</b>"`;
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         service.exportToFile(mockExportCsvOptions);
 
         setTimeout(() => {
@@ -310,7 +318,7 @@ describe('ExportService', () => {
           `"User Id","FirstName","LastName","Position","Order"
           ="1E06","John","Z","SALES_REP","<b>10</b>"`;
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         service.exportToFile(mockExportCsvOptions);
 
         setTimeout(() => {
@@ -334,7 +342,7 @@ describe('ExportService', () => {
           `"User Id","FirstName","LastName","Position","Order"
           ="2B02","Jane","DOE","FINANCE_MANAGER","<b>1</b>"`;
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         service.exportToFile(mockExportCsvOptions);
 
         setTimeout(() => {
@@ -358,7 +366,7 @@ describe('ExportService', () => {
           `"User Id","FirstName","LastName","Position","Order"
           ="3C2","Ava Luna","","HUMAN_RESOURCES","<b>3</b>"`;
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         service.exportToFile(mockExportCsvOptions);
 
         setTimeout(() => {
@@ -382,7 +390,7 @@ describe('ExportService', () => {
           `"User Id","FirstName","LastName","Position","Order"
           ="","Ava","LUNA","HUMAN_RESOURCES","<b>3</b>"`;
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         service.exportToFile(mockExportCsvOptions);
 
         setTimeout(() => {
@@ -406,7 +414,7 @@ describe('ExportService', () => {
           `"User Id","FirstName","LastName","Position","Order"
           ="3C2","Ava","LUNA","HUMAN_RESOURCES",""`;
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         service.exportToFile(mockExportCsvOptions);
 
         setTimeout(() => {
@@ -430,7 +438,7 @@ describe('ExportService', () => {
           `"User Id","FirstName","LastName","Position","Order"
           ="","","CASH","SALES_REP","<b>3</b>"`;
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         service.exportToFile(mockExportCsvOptions);
 
         setTimeout(() => {
@@ -455,7 +463,7 @@ describe('ExportService', () => {
           `"User Id","FirstName","LastName","Position","Order"
           ="2B02","Jane","DOE","FINANCE_MANAGER","1"`;
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         service.exportToFile(mockExportCsvOptions);
 
         setTimeout(() => {
@@ -481,7 +489,7 @@ describe('ExportService', () => {
           `"User Id","FirstName","LastName","Position","Order"
           ="2B02","Jane","DOE","FINANCE_MANAGER","<b>1</b>"`;
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         service.exportToFile(mockExportCsvOptions);
 
         setTimeout(() => {
@@ -520,7 +528,7 @@ describe('ExportService', () => {
           `"First Name","Last Name","Position"
               "John","Z","SALES_REP"`;
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         service.exportToFile(mockExportCsvOptions);
 
         setTimeout(() => {
@@ -569,7 +577,7 @@ describe('ExportService', () => {
           `"User Id","First Name","Last Name","Position","Order"
           ="1E06","John","Z","Sales Rep.","<b>10</b>"`;
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         service.exportToFile(mockExportCsvOptions);
 
         setTimeout(() => {
@@ -657,7 +665,7 @@ describe('ExportService', () => {
              "",="2B02","Jane","DOE","FINANCE_MANAGER","10"
              "","","","","","20"`;
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         service.exportToFile(mockExportCsvOptions);
 
         setTimeout(() => {
@@ -681,7 +689,7 @@ describe('ExportService', () => {
              ;=2B02;Jane;DOE;FINANCE_MANAGER;10
              ;;;;;20`;
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         service.exportToFile(mockExportTxtOptions);
 
         setTimeout(() => {
@@ -769,7 +777,7 @@ describe('ExportService', () => {
              "",="2B02","Jane","DOE","Finance Manager","10"
              "","","","","","20"`;
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         service.exportToFile(mockExportCsvOptions);
 
         setTimeout(() => {
@@ -793,7 +801,7 @@ describe('ExportService', () => {
              ;=2B02;Jane;DOE;Finance Manager;10
              ;;;;;20`;
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         service.exportToFile(mockExportTxtOptions);
 
         setTimeout(() => {
@@ -922,7 +930,7 @@ describe('ExportService', () => {
              "","","","","","20"
              "","","","","","10"`;
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         service.exportToFile(mockExportCsvOptions);
 
         setTimeout(() => {
@@ -949,7 +957,7 @@ describe('ExportService', () => {
              ;;;;;20
              ;;;;;10`;
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         service.exportToFile(mockExportTxtOptions);
 
         setTimeout(() => {
@@ -995,7 +1003,7 @@ describe('ExportService', () => {
           "FirstName","LastName","User Id","Position","Order"
           "John","Z",="1E06","SALES_REP","<b>10</b>"`;
 
-        service.init(gridStub, dataViewStub);
+        service.init(gridStub, sharedService);
         service.exportToFile(mockExportCsvOptions);
 
         setTimeout(() => {
@@ -1007,7 +1015,7 @@ describe('ExportService', () => {
       });
 
       describe('with Translation', () => {
-        let mockCollection: any[];
+        let mockTranslateCollection: any[];
 
         beforeEach(() => {
           mockGridOptions.enableTranslate = true;
@@ -1030,9 +1038,9 @@ describe('ExportService', () => {
 
         it(`should have the LastName header title translated when defined as a "headerKey" and "i18n" is set in grid option`, (done) => {
           mockGridOptions.exportOptions.sanitizeDataExport = false;
-          mockCollection = [{ id: 0, userId: '1E06', firstName: 'John', lastName: 'Z', position: 'SALES_REP', order: 10 }];
-          jest.spyOn(dataViewStub, 'getLength').mockReturnValue(mockCollection.length);
-          jest.spyOn(dataViewStub, 'getItem').mockReturnValue(null).mockReturnValueOnce(mockCollection[0]);
+          mockTranslateCollection = [{ id: 0, userId: '1E06', firstName: 'John', lastName: 'Z', position: 'SALES_REP', order: 10 }];
+          jest.spyOn(dataViewStub, 'getLength').mockReturnValue(mockTranslateCollection.length);
+          jest.spyOn(dataViewStub, 'getItem').mockReturnValue(null).mockReturnValueOnce(mockTranslateCollection[0]);
           const pubSubSpy = jest.spyOn(pubSubServiceStub, 'publish');
           const spyUrlCreate = jest.spyOn(URL, 'createObjectURL');
           const spyDownload = jest.spyOn(service, 'startDownloadFile');
@@ -1043,7 +1051,7 @@ describe('ExportService', () => {
             "First Name","Last Name","User Id","Position","Order"
             "John","Z",="1E06","Sales Rep.","<b>10</b>"`;
 
-          service.init(gridStub, dataViewStub);
+          service.init(gridStub, sharedService);
           service.exportToFile(mockExportCsvOptions);
 
           setTimeout(() => {
@@ -1060,14 +1068,14 @@ describe('ExportService', () => {
   describe('without I18N Service', () => {
     beforeEach(() => {
       translateService = null;
-      service = new FileExportService(pubSubServiceStub, translateService);
+      service = new FileExportService();
     });
 
     it('should throw an error if "enableTranslate" is set but the I18N Service is null', () => {
-      const gridOptionsMock = { enableTranslate: true, enableGridMenu: true, gridMenu: { hideForceFitButton: false, hideSyncResizeButton: true, columnTitleKey: 'TITLE' } } as GridOption;
+      const gridOptionsMock = { enableTranslate: true, enableGridMenu: true, i18n: null, gridMenu: { hideForceFitButton: false, hideSyncResizeButton: true, columnTitleKey: 'TITLE' } } as GridOption;
       jest.spyOn(gridStub, 'getOptions').mockReturnValue(gridOptionsMock);
 
-      expect(() => service.init(gridStub, dataViewStub)).toThrowError('[Slickgrid-Universal] requires "I18N" to be installed and configured');
+      expect(() => service.init(gridStub, sharedService)).toThrowError('[Slickgrid-Universal] requires a Translate Service to be passed in the "i18n" Grid Options when "enableTranslate" is enabled.');
     });
   });
 });
diff --git a/packages/file-export/src/fileExport.service.ts b/packages/file-export/src/fileExport.service.ts
index 8e53516ed..664b7ea12 100644
--- a/packages/file-export/src/fileExport.service.ts
+++ b/packages/file-export/src/fileExport.service.ts
@@ -12,34 +12,47 @@ import {
   // interfaces
   Column,
   Constants,
+  DataView,
   ExportOption,
+  FileExportService as BaseFileExportService,
   FileType,
   GridOption,
   KeyTitlePair,
   Locale,
   PubSubService,
+  SharedService,
+  SlickGrid,
   TranslaterService,
 } from '@slickgrid-universal/common';
 
-export class FileExportService {
+export class FileExportService implements BaseFileExportService {
   private _delimiter = ',';
   private _exportQuoteWrapper = '';
   private _exportOptions: ExportOption;
   private _fileFormat = FileType.csv;
   private _lineCarriageReturn = '\n';
-  private _dataView: any;
-  private _grid: any;
+  private _grid: SlickGrid;
   private _groupedColumnHeaders: Array<KeyTitlePair>;
   private _columnHeaders: Array<KeyTitlePair>;
   private _hasGroupedItems = false;
   private _locales: Locale;
+  private _pubSubService: PubSubService;
+  private _translaterService: TranslaterService | undefined;
 
-  constructor(private pubSubService: PubSubService, private translaterService: TranslaterService) { }
+  /** ExcelExportService class name which is use to find service instance in the external registered services */
+  className = 'FileExportService';
 
-  private get datasetIdName(): string {
+  constructor() { }
+
+  private get _datasetIdPropName(): string {
     return this._gridOptions && this._gridOptions.datasetIdPropertyName || 'id';
   }
 
+  /** Getter of SlickGrid DataView object */
+  get _dataView(): DataView {
+    return this._grid && this._grid.getData && this._grid.getData();
+  }
+
   /** Getter for the Grid Options pulled through the Grid Object */
   private get _gridOptions(): GridOption {
     return (this._grid && this._grid.getOptions) ? this._grid.getOptions() : {};
@@ -48,17 +61,18 @@ export class FileExportService {
   /**
    * Initialize the Service
    * @param grid
-   * @param dataView
+   * @param sharedService
    */
-  init(grid: any, dataView: any): void {
+  init(grid: SlickGrid, sharedService: SharedService): void {
     this._grid = grid;
-    this._dataView = dataView;
+    this._pubSubService = sharedService.internalPubSubService;
 
     // get locales provided by user in main file or else use default English locales via the Constants
     this._locales = this._gridOptions && this._gridOptions.locales || Constants.locales;
+    this._translaterService = this._gridOptions?.i18n;
 
-    if (this._gridOptions.enableTranslate && (!this.translaterService || !this.translaterService.translate)) {
-      throw new Error('[Slickgrid-Universal] requires "I18N" to be installed and configured when the grid option "enableTranslate" is enabled.');
+    if (this._gridOptions.enableTranslate && (!this._translaterService || !this._translaterService.translate)) {
+      throw new Error('[Slickgrid-Universal] requires a Translate Service to be passed in the "i18n" Grid Options when "enableTranslate" is enabled. (example: this.gridOptions = { enableTranslate: true, i18n: this.translaterService })');
     }
   }
 
@@ -77,7 +91,7 @@ export class FileExportService {
     }
 
     return new Promise((resolve, reject) => {
-      this.pubSubService.publish(`onBeforeExportToFile`, true);
+      this._pubSubService.publish(`onBeforeExportToFile`, true);
       this._exportOptions = deepCopy({ ...this._gridOptions.exportOptions, ...options });
       this._delimiter = this._exportOptions.delimiterOverride || this._exportOptions.delimiter || '';
       this._fileFormat = this._exportOptions.format || FileType.csv;
@@ -98,7 +112,7 @@ export class FileExportService {
 
           // start downloading but add the content property only on the start download not on the event itself
           this.startDownloadFile({ ...downloadOptions, content: dataOutput }); // add content property
-          this.pubSubService.publish(`onAfterExportToFile`, downloadOptions);
+          this._pubSubService.publish(`onAfterExportToFile`, downloadOptions);
           resolve(true);
         } catch (error) {
           reject(error);
@@ -170,8 +184,8 @@ export class FileExportService {
 
     // Group By text, it could be set in the export options or from translation or if nothing is found then use the English constant text
     let groupByColumnHeader = this._exportOptions.groupingColumnHeaderTitle;
-    if (!groupByColumnHeader && this._gridOptions.enableTranslate && this.translaterService && this.translaterService.translate && this.translaterService.getCurrentLocale && this.translaterService.getCurrentLocale()) {
-      groupByColumnHeader = this.translaterService.translate(`${getTranslationPrefix(this._gridOptions)}GROUP_BY`);
+    if (!groupByColumnHeader && this._gridOptions.enableTranslate && this._translaterService && this._translaterService.translate && this._translaterService.getCurrentLocale && this._translaterService.getCurrentLocale()) {
+      groupByColumnHeader = this._translaterService.translate(`${getTranslationPrefix(this._gridOptions)}GROUP_BY`);
     } else if (!groupByColumnHeader) {
       groupByColumnHeader = this._locales && this._locales.TEXT_GROUP_BY;
     }
@@ -227,9 +241,9 @@ export class FileExportService {
     for (let rowNumber = 0; rowNumber < lineCount; rowNumber++) {
       const itemObj = this._dataView.getItem(rowNumber);
 
-      if (itemObj != null) {
+      if (itemObj) {
         // Normal row (not grouped by anything) would have an ID which was predefined in the Grid Columns definition
-        if (itemObj[this.datasetIdName] != null) {
+        if (itemObj[this._datasetIdPropName] !== null && itemObj[this._datasetIdPropName] !== undefined) {
           // get regular row item data
           outputDataStrings.push(this.readRegularRowData(columns, rowNumber, itemObj));
         } else if (this._hasGroupedItems && itemObj.__groupTotals === undefined) {
@@ -256,8 +270,8 @@ export class FileExportService {
       // Populate the Grouped Column Header, pull the columnGroup(Key) defined
       columns.forEach((columnDef) => {
         let groupedHeaderTitle = '';
-        if ((columnDef.columnGroupKey || columnDef.columnGroupKey) && this._gridOptions.enableTranslate && this.translaterService && this.translaterService.translate && this.translaterService.getCurrentLocale && this.translaterService.getCurrentLocale()) {
-          groupedHeaderTitle = this.translaterService.translate((columnDef.columnGroupKey || columnDef.columnGroupKey));
+        if ((columnDef.columnGroupKey || columnDef.columnGroupKey) && this._gridOptions.enableTranslate && this._translaterService && this._translaterService.translate && this._translaterService.getCurrentLocale && this._translaterService.getCurrentLocale()) {
+          groupedHeaderTitle = this._translaterService.translate((columnDef.columnGroupKey || columnDef.columnGroupKey));
         } else {
           groupedHeaderTitle = columnDef.columnGroup || '';
         }
@@ -286,8 +300,8 @@ export class FileExportService {
       // Populate the Column Header, pull the name defined
       columns.forEach((columnDef) => {
         let headerTitle = '';
-        if ((columnDef.nameKey || columnDef.nameKey) && this._gridOptions.enableTranslate && this.translaterService && this.translaterService.translate && this.translaterService.getCurrentLocale && this.translaterService.getCurrentLocale()) {
-          headerTitle = this.translaterService.translate((columnDef.nameKey || columnDef.nameKey));
+        if ((columnDef.nameKey || columnDef.nameKey) && this._gridOptions.enableTranslate && this._translaterService && this._translaterService.translate && this._translaterService.getCurrentLocale && this._translaterService.getCurrentLocale()) {
+          headerTitle = this._translaterService.translate((columnDef.nameKey || columnDef.nameKey));
         } else {
           headerTitle = columnDef.name || titleCase(columnDef.field);
         }
diff --git a/packages/vanilla-bundle/src/services/eventPubSub.service.ts b/packages/vanilla-bundle/src/services/eventPubSub.service.ts
index a6e209ce9..947e125c4 100644
--- a/packages/vanilla-bundle/src/services/eventPubSub.service.ts
+++ b/packages/vanilla-bundle/src/services/eventPubSub.service.ts
@@ -29,9 +29,9 @@ export class EventPubSubService implements PubSubService {
   unsubscribeAll(subscriptions?: Subscription[]) {
     if (Array.isArray(subscriptions)) {
       for (const subscription of subscriptions) {
-        if (subscription.dispose) {
+        if (subscription?.dispose) {
           subscription.dispose();
-        } else if (subscription.unsubscribe) {
+        } else if (subscription?.unsubscribe) {
           subscription.unsubscribe();
         }
       }
@@ -43,7 +43,7 @@ export class EventPubSubService implements PubSubService {
   }
 
   /** Dispatch of Custom Event, which by default will bubble up & is cancelable */
-  dispatchCustomEvent(eventName: string, data?: any, isBubbling: boolean = true, isCancelable: boolean = true) {
+  dispatchCustomEvent(eventName: string, data?: any, isBubbling = true, isCancelable = true) {
     const eventInit: CustomEventInit = { bubbles: isBubbling, cancelable: isCancelable };
     if (data) {
       eventInit.detail = data;
diff --git a/packages/vanilla-bundle/src/services/excelExport.service.ts b/packages/vanilla-bundle/src/services/excelExport.service.ts
deleted file mode 100644
index 198409efc..000000000
--- a/packages/vanilla-bundle/src/services/excelExport.service.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { ExcelExportOption } from '@slickgrid-universal/common';
-import { TranslateService } from './translate.service';
-import { EventPubSubService } from './eventPubSub.service';
-
-
-export class ExcelExportService {
-  constructor(eventPubSubService: EventPubSubService, translateService: TranslateService) {
-    // super(eventPubSubService, translateService);
-  }
-
-  init(grid: any, dataView: any): void {
-    // super.init(grid, dataView);
-  }
-
-  exportToExcel(options: ExcelExportOption): Promise<boolean> {
-    return new Promise((resolve) => resolve(true));
-    // return super.exportToExcel(options);
-  }
-}
diff --git a/packages/vanilla-bundle/src/services/fileExport.service.ts b/packages/vanilla-bundle/src/services/fileExport.service.ts
index 70057cb76..68640719e 100644
--- a/packages/vanilla-bundle/src/services/fileExport.service.ts
+++ b/packages/vanilla-bundle/src/services/fileExport.service.ts
@@ -1,15 +1,13 @@
-import { ExportOption } from '@slickgrid-universal/common';
+import { ExportOption, SharedService, SlickGrid } from '@slickgrid-universal/common';
 import { FileExportService as UniversalExportService } from '@slickgrid-universal/file-export';
-import { EventPubSubService } from './eventPubSub.service';
-import { TranslateService } from './translate.service';
 
 export class FileExportService extends UniversalExportService {
-  constructor(eventPubSubService: EventPubSubService, translateService: TranslateService) {
-    super(eventPubSubService, translateService);
+  constructor() {
+    super();
   }
 
-  init(grid: any, dataView: any): void {
-    super.init(grid, dataView);
+  init(grid: SlickGrid, sharedService: SharedService): void {
+    super.init(grid, sharedService);
   }
 
   exportToFile(options: ExportOption): Promise<boolean> {
diff --git a/packages/vanilla-bundle/src/services/index.ts b/packages/vanilla-bundle/src/services/index.ts
index 0faac4033..bf27cd492 100644
--- a/packages/vanilla-bundle/src/services/index.ts
+++ b/packages/vanilla-bundle/src/services/index.ts
@@ -1,6 +1,5 @@
 export * from './binding.service';
 export * from './eventPubSub.service';
-export * from './excelExport.service';
 export * from './fileExport.service';
 export * from './footer.service';
 export * from './translate.service';
diff --git a/packages/vanilla-bundle/src/services/translate.service.ts b/packages/vanilla-bundle/src/services/translate.service.ts
index eddeed8a2..91fe47a85 100644
--- a/packages/vanilla-bundle/src/services/translate.service.ts
+++ b/packages/vanilla-bundle/src/services/translate.service.ts
@@ -1,6 +1,5 @@
 import { TranslaterService } from '@slickgrid-universal/common';
 
-
 export class TranslateService implements TranslaterService {
   getCurrentLocale(): string {
     return 'en';
diff --git a/packages/vanilla-bundle/src/vanilla-grid-bundle.ts b/packages/vanilla-bundle/src/vanilla-grid-bundle.ts
index b22449db2..4c1ff1575 100644
--- a/packages/vanilla-bundle/src/vanilla-grid-bundle.ts
+++ b/packages/vanilla-bundle/src/vanilla-grid-bundle.ts
@@ -7,12 +7,14 @@ import 'slickgrid/plugins/slick.resizer';
 import {
   BackendServiceApi,
   Column,
+  DataView,
   ExtensionName,
   EventNamingStyle,
   GlobalGridOptions,
   GridOption,
   Metrics,
   SlickEventHandler,
+  SlickGrid,
   TreeDataOption,
 
   // extensions
@@ -50,7 +52,6 @@ import {
 } from '@slickgrid-universal/common';
 
 import { FileExportService } from './services/fileExport.service';
-import { ExcelExportService } from './services/excelExport.service';
 import { TranslateService } from './services/translate.service';
 import { EventPubSubService } from './services/eventPubSub.service';
 import { FooterService } from './services/footer.service';
@@ -76,8 +77,8 @@ export class VanillaGridBundle {
   private _eventPubSubService: EventPubSubService;
   private _slickgridInitialized = false;
   backendServiceApi: BackendServiceApi | undefined;
-  dataView: any;
-  grid: any;
+  dataView: DataView;
+  grid: SlickGrid;
   metrics: Metrics;
   customDataView = false;
   groupItemMetadataProvider: any;
@@ -92,8 +93,6 @@ export class VanillaGridBundle {
   columnPickerExtension: ColumnPickerExtension;
   checkboxExtension: CheckboxSelectorExtension;
   draggableGroupingExtension: DraggableGroupingExtension;
-  excelExportService: ExcelExportService;
-  exportService: FileExportService;
   gridMenuExtension: GridMenuExtension;
   groupItemMetaProviderExtension: GroupItemMetaProviderExtension;
   headerButtonExtension: HeaderButtonExtension;
@@ -185,8 +184,6 @@ export class VanillaGridBundle {
     const slickgridConfig = new SlickgridConfig();
     this.sharedService = new SharedService();
     this.translateService = new TranslateService();
-    this.exportService = new FileExportService(this._eventPubSubService, this.translateService);
-    this.excelExportService = new ExcelExportService(this._eventPubSubService, this.translateService);
     this.collectionService = new CollectionService(this.translateService);
     this.footerService = new FooterService(this.sharedService, this.translateService);
     const filterFactory = new FilterFactory(slickgridConfig, this.collectionService, this.translateService);
@@ -198,11 +195,11 @@ export class VanillaGridBundle {
     this.autoTooltipExtension = new AutoTooltipExtension(this.extensionUtility, this.sharedService);
     this.cellExternalCopyManagerExtension = new CellExternalCopyManagerExtension(this.extensionUtility, this.sharedService);
     this.cellMenuExtension = new CellMenuExtension(this.extensionUtility, this.sharedService, this.translateService);
-    this.contextMenuExtension = new ContextMenuExtension(this.excelExportService, this.exportService, this.extensionUtility, this.sharedService, this.translateService, this.treeDataService);
+    this.contextMenuExtension = new ContextMenuExtension(this.extensionUtility, this.sharedService, this.translateService, this.treeDataService);
     this.columnPickerExtension = new ColumnPickerExtension(this.extensionUtility, this.sharedService);
     this.checkboxExtension = new CheckboxSelectorExtension(this.extensionUtility, this.sharedService);
     this.draggableGroupingExtension = new DraggableGroupingExtension(this.extensionUtility, this.sharedService);
-    this.gridMenuExtension = new GridMenuExtension(this.excelExportService, this.exportService, this.extensionUtility, this.filterService, this.sharedService, this.sortService, this.translateService);
+    this.gridMenuExtension = new GridMenuExtension(this.extensionUtility, this.filterService, this.sharedService, this.sortService, this.translateService);
     this.groupItemMetaProviderExtension = new GroupItemMetaProviderExtension(this.sharedService);
     this.headerButtonExtension = new HeaderButtonExtension(this.extensionUtility, this.sharedService);
     this.headerMenuExtension = new HeaderMenuExtension(this.extensionUtility, this.filterService, this._eventPubSubService, this.sharedService, this.sortService, this.translateService);
@@ -242,23 +239,20 @@ export class VanillaGridBundle {
   }
 
   dispose() {
-    this.dataView = undefined;
     this._gridOptions = {};
-    this.extensionService.dispose();
-    this.filterService.dispose();
-    // this.gridEventService.dispose();
-    // this.gridStateService.dispose();
-    this.groupingAndColspanService.dispose();
-    // this.paginationService.dispose();
-    // this.resizer.dispose();
-    this.sortService.dispose();
-    if (this._eventHandler && this._eventHandler.unsubscribeAll) {
-      this._eventHandler.unsubscribeAll();
-    }
-    this._eventPubSubService.unsubscribeAll();
-    if (this.grid && this.grid.destroy) {
-      this.grid.destroy();
-    }
+    this.extensionService?.dispose();
+    this.filterService?.dispose();
+    this.gridEventService?.dispose();
+    this.gridStateService?.dispose();
+    this.groupingAndColspanService?.dispose();
+    // this.paginationService?.dispose();
+    // this.resizer?.dispose();
+    this.sortService?.dispose();
+    this.treeDataService?.dispose();
+
+    this._eventHandler?.unsubscribeAll();
+    this._eventPubSubService?.unsubscribeAll();
+    this.grid?.destroy();
   }
 
   async initialization(gridContainerElm: Element) {
@@ -269,6 +263,7 @@ export class VanillaGridBundle {
     this.backendServiceApi = this._gridOptions && this._gridOptions.backendServiceApi;
     this._isLocalGrid = !this.backendServiceApi; // considered a local grid if it doesn't have a backend service set
     this._eventPubSubService.eventNamingStyle = this._gridOptions && this._gridOptions.eventNamingStyle || EventNamingStyle.camelCase;
+    this.sharedService.internalPubSubService = this._eventPubSubService;
     this._eventHandler = new Slick.EventHandler();
     const dataviewInlineFilters = this._gridOptions?.dataView?.inlineFilters ?? false;
     if (!this.customDataView) {
@@ -389,32 +384,52 @@ export class VanillaGridBundle {
     this.gridEventService.bindOnCellChange(this.grid, this.dataView);
     this.gridEventService.bindOnClick(this.grid, this.dataView);
 
-    // bind & initialize the grid service
-    this.gridService.init(this.grid, this.dataView);
-    this.gridStateService.init(this.grid, this.dataView);
-    this.excelExportService.init(this.grid, this.dataView);
-    this.exportService.init(this.grid, this.dataView);
-    // this.paginationService.init(this.grid, this.dataView);
+    // get any possible Services that user want to register
+    const registeringServices: any[] = this._gridOptions.registerExternalServices || [];
+
+    // when using Salesforce, we want the Export to CSV always enabled without registering it
+    if (this._gridOptions.useSalesforceDefaultGridOptions) {
+      const fileExportService = new FileExportService();
+      registeringServices.push(fileExportService);
+    }
+
+    // at this point, we consider all the registered services as external services, anything else registered afterward aren't external
+    if (Array.isArray(registeringServices)) {
+      this.sharedService.externalRegisteredServices = registeringServices;
+    }
+
+    // push all other Services that we want to be registered
+    registeringServices.push(this.gridService, this.gridStateService);
 
-    // bind & initialize grouping and header grouping colspan service
+    // when using Grouping/DraggableGrouping/Colspan register its Service
     if (this._gridOptions.createPreHeaderPanel && !this._gridOptions.enableDraggableGrouping) {
-      this.groupingAndColspanService.init(this.grid, this.resizerPlugin);
+      registeringServices.push(this.groupingAndColspanService);
     }
 
-    // when using Tree Data View
+    // when using Tree Data View, register its Service
     if (this._gridOptions.enableTreeData) {
-      this.treeDataService.init(this.grid);
+      registeringServices.push(this.treeDataService);
     }
 
+    // bind & initialize all Services that were tagged as enable
+    // register all services by executing their init method and providing them with the Grid object
+    if (Array.isArray(registeringServices)) {
+      for (const service of registeringServices) {
+        if (typeof service.init === 'function') {
+          service.init(this.grid, this.sharedService);
+        }
+      }
+    }
+
+    // Pagination Service
+    // this.paginationService.init(this.grid)
+
     const slickerElementInstance = {
       // Slick Grid & DataView objects
       dataView: this.dataView,
       slickGrid: this.grid,
 
       // return all available Services (non-singleton)
-      backendService: this._gridOptions && this._gridOptions.backendServiceApi && this._gridOptions.backendServiceApi.service,
-      // excelExportService: this.excelExportService,
-      // exportService: this.exportService,
       filterService: this.filterService,
       gridEventService: this.gridEventService,
       gridStateService: this.gridStateService,
@@ -461,7 +476,7 @@ export class VanillaGridBundle {
     return options;
   }
 
-  bindDifferentHooks(grid: any, gridOptions: GridOption, dataView: any) {
+  bindDifferentHooks(grid: SlickGrid, gridOptions: GridOption, dataView: DataView) {
     // bind external filter (backend) when available or default onFilter (dataView)
     if (gridOptions.enableFiltering && !this.customDataView) {
       this.filterService.init(grid);
@@ -545,9 +560,9 @@ export class VanillaGridBundle {
   }
 
   /**
- * When dataset changes, we need to refresh the entire grid UI & possibly resize it as well
- * @param dataset
- */
+   * When dataset changes, we need to refresh the entire grid UI & possibly resize it as well
+   * @param dataset
+   */
   refreshGridData(dataset: any[], totalCount?: number) {
     // local grid, check if we need to show the Pagination
     // if so then also check if there's any presets and finally initialize the PaginationService
diff --git a/packages/web-demo-vanilla-bundle/src/examples/example01.ts b/packages/web-demo-vanilla-bundle/src/examples/example01.ts
index af631529e..ff94b7949 100644
--- a/packages/web-demo-vanilla-bundle/src/examples/example01.ts
+++ b/packages/web-demo-vanilla-bundle/src/examples/example01.ts
@@ -48,7 +48,6 @@ export class Example1 {
     ];
     this.gridOptions1 = {
       enableAutoResize: false,
-      enableExport: true,
       gridHeight: 225,
       gridWidth: 800,
       rowHeight: 33,
diff --git a/packages/web-demo-vanilla-bundle/src/examples/example02.html b/packages/web-demo-vanilla-bundle/src/examples/example02.html
index e0651838e..d9b630719 100644
--- a/packages/web-demo-vanilla-bundle/src/examples/example02.html
+++ b/packages/web-demo-vanilla-bundle/src/examples/example02.html
@@ -23,6 +23,10 @@ <h3 class="title is-3">
       <span class="icon mdi mdi-arrow-expand"></span>
       <span>Expand all groups</span>
     </button>
+    <button class="button is-small" onclick.delegate="exportToExcel()">
+      <span class="icon mdi mdi-file-excel-outline"></span>
+      <span>Export to Excel</span>
+    </button>
   </div>
 
   <div class="row">
diff --git a/packages/web-demo-vanilla-bundle/src/examples/example02.ts b/packages/web-demo-vanilla-bundle/src/examples/example02.ts
index f633dbab9..220bfd461 100644
--- a/packages/web-demo-vanilla-bundle/src/examples/example02.ts
+++ b/packages/web-demo-vanilla-bundle/src/examples/example02.ts
@@ -1,5 +1,8 @@
-import { Aggregators, Column, FieldType, Filters, SortComparers, SortDirectionNumber, Grouping, GroupTotalFormatters, Formatters, GridOption } from '@slickgrid-universal/common';
+import { Aggregators, Column, FieldType, Filters, SortComparers, SortDirectionNumber, Grouping, GroupTotalFormatters, Formatters, GridOption, FileType } from '@slickgrid-universal/common';
+import { ExcelExportService } from '@slickgrid-universal/excel-export';
+import { FileExportService } from '@slickgrid-universal/file-export';
 import { Slicker } from '@slickgrid-universal/vanilla-bundle';
+
 import { ExampleGridOptions } from './example-grid-options';
 import '../material-styles.scss';
 import './example02.scss';
@@ -15,6 +18,7 @@ export class Example2 {
   commandQueue = [];
   slickgridLwc;
   slickerGridInstance;
+  excelExportService = new ExcelExportService();
 
   attached() {
     this.initializeGrid();
@@ -22,6 +26,8 @@ export class Example2 {
     const gridContainerElm = document.querySelector(`.grid2`);
 
     gridContainerElm.addEventListener('onslickergridcreated', this.handleOnSlickerGridCreated.bind(this));
+    gridContainerElm.addEventListener('onbeforeexporttoexcel', () => console.log('onBeforeExportToExcel'));
+    gridContainerElm.addEventListener('onafterexporttoexcel', () => console.log('onAfterExportToExcel'));
     this.slickgridLwc = new Slicker.GridBundle(gridContainerElm, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, this.dataset);
   }
 
@@ -127,12 +133,14 @@ export class Example2 {
       enableExport: true,
       enableFiltering: true,
       enableGrouping: true,
-      excelExportOptions: {
+      exportOptions: {
         sanitizeDataExport: true
       },
-      exportOptions: {
+      enableExcelExport: true,
+      excelExportOptions: {
         sanitizeDataExport: true
       },
+      registerExternalServices: [this.excelExportService, new FileExportService()],
       showCustomFooter: true, // display some metrics in the bottom custom footer
       customFooterOptions: {
         // optionally display some text on the left footer container
@@ -180,6 +188,10 @@ export class Example2 {
     this.dataviewObj.expandAllGroups();
   }
 
+  exportToExcel() {
+    this.excelExportService.exportToExcel({ filename: 'export', format: FileType.xlsx, });
+  }
+
   groupByDuration() {
     this.dataviewObj.setGrouping({
       getter: 'duration',
diff --git a/packages/web-demo-vanilla-bundle/src/examples/example03.ts b/packages/web-demo-vanilla-bundle/src/examples/example03.ts
index 4b28945ff..e7f5076d6 100644
--- a/packages/web-demo-vanilla-bundle/src/examples/example03.ts
+++ b/packages/web-demo-vanilla-bundle/src/examples/example03.ts
@@ -1,5 +1,7 @@
 import { Aggregators, Column, Editors, FieldType, Filters, GroupingGetterFunction, SortComparers, SortDirectionNumber, Grouping, GroupTotalFormatters, Formatters, GridOption } from '@slickgrid-universal/common';
+import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { Slicker } from '@slickgrid-universal/vanilla-bundle';
+
 import { ExampleGridOptions } from './example-grid-options';
 import '../salesforce-styles.scss';
 import './example03.scss';
@@ -251,10 +253,11 @@ export class Example3 {
       enableAutoSizeColumns: true,
       enableAutoResize: true,
       enableCellNavigation: true,
-      enableExport: true,
-      exportOptions: {
+      enableExcelExport: true,
+      excelExportOptions: {
         exportWithFormatter: true
       },
+      registerExternalServices: [new ExcelExportService()],
       enableFiltering: true,
       rowSelectionOptions: {
         // True (Single Selection), False (Multiple Selections)
diff --git a/packages/web-demo-vanilla-bundle/src/examples/example04.ts b/packages/web-demo-vanilla-bundle/src/examples/example04.ts
index f6ec7bb73..ac32202b9 100644
--- a/packages/web-demo-vanilla-bundle/src/examples/example04.ts
+++ b/packages/web-demo-vanilla-bundle/src/examples/example04.ts
@@ -1,5 +1,7 @@
 import { AutocompleteOption, Column, ColumnEditorDualInput, Editors, FieldType, Filters, Formatters, OperatorType, GridOption } from '@slickgrid-universal/common';
+import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { Slicker } from '@slickgrid-universal/vanilla-bundle';
+
 import { ExampleGridOptions } from './example-grid-options';
 
 // you can create custom validator to pass to an inline editor
@@ -307,11 +309,12 @@ export class Example4 {
       enableAutoResize: true,
       enableCellNavigation: true,
       enableFiltering: true,
-      enableExport: true,
-      exportOptions: {
+      enableExcelExport: true,
+      excelExportOptions: {
         exportWithFormatter: true,
         sanitizeDataExport: true
       },
+      registerExternalServices: [new ExcelExportService()],
       rowSelectionOptions: {
         // True (Single Selection), False (Multiple Selections)
         selectActiveRow: false
diff --git a/packages/web-demo-vanilla-bundle/src/examples/example05.ts b/packages/web-demo-vanilla-bundle/src/examples/example05.ts
index 21f1f5bc7..55f5cd1c6 100644
--- a/packages/web-demo-vanilla-bundle/src/examples/example05.ts
+++ b/packages/web-demo-vanilla-bundle/src/examples/example05.ts
@@ -5,7 +5,9 @@ import {
   Formatters,
   GridOption,
 } from '@slickgrid-universal/common';
+import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { Slicker } from '@slickgrid-universal/vanilla-bundle';
+
 import { ExampleGridOptions } from './example-grid-options';
 import './example05.scss';
 
@@ -81,7 +83,12 @@ export class Example5 {
       },
       enableAutoSizeColumns: true,
       enableAutoResize: true,
-      enableExport: true,
+      enableExcelExport: true,
+      excelExportOptions: {
+        exportWithFormatter: true,
+        sanitizeDataExport: true
+      },
+      registerExternalServices: [new ExcelExportService()],
       enableFiltering: true,
       enableTreeData: true, // you must enable this flag for the filtering & sorting to work as expected
       treeDataOptions: {
diff --git a/packages/web-demo-vanilla-bundle/src/examples/example06.ts b/packages/web-demo-vanilla-bundle/src/examples/example06.ts
index 5e21364d1..9056adb53 100644
--- a/packages/web-demo-vanilla-bundle/src/examples/example06.ts
+++ b/packages/web-demo-vanilla-bundle/src/examples/example06.ts
@@ -7,7 +7,9 @@ import {
   Formatter,
   Formatters,
 } from '@slickgrid-universal/common';
+import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { Slicker } from '@slickgrid-universal/vanilla-bundle';
+
 import './example06.scss';
 import { ExampleGridOptions } from './example-grid-options';
 
@@ -64,7 +66,12 @@ export class Example6 {
       },
       enableAutoSizeColumns: true,
       enableAutoResize: true,
-      enableExport: true,
+      enableExcelExport: true,
+      excelExportOptions: {
+        exportWithFormatter: true,
+        sanitizeDataExport: true
+      },
+      registerExternalServices: [new ExcelExportService()],
       enableFiltering: true,
       enableTreeData: true, // you must enable this flag for the filtering & sorting to work as expected
       multiColumnSort: false,
diff --git a/packages/web-demo-vanilla-bundle/src/examples/example07.ts b/packages/web-demo-vanilla-bundle/src/examples/example07.ts
index b33e84414..64cc5c031 100644
--- a/packages/web-demo-vanilla-bundle/src/examples/example07.ts
+++ b/packages/web-demo-vanilla-bundle/src/examples/example07.ts
@@ -3,7 +3,9 @@ import {
   GridOption,
   Formatters,
 } from '@slickgrid-universal/common';
+import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { Slicker } from '@slickgrid-universal/vanilla-bundle';
+
 import { ExampleGridOptions } from './example-grid-options';
 
 export class Example7 {
@@ -43,7 +45,12 @@ export class Example7 {
         container: '.demo-container',
         rightPadding: 10
       },
-      enableExport: true,
+      enableExcelExport: true,
+      excelExportOptions: {
+        exportWithFormatter: true,
+        sanitizeDataExport: true
+      },
+      registerExternalServices: [new ExcelExportService()],
       enableCellNavigation: true,
       enableCheckboxSelector: true,
       enableRowSelection: true,
diff --git a/packages/web-demo-vanilla-bundle/src/examples/example08.ts b/packages/web-demo-vanilla-bundle/src/examples/example08.ts
index 43ae2da17..a62913372 100644
--- a/packages/web-demo-vanilla-bundle/src/examples/example08.ts
+++ b/packages/web-demo-vanilla-bundle/src/examples/example08.ts
@@ -3,7 +3,9 @@ import {
   GridOption,
   FieldType,
 } from '@slickgrid-universal/common';
+import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { Slicker } from '@slickgrid-universal/vanilla-bundle';
+
 import { ExampleGridOptions } from './example-grid-options';
 import '../salesforce-styles.scss';
 
@@ -46,7 +48,12 @@ export class Example08 {
       enableAutoResize: false,
       gridHeight: 275,
       gridWidth: 800,
-      enableExport: true,
+      enableExcelExport: true,
+      excelExportOptions: {
+        exportWithFormatter: true,
+        sanitizeDataExport: true
+      },
+      registerExternalServices: [new ExcelExportService()],
       enableCellNavigation: true,
       enableColumnReorder: false,
       enableSorting: true,
diff --git a/packages/web-demo-vanilla-bundle/src/examples/example50.ts b/packages/web-demo-vanilla-bundle/src/examples/example50.ts
index 409b633cf..cddbfcafb 100644
--- a/packages/web-demo-vanilla-bundle/src/examples/example50.ts
+++ b/packages/web-demo-vanilla-bundle/src/examples/example50.ts
@@ -1,5 +1,7 @@
 import { Column, GridOption, FormatterResultObject, OnEventArgs, SortDirectionString, Formatters } from '@slickgrid-universal/common';
+import { FileExportService } from '@slickgrid-universal/file-export';
 import { Slicker } from '@slickgrid-universal/vanilla-bundle';
+
 import '../salesforce-styles.scss';
 import './example50.scss';
 
@@ -162,6 +164,10 @@ export class Example50 {
       enableAutoSizeColumns: true,
       enableAutoResize: true,
       enableExport: true,
+      exportOptions: {
+        exportWithFormatter: true,
+      },
+      registerExternalServices: [new FileExportService()],
       enableCellNavigation: true,
       enableCheckboxSelector: true,
       enableFiltering: true,
@@ -242,7 +248,7 @@ export class Example50 {
   }
 
   authSellFormatter(row, cell, value, columnDef, dataContext) {
-    //Auth_Sell_Ext_Price__c, Requested_Sell_Net_Multiplier__c
+    // Auth_Sell_Ext_Price__c, Requested_Sell_Net_Multiplier__c
     let authSellPrice = '';
     if (dataContext.Auth_Sell_Ext_Price__c !== undefined) {
       authSellPrice = Slicker.Utilities.formatNumber(dataContext.Auth_Sell_Ext_Price__c, 0, 2, false, '$', '', '.', ',');
@@ -287,7 +293,7 @@ export class Example50 {
     return output;
   }
 
-  fakeHyperlinkFormatter(row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: any) {
+  fakeHyperlinkFormatter(row: number, cell: number, value: any) {
     return value ? `<span class="fake-hyperlink">${value}</span>` : '';
   }
 
@@ -366,7 +372,7 @@ export class Example50 {
     return true;
   }
 
-  customEditableInputFormatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: any) => {
+  customEditableInputFormatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any) => {
     const isEditableLine = this.isItemEditable(dataContext, columnDef);
     value = (value === null || value === undefined) ? '' : value;
 
diff --git a/packages/web-demo-vanilla-bundle/src/examples/example51.ts b/packages/web-demo-vanilla-bundle/src/examples/example51.ts
index 14bb920a0..0955714b9 100644
--- a/packages/web-demo-vanilla-bundle/src/examples/example51.ts
+++ b/packages/web-demo-vanilla-bundle/src/examples/example51.ts
@@ -1,4 +1,4 @@
-import { Column, GridOption, FormatterResultObject, OnEventArgs, SortDirectionString, Formatters } from '@slickgrid-universal/common';
+import { Column, GridOption, FormatterResultObject, OnEventArgs, SortDirectionString } from '@slickgrid-universal/common';
 import { Slicker } from '@slickgrid-universal/vanilla-bundle';
 import '../salesforce-styles.scss';
 import './example51.scss';
@@ -324,7 +324,7 @@ export class Example51 {
     return output;
   }
 
-  fakeHyperlinkFormatter(row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: any) {
+  fakeHyperlinkFormatter(row: number, cell: number, value: any) {
     return value ? `<span class="fake-hyperlink">${value}</span>` : '';
   }
 
@@ -359,7 +359,7 @@ export class Example51 {
     return output;
   }
 
-  customEditableInputFormatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: any) => {
+  customEditableInputFormatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any) => {
     const isEditableLine = this.isItemEditable(dataContext, columnDef);
     value = (value === null || value === undefined) ? '' : value;
 
@@ -468,7 +468,6 @@ export class Example51 {
     const args = event && event.detail && event.detail.args;
     if (eventDetail && args) {
       const grid = args.grid;
-      const dataView = grid.getData();
       const columnDef = grid && grid.getColumns()[args.cell];
       const field = columnDef && columnDef.field || '';
       const cell = this.gridObj.getCellFromEvent(eventDetail.eventData);