slickgrid-react 1.0.0-beta.1 → 2.0.0

package/dist/esm/{custom-elements → components}/slickgrid-react.js

@@ -1,17 +1,17 @@
+var _a;
 // import 3rd party vendor libs
-// also only import jQueryUI necessary widget (note autocomplete & slider are imported in their respective editors/filters)
-import 'slickgrid/lib/jquery.event.drag-2.3.0';
-import 'slickgrid/lib/jquery.mousewheel';
-import 'slickgrid/slick.core';
-import 'slickgrid/slick.dataview';
-import 'slickgrid/slick.grid';
-import 'slickgrid/slick.groupitemmetadataprovider';
+import * as $ from 'jquery';
+import i18next from 'i18next';
 import React from 'react';
+import 'slickgrid/dist/slick.core.min';
+import 'slickgrid/dist/slick.interactions.min';
+import 'slickgrid/dist/slick.grid.min';
+import 'slickgrid/dist/slick.dataview.min';
+import * as Sortable_ from 'sortablejs';
+const Sortable = ((_a = Sortable_ === null || Sortable_ === void 0 ? void 0 : Sortable_['default']) !== null && _a !== void 0 ? _a : Sortable_); // patch for rollup
 import { GridStateType, 
 // services
-BackendUtilityService, CollectionService, EventNamingStyle, ExtensionService, FilterFactory, FilterService, GridEventService, GridService, GridStateService, GroupingAndColspanService, PaginationService, ResizerService, SharedService, SlickgridConfig, SortService, TreeDataService, 
-// extensions
-AutoTooltipExtension, CheckboxSelectorExtension, CellExternalCopyManagerExtension, CellMenuExtension, ColumnPickerExtension, ContextMenuExtension, DraggableGroupingExtension, ExtensionUtility, GridMenuExtension, GroupItemMetaProviderExtension, HeaderMenuExtension, HeaderButtonExtension, RowSelectionExtension, RowMoveManagerExtension, 
+BackendUtilityService, CollectionService, EventNamingStyle, ExtensionService, ExtensionUtility, FilterFactory, FilterService, GridEventService, GridService, GridStateService, GroupingAndColspanService, PaginationService, ResizerService, SharedService, SlickGroupItemMetadataProvider, SlickgridConfig, SortService, TreeDataService, 
 // utilities
 autoAddEditorFormatterToColumnsWithEditor, emptyElement, } from '@slickgrid-universal/common';
 import { EventPubSubService } from '@slickgrid-universal/event-pub-sub';
@@ -22,16 +22,110 @@ import { dequal } from 'dequal/lite';
 import { Constants } from '../constants';
 import { GlobalGridOptions } from '../global-grid-options';
 import { ReactUtilService, disposeAllSubscriptions, TranslaterService, } from '../services/index';
-import { RowDetailViewExtension } from '../extensions';
-import { GlobalContainerService, GlobalEventPubSubService } from '../services/singletons';
+import { GlobalContainerService } from '../services/singletons';
+// add Sortable to the window object so that SlickGrid lib can use globally
+window.Sortable = Sortable;
 class CustomEventPubSubService extends EventPubSubService {
     set elementSource(value) {
         this._elementSource = value;
     }
 }
-export class ReactSlickgridCustomElement extends React.Component {
+export class ReactSlickgrid extends React.Component {
+    setStateValue(key, value, callback) {
+        if (this.state && this.state[key] === value) {
+            return;
+        }
+        if (!this._mounted) {
+            this.state = this.state || {};
+            this.state[key] = value;
+            return;
+        }
+        this.setState(() => {
+            const result = {};
+            result[key] = value;
+            return result;
+        }, callback);
+    }
+    get gridOptions() {
+        return this._gridOptions || {};
+    }
+    set gridOptions(options) {
+        var _a, _b, _c;
+        let mergedOptions;
+        // if we already have grid options, when grid was already initialized, we'll merge with those options
+        // else we'll merge with global grid options
+        if ((_a = this.grid) === null || _a === void 0 ? void 0 : _a.getOptions) {
+            mergedOptions = $.extend(true, {}, this.grid.getOptions(), options);
+        }
+        else {
+            mergedOptions = this.mergeGridOptions(options);
+        }
+        if (((_b = this.sharedService) === null || _b === void 0 ? void 0 : _b.gridOptions) && ((_c = this.grid) === null || _c === void 0 ? void 0 : _c.setOptions)) {
+            this.sharedService.gridOptions = mergedOptions;
+            this.grid.setOptions(mergedOptions, false, true); // make sure to supressColumnCheck (3rd arg) to avoid problem with changeColumnsArrangement() and custom grid view
+            this.grid.reRenderColumns(true); // then call a re-render since we did supressColumnCheck on previous setOptions
+        }
+        this._gridOptions = mergedOptions;
+    }
+    get paginationService() {
+        var _a;
+        return (_a = this.state) === null || _a === void 0 ? void 0 : _a.paginationService;
+    }
+    set paginationService(value) {
+        this.setStateValue('paginationService', value);
+    }
+    get dataset() {
+        var _a;
+        return ((_a = this.dataView) === null || _a === void 0 ? void 0 : _a.getItems()) || [];
+    }
+    set dataset(newDataset) {
+        var _a, _b;
+        const prevDatasetLn = this._currentDatasetLength;
+        const isDatasetEqual = dequal(newDataset, this.dataset || []);
+        const isDeepCopyDataOnPageLoadEnabled = !!((_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.enableDeepCopyDatasetOnPageLoad);
+        let data = isDeepCopyDataOnPageLoadEnabled ? $.extend(true, [], newDataset) : newDataset;
+        // when Tree Data is enabled and we don't yet have the hierarchical dataset filled, we can force a convert+sort of the array
+        if (this.grid && ((_b = this.gridOptions) === null || _b === void 0 ? void 0 : _b.enableTreeData) && Array.isArray(newDataset) && (newDataset.length > 0 || newDataset.length !== prevDatasetLn || !isDatasetEqual)) {
+            this._isDatasetHierarchicalInitialized = false;
+            data = this.sortTreeDataset(newDataset, !isDatasetEqual); // if dataset changed, then force a refresh anyway
+        }
+        this.refreshGridData(data || []);
+        this._currentDatasetLength = (newDataset || []).length;
+        // expand/autofit columns on first page load
+        // we can assume that if the prevDataset was empty then we are on first load
+        if (this.grid && this.gridOptions.autoFitColumnsOnFirstLoad && prevDatasetLn === 0) {
+            this.grid.autosizeColumns();
+        }
+    }
+    get datasetHierarchical() {
+        return this.sharedService.hierarchicalDataset;
+    }
+    set datasetHierarchical(newHierarchicalDataset) {
+        var _a, _b, _c, _d, _f, _g;
+        const isDatasetEqual = dequal(newHierarchicalDataset, (_b = (_a = this.sharedService) === null || _a === void 0 ? void 0 : _a.hierarchicalDataset) !== null && _b !== void 0 ? _b : []);
+        const prevFlatDatasetLn = this._currentDatasetLength;
+        this.sharedService.hierarchicalDataset = newHierarchicalDataset;
+        if (newHierarchicalDataset && this.props.columnDefinitions && ((_c = this.filterService) === null || _c === void 0 ? void 0 : _c.clearFilters)) {
+            this.filterService.clearFilters();
+        }
+        // when a hierarchical dataset is set afterward, we can reset the flat dataset and call a tree data sort that will overwrite the flat dataset
+        if (this.dataView && newHierarchicalDataset && this.grid && ((_d = this.sortService) === null || _d === void 0 ? void 0 : _d.processTreeDataInitialSort)) {
+            this.dataView.setItems([], (_g = (_f = this._gridOptions) === null || _f === void 0 ? void 0 : _f.datasetIdPropertyName) !== null && _g !== void 0 ? _g : 'id');
+            this.sortService.processTreeDataInitialSort();
+            // we also need to reset/refresh the Tree Data filters because if we inserted new item(s) then it might not show up without doing this refresh
+            // however we need 1 cpu cycle before having the DataView refreshed, so we need to wrap this check in a setTimeout
+            setTimeout(() => {
+                var _a, _b;
+                const flatDatasetLn = (_b = (_a = this.dataView) === null || _a === void 0 ? void 0 : _a.getItemCount()) !== null && _b !== void 0 ? _b : 0;
+                if (flatDatasetLn > 0 && (flatDatasetLn !== prevFlatDatasetLn || !isDatasetEqual)) {
+                    this.filterService.refreshTreeDataFilters();
+                }
+            });
+        }
+        this._isDatasetHierarchicalInitialized = true;
+    }
     constructor(props) {
-        var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
+        var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
         super(props);
         this.props = props;
         this._mounted = false;
@@ -45,46 +139,36 @@ export class ReactSlickgridCustomElement extends React.Component {
         this._isPaginationInitialized = false;
         this._isLocalGrid = true;
         this._registeredResources = [];
+        this.showPagination = false;
         this.serviceList = [];
         this.subscriptions = [];
         this.totalItems = 0;
         this.instances = null;
-        this.elm = React.createRef();
         const slickgridConfig = new SlickgridConfig();
+        this._eventHandler = new Slick.EventHandler();
         this.showPagination = false;
+        // check if the user wants to hide the header row from the start
+        // we only want to do this check once in the constructor
+        this._hideHeaderRowAfterPageLoad = (((_a = props.gridOptions) === null || _a === void 0 ? void 0 : _a.showHeaderRow) === false);
+        this._gridOptions = this.mergeGridOptions(props.gridOptions || {});
         // initialize and assign all Service Dependencies
-        this._eventPubSubService = (_b = (_a = this.props.externalServices) === null || _a === void 0 ? void 0 : _a.eventPubSubService) !== null && _b !== void 0 ? _b : new CustomEventPubSubService();
+        this._eventPubSubService = (_c = (_b = this.props.externalServices) === null || _b === void 0 ? void 0 : _b.eventPubSubService) !== null && _c !== void 0 ? _c : new CustomEventPubSubService();
         this._eventPubSubService.eventNamingStyle = EventNamingStyle.camelCase;
-        this.backendUtilityService = (_d = (_c = this.props.externalServices) === null || _c === void 0 ? void 0 : _c.backendUtilityService) !== null && _d !== void 0 ? _d : new BackendUtilityService();
-        this.gridEventService = (_g = (_f = this.props.externalServices) === null || _f === void 0 ? void 0 : _f.gridEventService) !== null && _g !== void 0 ? _g : new GridEventService();
-        this.sharedService = (_j = (_h = this.props.externalServices) === null || _h === void 0 ? void 0 : _h.sharedService) !== null && _j !== void 0 ? _j : new SharedService();
-        this.collectionService = (_l = (_k = this.props.externalServices) === null || _k === void 0 ? void 0 : _k.collectionService) !== null && _l !== void 0 ? _l : new CollectionService(this.props.translaterService);
-        this.extensionUtility = (_o = (_m = this.props.externalServices) === null || _m === void 0 ? void 0 : _m.extensionUtility) !== null && _o !== void 0 ? _o : new ExtensionUtility(this.sharedService, this.props.translaterService);
+        this.backendUtilityService = (_f = (_d = this.props.externalServices) === null || _d === void 0 ? void 0 : _d.backendUtilityService) !== null && _f !== void 0 ? _f : new BackendUtilityService();
+        this.gridEventService = (_h = (_g = this.props.externalServices) === null || _g === void 0 ? void 0 : _g.gridEventService) !== null && _h !== void 0 ? _h : new GridEventService();
+        this.sharedService = (_k = (_j = this.props.externalServices) === null || _j === void 0 ? void 0 : _j.sharedService) !== null && _k !== void 0 ? _k : new SharedService();
+        this.collectionService = (_m = (_l = this.props.externalServices) === null || _l === void 0 ? void 0 : _l.collectionService) !== null && _m !== void 0 ? _m : new CollectionService(this.props.translaterService);
+        this.extensionUtility = (_p = (_o = this.props.externalServices) === null || _o === void 0 ? void 0 : _o.extensionUtility) !== null && _p !== void 0 ? _p : new ExtensionUtility(this.sharedService, this.backendUtilityService, this.props.translaterService);
         this.filterFactory = new FilterFactory(slickgridConfig, this.props.translaterService, this.collectionService);
-        this.filterService = (_q = (_p = this.props.externalServices) === null || _p === void 0 ? void 0 : _p.filterService) !== null && _q !== void 0 ? _q : new FilterService(this.filterFactory, this._eventPubSubService, this.sharedService, this.backendUtilityService);
-        this.resizerService = (_s = (_r = this.props.externalServices) === null || _r === void 0 ? void 0 : _r.resizerService) !== null && _s !== void 0 ? _s : new ResizerService(this._eventPubSubService);
-        this.sortService = (_u = (_t = this.props.externalServices) === null || _t === void 0 ? void 0 : _t.sortService) !== null && _u !== void 0 ? _u : new SortService(this.sharedService, this._eventPubSubService, this.backendUtilityService);
-        this.treeDataService = (_w = (_v = this.props.externalServices) === null || _v === void 0 ? void 0 : _v.treeDataService) !== null && _w !== void 0 ? _w : new TreeDataService(this._eventPubSubService, this.sharedService, this.sortService);
-        this.paginationService = (_y = (_x = this.props.externalServices) === null || _x === void 0 ? void 0 : _x.paginationService) !== null && _y !== void 0 ? _y : new PaginationService(this._eventPubSubService, this.sharedService, this.backendUtilityService);
-        // extensions
-        const autoTooltipExtension = new AutoTooltipExtension(this.sharedService);
-        const cellExternalCopyManagerExtension = new CellExternalCopyManagerExtension(this.extensionUtility, this.sharedService);
-        const cellMenuExtension = new CellMenuExtension(this.extensionUtility, this.sharedService, this.props.translaterService);
-        const contextMenuExtension = new ContextMenuExtension(this.extensionUtility, this._eventPubSubService, this.sharedService, this.treeDataService, this.props.translaterService);
-        const columnPickerExtension = new ColumnPickerExtension(this.extensionUtility, this.sharedService);
-        const checkboxExtension = new CheckboxSelectorExtension(this.sharedService);
-        const draggableGroupingExtension = new DraggableGroupingExtension(this.extensionUtility, this._eventPubSubService, this.sharedService);
-        const gridMenuExtension = new GridMenuExtension(this.extensionUtility, this.filterService, this._eventPubSubService, this.sharedService, this.sortService, this.backendUtilityService, this.props.translaterService);
-        const groupItemMetaProviderExtension = new GroupItemMetaProviderExtension(this.sharedService);
-        const headerButtonExtension = new HeaderButtonExtension(this.extensionUtility, this.sharedService);
-        const headerMenuExtension = new HeaderMenuExtension(this.extensionUtility, this.filterService, this._eventPubSubService, this.sharedService, this.sortService, this.props.translaterService);
-        const rowDetailViewExtension = new RowDetailViewExtension(this._eventPubSubService, this.props.reactUtilService, this.sharedService);
-        const rowMoveManagerExtension = new RowMoveManagerExtension(this.sharedService);
-        const rowSelectionExtension = new RowSelectionExtension(this.sharedService);
-        this.extensionService = (_0 = (_z = this.props.externalServices) === null || _z === void 0 ? void 0 : _z.extensionService) !== null && _0 !== void 0 ? _0 : new ExtensionService(autoTooltipExtension, cellExternalCopyManagerExtension, cellMenuExtension, checkboxExtension, columnPickerExtension, contextMenuExtension, draggableGroupingExtension, gridMenuExtension, groupItemMetaProviderExtension, headerButtonExtension, headerMenuExtension, rowDetailViewExtension, rowMoveManagerExtension, rowSelectionExtension, this.sharedService, this.props.translaterService);
-        this.gridStateService = (_2 = (_1 = this.props.externalServices) === null || _1 === void 0 ? void 0 : _1.gridStateService) !== null && _2 !== void 0 ? _2 : new GridStateService(this.extensionService, this.filterService, this._eventPubSubService, this.sharedService, this.sortService, this.treeDataService);
-        this.gridService = (_4 = (_3 = this.props.externalServices) === null || _3 === void 0 ? void 0 : _3.gridService) !== null && _4 !== void 0 ? _4 : new GridService(this.gridStateService, this.filterService, this._eventPubSubService, this.paginationService, this.sharedService, this.sortService, this.treeDataService);
-        this.groupingService = (_6 = (_5 = this.props.externalServices) === null || _5 === void 0 ? void 0 : _5.groupingAndColspanService) !== null && _6 !== void 0 ? _6 : new GroupingAndColspanService(this.extensionUtility, this.extensionService, this._eventPubSubService);
+        this.filterService = (_r = (_q = this.props.externalServices) === null || _q === void 0 ? void 0 : _q.filterService) !== null && _r !== void 0 ? _r : new FilterService(this.filterFactory, this._eventPubSubService, this.sharedService, this.backendUtilityService);
+        this.resizerService = (_t = (_s = this.props.externalServices) === null || _s === void 0 ? void 0 : _s.resizerService) !== null && _t !== void 0 ? _t : new ResizerService(this._eventPubSubService);
+        this.sortService = (_v = (_u = this.props.externalServices) === null || _u === void 0 ? void 0 : _u.sortService) !== null && _v !== void 0 ? _v : new SortService(this.sharedService, this._eventPubSubService, this.backendUtilityService);
+        this.treeDataService = (_x = (_w = this.props.externalServices) === null || _w === void 0 ? void 0 : _w.treeDataService) !== null && _x !== void 0 ? _x : new TreeDataService(this._eventPubSubService, this.sharedService, this.sortService);
+        this.paginationService = (_z = (_y = this.props.externalServices) === null || _y === void 0 ? void 0 : _y.paginationService) !== null && _z !== void 0 ? _z : new PaginationService(this._eventPubSubService, this.sharedService, this.backendUtilityService);
+        this.extensionService = (_1 = (_0 = this.props.externalServices) === null || _0 === void 0 ? void 0 : _0.extensionService) !== null && _1 !== void 0 ? _1 : new ExtensionService(this.extensionUtility, this.filterService, this._eventPubSubService, this.sharedService, this.sortService, this.treeDataService, this.props.translaterService);
+        this.gridStateService = (_3 = (_2 = this.props.externalServices) === null || _2 === void 0 ? void 0 : _2.gridStateService) !== null && _3 !== void 0 ? _3 : new GridStateService(this.extensionService, this.filterService, this._eventPubSubService, this.sharedService, this.sortService, this.treeDataService);
+        this.gridService = (_5 = (_4 = this.props.externalServices) === null || _4 === void 0 ? void 0 : _4.gridService) !== null && _5 !== void 0 ? _5 : new GridService(this.gridStateService, this.filterService, this._eventPubSubService, this.paginationService, this.sharedService, this.sortService, this.treeDataService);
+        this.groupingService = (_7 = (_6 = this.props.externalServices) === null || _6 === void 0 ? void 0 : _6.groupingAndColspanService) !== null && _7 !== void 0 ? _7 : new GroupingAndColspanService(this.extensionUtility, this._eventPubSubService);
         this.serviceList = [
             this.extensionService,
             this.filterService,
@@ -97,7 +181,12 @@ export class ReactSlickgridCustomElement extends React.Component {
             this.sortService,
             this.treeDataService,
         ];
+        if (this.props.datasetHierarchical) {
+            this.sharedService.hierarchicalDataset = this.props.datasetHierarchical || [];
+        }
         // register all Service instances in the container
+        this.props.containerService.registerInstance('PubSubService', this._eventPubSubService);
+        this.props.containerService.registerInstance('EventPubSubService', this._eventPubSubService);
         this.props.containerService.registerInstance('ExtensionUtility', this.extensionUtility);
         this.props.containerService.registerInstance('FilterService', this.filterService);
         this.props.containerService.registerInstance('CollectionService', this.collectionService);
@@ -110,47 +199,8 @@ export class ReactSlickgridCustomElement extends React.Component {
         this.props.containerService.registerInstance('ResizerService', this.resizerService);
         this.props.containerService.registerInstance('SharedService', this.sharedService);
         this.props.containerService.registerInstance('SortService', this.sortService);
-        this.props.containerService.registerInstance('EventPubSubService', this._eventPubSubService);
-        this.props.containerService.registerInstance('PubSubService', this._eventPubSubService);
         this.props.containerService.registerInstance('TranslaterService', this.props.translaterService);
         this.props.containerService.registerInstance('TreeDataService', this.treeDataService);
-        this._gridOptions = this.mergeGridOptions(this.props.gridOptions);
-    }
-    setStateValue(key, value) {
-        if (this.state && this.state[key] === value) {
-            return;
-        }
-        if (!this._mounted) {
-            this.state = this.state || {};
-            this.state[key] = value;
-            return;
-        }
-        this.setState(() => {
-            const result = {};
-            result[key] = value;
-            return result;
-        });
-    }
-    get _gridOptions() {
-        var _a;
-        return (_a = this.state) === null || _a === void 0 ? void 0 : _a._gridOptions;
-    }
-    set _gridOptions(value) {
-        this.setStateValue('_gridOptions', value);
-    }
-    get showPagination() {
-        var _a;
-        return (_a = this.state) === null || _a === void 0 ? void 0 : _a.showPagination;
-    }
-    set showPagination(value) {
-        this.setStateValue('showPagination', value);
-    }
-    get paginationService() {
-        var _a;
-        return (_a = this.state) === null || _a === void 0 ? void 0 : _a.paginationService;
-    }
-    set paginationService(value) {
-        this.setStateValue('paginationService', value);
     }
     get eventHandler() {
         return this._eventHandler;
@@ -161,20 +211,39 @@ export class ReactSlickgridCustomElement extends React.Component {
     set isDatasetInitialized(isInitialized) {
         this._isDatasetInitialized = isInitialized;
     }
+    set isDatasetHierarchicalInitialized(isInitialized) {
+        this._isDatasetHierarchicalInitialized = isInitialized;
+    }
     get registeredResources() {
         return this._registeredResources;
     }
     componentDidMount() {
-        var _a;
+        var _a, _b;
         this._mounted = true;
-        if (this.elm.current && this._eventPubSubService instanceof CustomEventPubSubService) {
-            this._eventPubSubService.elementSource = this.elm.current;
+        if (this._elm && this._eventPubSubService instanceof CustomEventPubSubService) {
+            this._eventPubSubService.elementSource = this._elm;
+            // React doesn't play well with Custom Events & also the render is called after the constructor which brings a second problem
+            // to fix both issues, we need to do the following:
+            // loop through all component and subscribe to all props that startsWith "on", assuming they are custom event
+            // and call their listener with event is dispatching
+            for (const prop in this.props) {
+                if (prop.startsWith('on')) {
+                    this.subscriptions.push(this._eventPubSubService.subscribe(prop, (data) => {
+                        const callback = this.props[prop];
+                        const gridEventName = this._eventPubSubService.getEventNameByNamingConvention(prop, '');
+                        typeof callback === 'function' && callback.call(null, new CustomEvent(gridEventName, { detail: data }));
+                    }));
+                }
+            }
         }
-        this._eventHandler = new Slick.EventHandler();
         this.initialization(this._eventHandler);
         this._isGridInitialized = true;
+        if (!this._isPaginationInitialized && !this.props.datasetHierarchical && ((_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.enablePagination) && this._isLocalGrid) {
+            this.showPagination = true;
+            this.loadLocalGridPagination(this.dataset);
+        }
         // recheck the empty warning message after grid is shown so that it works in every use case
-        if ((_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.enableEmptyDataWarningMessage) {
+        if ((_b = this._gridOptions) === null || _b === void 0 ? void 0 : _b.enableEmptyDataWarningMessage) {
             const dataset = this.props.dataset || [];
             if (Array.isArray(dataset)) {
                 const finalTotalCount = dataset.length;
@@ -184,6 +253,9 @@ export class ReactSlickgridCustomElement extends React.Component {
     }
     initialization(eventHandler) {
         var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+        if (!this._gridOptions || !this._columnDefinitions) {
+            throw new Error('Using `<ReactSlickgrid>` requires columnDefinitions and gridOptions, it seems that you might have forgot to provide them since at least of them is undefined.');
+        }
         this._gridOptions.translater = this.props.translaterService;
         this._eventHandler = eventHandler;
         // when detecting a frozen grid, we'll automatically enable the mousewheel scroll handler so that we can scroll from both left/right frozen containers
@@ -195,6 +267,7 @@ export class ReactSlickgridCustomElement extends React.Component {
         // make sure the dataset is initialized (if not it will throw an error that it cannot getLength of null)
         this._dataset = this._dataset || this.props.dataset || [];
         this._currentDatasetLength = this._dataset.length;
+        this._gridOptions = this.mergeGridOptions(this._gridOptions);
         this._paginationOptions = (_c = this._gridOptions) === null || _c === void 0 ? void 0 : _c.pagination;
         this.locales = (_f = (_d = this._gridOptions) === null || _d === void 0 ? void 0 : _d.locales) !== null && _f !== void 0 ? _f : Constants.locales;
         this.backendServiceApi = (_g = this._gridOptions) === null || _g === void 0 ? void 0 : _g.backendServiceApi;
@@ -204,12 +277,12 @@ export class ReactSlickgridCustomElement extends React.Component {
             const dataviewInlineFilters = this._gridOptions.dataView && this._gridOptions.dataView.inlineFilters || false;
             let dataViewOptions = { inlineFilters: dataviewInlineFilters };
             if (this._gridOptions.draggableGrouping || this._gridOptions.enableGrouping) {
-                this.groupItemMetadataProvider = new Slick.Data.GroupItemMetadataProvider();
+                this.groupItemMetadataProvider = new SlickGroupItemMetadataProvider();
                 this.sharedService.groupItemMetadataProvider = this.groupItemMetadataProvider;
                 dataViewOptions = { ...dataViewOptions, groupItemMetadataProvider: this.groupItemMetadataProvider };
             }
-            this.dataview = new Slick.Data.DataView(dataViewOptions);
-            this._eventPubSubService.publish(`onDataviewCreated`, this.dataview);
+            this.dataView = new Slick.Data.DataView(dataViewOptions);
+            this._eventPubSubService.publish(`onDataviewCreated`, this.dataView);
         }
         // get any possible Services that user want to register which don't require SlickGrid to be instantiated
         // RxJS Resource is in this lot because it has to be registered before anything else and doesn't require SlickGrid to be initialized
@@ -226,17 +299,20 @@ export class ReactSlickgridCustomElement extends React.Component {
         // save reference for all columns before they optionally become hidden/visible
         this.sharedService.allColumns = this._columnDefinitions;
         this.sharedService.visibleColumns = this._columnDefinitions;
+        // after subscribing to potential columns changed, we are ready to create these optional extensions
+        // when we did find some to create (RowMove, RowDetail, RowSelections), it will automatically modify column definitions (by previous subscribe)
         this.extensionService.createExtensionsBeforeGridCreation(this._columnDefinitions, this._gridOptions);
         // if user entered some Pinning/Frozen "presets", we need to apply them in the grid options
-        if ((_h = this._gridOptions.presets) === null || _h === void 0 ? void 0 : _h.pinning) {
-            this._gridOptions = { ...this._gridOptions, ...this._gridOptions.presets.pinning };
+        if ((_h = this.gridOptions.presets) === null || _h === void 0 ? void 0 : _h.pinning) {
+            this.gridOptions = { ...this.gridOptions, ...this.gridOptions.presets.pinning };
         }
         // build SlickGrid Grid, also user might optionally pass a custom dataview (e.g. remote model)
-        this.grid = new Slick.Grid(`#${this.props.gridId}`, this.props.customDataView || this.dataview, this._columnDefinitions, this._gridOptions);
-        this.sharedService.dataView = this.dataview;
+        this.grid = new Slick.Grid(`#${this.props.gridId}`, this.props.customDataView || this.dataView, this._columnDefinitions, this._gridOptions);
+        this.sharedService.dataView = this.dataView;
         this.sharedService.slickGrid = this.grid;
+        this.sharedService.gridContainerElement = this._elm;
         this.extensionService.bindDifferentExtensions();
-        this.bindDifferentHooks(this.grid, this._gridOptions, this.dataview);
+        this.bindDifferentHooks(this.grid, this._gridOptions, this.dataView);
         // when it's a frozen grid, we need to keep the frozen column id for reference if we ever show/hide column from ColumnPicker/GridMenu afterward
         const frozenColumnIndex = (_k = (_j = this._gridOptions) === null || _j === void 0 ? void 0 : _j.frozenColumn) !== null && _k !== void 0 ? _k : -1;
         if (frozenColumnIndex >= 0 && frozenColumnIndex <= this._columnDefinitions.length && this._columnDefinitions.length > 0) {
@@ -248,7 +324,7 @@ export class ReactSlickgridCustomElement extends React.Component {
         this.grid.init();
         // initialized the resizer service only after SlickGrid is initialized
         // if we don't we end up binding our resize to a grid element that doesn't yet exist in the DOM and the resizer service will fail silently (because it has a try/catch that unbinds the resize without throwing back)
-        const gridContainerElm = (_o = this.elm.current) === null || _o === void 0 ? void 0 : _o.querySelector('div');
+        const gridContainerElm = this._elm;
         if (gridContainerElm) {
             this.resizerService.init(this.grid, gridContainerElm);
         }
@@ -257,15 +333,14 @@ export class ReactSlickgridCustomElement extends React.Component {
             this.slickFooter = new SlickFooterComponent(this.grid, this._gridOptions.customFooterOptions, this._eventPubSubService, this.props.translaterService);
             this.slickFooter.renderFooter(gridContainerElm);
         }
-        if (!this.props.customDataView && this.dataview) {
-            const initialDataset = ((_p = this._gridOptions) === null || _p === void 0 ? void 0 : _p.enableTreeData) ? this.sortTreeDataset(this.props.dataset) : this.props.dataset;
+        if (!this.props.customDataView && this.dataView) {
+            const initialDataset = ((_o = this._gridOptions) === null || _o === void 0 ? void 0 : _o.enableTreeData) ? this.sortTreeDataset(this.props.dataset) : this.props.dataset;
             if (Array.isArray(initialDataset)) {
-                this.dataview.setItems(initialDataset, this._gridOptions.datasetIdPropertyName);
+                this.dataView.setItems(initialDataset, (_p = this._gridOptions.datasetIdPropertyName) !== null && _p !== void 0 ? _p : 'id');
             }
             // if you don't want the items that are not visible (due to being filtered out or being on a different page)
             // to stay selected, pass 'false' to the second arg
-            const selectionModel = (_r = (_q = this.grid) === null || _q === void 0 ? void 0 : _q.getSelectionModel) === null || _r === void 0 ? void 0 : _r.call(_q);
-            if (selectionModel && ((_s = this._gridOptions) === null || _s === void 0 ? void 0 : _s.dataView) && this._gridOptions.dataView.hasOwnProperty('syncGridSelection')) {
+            if (((_q = this.grid) === null || _q === void 0 ? void 0 : _q.getSelectionModel()) && ((_r = this._gridOptions) === null || _r === void 0 ? void 0 : _r.dataView) && this._gridOptions.dataView.hasOwnProperty('syncGridSelection')) {
                 // if we are using a Backend Service, we will do an extra flag check, the reason is because it might have some unintended behaviors
                 // with the BackendServiceApi because technically the data in the page changes the DataView on every page change.
                 let preservedRowSelectionWithBackend = false;
@@ -279,10 +354,10 @@ export class ReactSlickgridCustomElement extends React.Component {
                         // when using BackendServiceApi, we'll be using the "syncGridSelectionWithBackendService" flag BUT "syncGridSelection" must also be set to True
                         preservedRowSelection = syncGridSelection && preservedRowSelectionWithBackend;
                     }
-                    this.dataview.syncGridSelection(this.grid, preservedRowSelection);
+                    this.dataView.syncGridSelection(this.grid, preservedRowSelection);
                 }
                 else if (typeof syncGridSelection === 'object') {
-                    this.dataview.syncGridSelection(this.grid, syncGridSelection.preserveHidden, syncGridSelection.preserveHiddenOnSelectionChange);
+                    this.dataView.syncGridSelection(this.grid, syncGridSelection.preserveHidden, syncGridSelection.preserveHiddenOnSelectionChange);
                 }
             }
             if (this._dataset.length > 0) {
@@ -309,20 +384,20 @@ export class ReactSlickgridCustomElement extends React.Component {
         this.bindResizeHook(this.grid, this._gridOptions);
         // bind the Backend Service API callback functions only after the grid is initialized
         // because the preProcess() and onInit() might get triggered
-        if ((_t = this._gridOptions) === null || _t === void 0 ? void 0 : _t.backendServiceApi) {
+        if ((_s = this._gridOptions) === null || _s === void 0 ? void 0 : _s.backendServiceApi) {
             this.bindBackendCallbackFunctions(this._gridOptions);
         }
         // create the React Grid Instance with reference to all Services
         const reactElementInstance = {
-            element: this.elm,
-            eventPubSubService: this._eventPubSubService,
+            element: this._elm,
             // Slick Grid & DataView objects
-            dataView: this.dataview,
+            dataView: this.dataView,
             slickGrid: this.grid,
             // public methods
             dispose: this.dispose.bind(this),
             // return all available Services (non-singleton)
-            backendService: (_v = (_u = this._gridOptions) === null || _u === void 0 ? void 0 : _u.backendServiceApi) === null || _v === void 0 ? void 0 : _v.service,
+            backendService: (_u = (_t = this._gridOptions) === null || _t === void 0 ? void 0 : _t.backendServiceApi) === null || _u === void 0 ? void 0 : _u.service,
+            eventPubSubService: this._eventPubSubService,
             filterService: this.filterService,
             gridEventService: this.gridEventService,
             gridStateService: this.gridStateService,
@@ -335,15 +410,17 @@ export class ReactSlickgridCustomElement extends React.Component {
             treeDataService: this.treeDataService,
         };
         // addons (SlickGrid extra plugins/controls)
-        this.extensions = this.extensionService && this.extensionService.extensionList;
+        this.extensions = (_v = this.extensionService) === null || _v === void 0 ? void 0 : _v.extensionList;
         // all instances (SlickGrid, DataView & all Services)
         this.instances = reactElementInstance;
+        this.setStateValue('instances', reactElementInstance);
         this._eventPubSubService.publish(`onReactGridCreated`, reactElementInstance);
     }
     componentWillUnmount(shouldEmptyDomElementContainer = false) {
         var _a, _b, _c, _d, _f;
         this._eventPubSubService.publish(`onBeforeGridDestroy`, this.grid);
         (_a = this._eventHandler) === null || _a === void 0 ? void 0 : _a.unsubscribeAll();
+        i18next.off('languageChanged');
         // we could optionally also empty the content of the grid container DOM element
         if (shouldEmptyDomElementContainer) {
             this.emptyGridContainerElm();
@@ -351,7 +428,7 @@ export class ReactSlickgridCustomElement extends React.Component {
         this._eventPubSubService.publish(`onAfterGridDestroyed`, true);
         // dispose of all Services
         this.serviceList.forEach((service) => {
-            if (service && service.dispose) {
+            if (service === null || service === void 0 ? void 0 : service.dispose) {
                 service.dispose();
             }
         });
@@ -370,12 +447,12 @@ export class ReactSlickgridCustomElement extends React.Component {
         (_b = this.slickEmptyWarning) === null || _b === void 0 ? void 0 : _b.dispose();
         (_c = this.slickFooter) === null || _c === void 0 ? void 0 : _c.dispose();
         (_d = this.slickPagination) === null || _d === void 0 ? void 0 : _d.dispose();
-        if (this.dataview) {
-            if (this.dataview.setItems) {
-                this.dataview.setItems([]);
+        if (this.dataView) {
+            if (this.dataView.setItems) {
+                this.dataView.setItems([]);
             }
-            if (this.dataview.destroy) {
-                this.dataview.destroy();
+            if (this.dataView.destroy) {
+                this.dataView.destroy();
             }
         }
         if ((_f = this.grid) === null || _f === void 0 ? void 0 : _f.destroy) {
@@ -389,16 +466,13 @@ export class ReactSlickgridCustomElement extends React.Component {
             }
             this.backendServiceApi = undefined;
         }
-        /*
         for (const prop of Object.keys(this.props.columnDefinitions)) {
-          (this.props.columnDefinitions as any)[prop] = null;
+            this.props.columnDefinitions[prop] = null;
         }
-        */
         for (const prop of Object.keys(this.sharedService)) {
             this.sharedService[prop] = null;
         }
         this._dataset = null;
-        // this.props.datasetHierarchical = null;
         this._columnDefinitions = [];
     }
     emptyGridContainerElm() {
@@ -420,10 +494,10 @@ export class ReactSlickgridCustomElement extends React.Component {
             this.columnDefinitionsChanged();
         }
         if (this.props.dataset !== prevProps.dataset) {
-            this.datasetChanged(this.props.dataset, prevProps.dataset);
+            this.dataset = this.props.dataset || prevProps.dataset;
         }
         if (this.props.datasetHierarchical && this.props.datasetHierarchical !== prevProps.datasetHierarchical) {
-            this.datasetHierarchicalChanged(this.props.datasetHierarchical);
+            this.datasetHierarchical = this.props.datasetHierarchical;
         }
     }
     columnDefinitionsChanged() {
@@ -450,62 +524,20 @@ export class ReactSlickgridCustomElement extends React.Component {
                 var _a;
                 // make sure the target is the active editor so we do not
                 // commit prematurely
-                if (activeNode && activeNode.contains(target) && this.grid.getEditorLock().isActive() && !((_a = target === null || target === void 0 ? void 0 : target.classList) === null || _a === void 0 ? void 0 : _a.contains('autocomplete'))) {
+                if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.contains(target)) && this.grid.getEditorLock().isActive() && !((_a = target === null || target === void 0 ? void 0 : target.classList) === null || _a === void 0 ? void 0 : _a.contains('autocomplete'))) {
                     this.grid.getEditorLock().commitCurrentEdit();
                 }
             });
         }
     }
-    datasetChanged(newDataset, oldValue) {
-        var _a;
-        const prevDatasetLn = this._currentDatasetLength;
-        const isDatasetEqual = dequal(newDataset, this._dataset || []);
-        let data = newDataset;
-        // when Tree Data is enabled and we don't yet have the hierarchical dataset filled, we can force a convert+sort of the array
-        if (this.grid && ((_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.enableTreeData) && Array.isArray(newDataset) && (newDataset.length > 0 || newDataset.length !== prevDatasetLn || !isDatasetEqual)) {
-            this._isDatasetHierarchicalInitialized = false;
-            data = this.sortTreeDataset(newDataset, !isDatasetEqual); // if dataset changed, then force a refresh anyway
-        }
-        this._dataset = data;
-        this.refreshGridData(data || []);
-        this._currentDatasetLength = (newDataset || []).length;
-        // expand/autofit columns on first page load
-        // we can assume that if the oldValue was empty then we are on first load
-        if (this._gridOptions.autoFitColumnsOnFirstLoad && (!oldValue || oldValue.length < 1)) {
-            this.grid.autosizeColumns();
-        }
-    }
-    datasetHierarchicalChanged(newHierarchicalDataset) {
-        var _a, _b, _c, _d;
-        const isDatasetEqual = dequal(newHierarchicalDataset, (_b = (_a = this.sharedService) === null || _a === void 0 ? void 0 : _a.hierarchicalDataset) !== null && _b !== void 0 ? _b : []);
-        const prevFlatDatasetLn = this._currentDatasetLength;
-        this.sharedService.hierarchicalDataset = newHierarchicalDataset;
-        if (newHierarchicalDataset && this.props.columnDefinitions && ((_c = this.filterService) === null || _c === void 0 ? void 0 : _c.clearFilters)) {
-            this.filterService.clearFilters();
-        }
-        // when a hierarchical dataset is set afterward, we can reset the flat dataset and call a tree data sort that will overwrite the flat dataset
-        if (newHierarchicalDataset && this.grid && ((_d = this.sortService) === null || _d === void 0 ? void 0 : _d.processTreeDataInitialSort)) {
-            this.dataview.setItems([], this._gridOptions.datasetIdPropertyName);
-            this.sortService.processTreeDataInitialSort();
-            // we also need to reset/refresh the Tree Data filters because if we inserted new item(s) then it might not show up without doing this refresh
-            // however we need 1 cpu cycle before having the DataView refreshed, so we need to wrap this check in a setTimeout
-            setTimeout(() => {
-                const flatDatasetLn = this.dataview.getItemCount();
-                if (flatDatasetLn > 0 && (flatDatasetLn !== prevFlatDatasetLn || !isDatasetEqual)) {
-                    this.filterService.refreshTreeDataFilters();
-                }
-            });
-        }
-        this._isDatasetHierarchicalInitialized = true;
-    }
     /**
      * Define our internal Post Process callback, it will execute internally after we get back result from the Process backend call
      * For now, this is GraphQL Service ONLY feature and it will basically
      * refresh the Dataset & Pagination without having the user to create his own PostProcess every time
      */
     createBackendApiInternalPostProcessCallback(gridOptions) {
-        const backendApi = gridOptions && gridOptions.backendServiceApi;
-        if (backendApi && backendApi.service) {
+        const backendApi = gridOptions === null || gridOptions === void 0 ? void 0 : gridOptions.backendServiceApi;
+        if (backendApi === null || backendApi === void 0 ? void 0 : backendApi.service) {
             const backendApiService = backendApi.service;
             // internalPostProcess only works (for now) with a GraphQL Service, so make sure it is of that type
             if (typeof backendApiService.getDatasetName === 'function') {
@@ -521,56 +553,58 @@ export class ReactSlickgridCustomElement extends React.Component {
         }
     }
     bindDifferentHooks(grid, gridOptions, dataView) {
-        var _a, _b;
+        var _a, _b, _c;
         // translate some of them on first load, then on each language change
         if (gridOptions.enableTranslate) {
+            this.extensionService.translateAllExtensions();
             this.translateColumnHeaderTitleKeys();
             this.translateColumnGroupKeys();
         }
         // on locale change, we have to manually translate the Headers, GridMenu
-        this.subscriptions.push(this.props.globalEa.subscribe('i18n:locale:changed', () => {
+        i18next.on('languageChanged', () => {
             // publish event of the same name that Slickgrid-Universal uses on a language change event
             this._eventPubSubService.publish('onLanguageChange');
             if (gridOptions.enableTranslate) {
-                this.extensionService.translateCellMenu();
-                this.extensionService.translateColumnHeaders();
-                this.extensionService.translateColumnPicker();
-                this.extensionService.translateContextMenu();
-                this.extensionService.translateGridMenu();
-                this.extensionService.translateHeaderMenu();
+                this.extensionService.translateAllExtensions();
                 this.translateColumnHeaderTitleKeys();
                 this.translateColumnGroupKeys();
                 if (gridOptions.createPreHeaderPanel && !gridOptions.enableDraggableGrouping) {
                     this.groupingService.translateGroupingAndColSpan();
                 }
             }
-        }));
+        });
         // if user set an onInit Backend, we'll run it right away (and if so, we also need to run preProcess, internalPostProcess & postProcess)
         if (gridOptions.backendServiceApi) {
             const backendApi = gridOptions.backendServiceApi;
-            if (backendApi && backendApi.service && backendApi.service.init) {
+            if ((_a = backendApi === null || backendApi === void 0 ? void 0 : backendApi.service) === null || _a === void 0 ? void 0 : _a.init) {
                 backendApi.service.init(backendApi.options, gridOptions.pagination, this.grid, this.sharedService);
             }
         }
         if (dataView && grid) {
-            const slickgridEventPrefix = (_b = (_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.defaultSlickgridEventPrefix) !== null && _b !== void 0 ? _b : '';
+            const slickgridEventPrefix = (_c = (_b = this._gridOptions) === null || _b === void 0 ? void 0 : _b.defaultSlickgridEventPrefix) !== null && _c !== void 0 ? _c : '';
             // expose all Slick Grid Events through dispatch
             for (const prop in grid) {
                 if (grid.hasOwnProperty(prop) && prop.startsWith('on')) {
-                    const gridEventHandler = grid[prop];
                     const gridEventName = this._eventPubSubService.getEventNameByNamingConvention(prop, slickgridEventPrefix);
-                    this._eventHandler.subscribe(gridEventHandler, (event, args) => {
-                        return this._eventPubSubService.dispatchCustomEvent(gridEventName, { eventData: event, args });
+                    this._eventHandler.subscribe(grid[prop], (event, args) => {
+                        if (this.props.hasOwnProperty(prop)) {
+                            const callback = this.props[prop];
+                            return typeof callback === 'function' && callback(new CustomEvent(gridEventName, { detail: { eventData: event, args } }));
+                        }
+                        return true;
                     });
                 }
             }
             // expose all Slick DataView Events through dispatch
             for (const prop in dataView) {
                 if (dataView.hasOwnProperty(prop) && prop.startsWith('on')) {
-                    const dataViewEventHandler = dataView[prop];
-                    this._eventHandler.subscribe(dataViewEventHandler, (event, args) => {
+                    this._eventHandler.subscribe(dataView[prop], (event, args) => {
                         const dataViewEventName = this._eventPubSubService.getEventNameByNamingConvention(prop, slickgridEventPrefix);
-                        return this._eventPubSubService.dispatchCustomEvent(dataViewEventName, { eventData: event, args });
+                        if (this.props.hasOwnProperty(prop)) {
+                            const callback = this.props[prop];
+                            return typeof callback === 'function' && callback(new CustomEvent(dataViewEventName, { detail: { eventData: event, args } }));
+                        }
+                        return true;
                     });
                 }
             }
@@ -600,37 +634,38 @@ export class ReactSlickgridCustomElement extends React.Component {
                         this.filterService.bindLocalOnFilter(grid);
                     }
                 }
+                // when column are reordered, we need to update the visibleColumn array
+                this._eventHandler.subscribe(grid.onColumnsReordered, (_e, args) => {
+                    this.sharedService.hasColumnsReordered = true;
+                    this.sharedService.visibleColumns = args.impactedColumns;
+                });
                 // load any presets if any (after dataset is initialized)
                 this.loadColumnPresetsWhenDatasetInitialized();
                 this.loadFilterPresetsWhenDatasetInitialized();
                 // When data changes in the DataView, we need to refresh the metrics and/or display a warning if the dataset is empty
-                const onRowCountChangedHandler = dataView.onRowCountChanged;
-                this._eventHandler.subscribe(onRowCountChangedHandler, () => {
+                this._eventHandler.subscribe(dataView.onRowCountChanged, () => {
                     grid.invalidate();
-                    this.handleOnItemCountChanged(dataView.getFilteredItemCount() || 0, dataView.getItemCount());
+                    this.handleOnItemCountChanged(dataView.getFilteredItemCount() || 0, dataView.getItemCount() || 0);
                 });
-                const onSetItemsCalledHandler = dataView.onSetItemsCalled;
-                this._eventHandler.subscribe(onSetItemsCalledHandler, (_e, args) => {
+                this._eventHandler.subscribe(dataView.onSetItemsCalled, (_e, args) => {
                     var _a;
-                    grid.invalidate();
                     this.handleOnItemCountChanged(dataView.getFilteredItemCount() || 0, args.itemCount);
                     // when user has resize by content enabled, we'll force a full width calculation since we change our entire dataset
-                    if (args.itemCount > 0 && (this._gridOptions.autosizeColumnsByCellContentOnFirstLoad || this._gridOptions.enableAutoResizeColumnsByCellContent)) {
+                    if (args.itemCount > 0 && (this.gridOptions.autosizeColumnsByCellContentOnFirstLoad || this.gridOptions.enableAutoResizeColumnsByCellContent)) {
                         this.resizerService.resizeColumnsByCellContent(!((_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.resizeByContentOnlyOnFirstLoad));
                     }
                 });
-                const onRowsChangedHandler = dataView.onRowsChanged;
-                this._eventHandler.subscribe(onRowsChangedHandler, (_e, args) => {
-                    // filtering data with local dataset will not always show correctly unless we call this updateRow/render
-                    // also don't use "invalidateRows" since it destroys the entire row and as bad user experience when updating a row
-                    // see commit: https://github.com/ghiscoding/aurelia-slickgrid/commit/8c503a4d45fba11cbd8d8cc467fae8d177cc4f60
-                    if (gridOptions && gridOptions.enableFiltering && !gridOptions.enableRowDetailView) {
+                if ((gridOptions === null || gridOptions === void 0 ? void 0 : gridOptions.enableFiltering) && !gridOptions.enableRowDetailView) {
+                    this._eventHandler.subscribe(dataView.onRowsChanged, (_e, args) => {
+                        // filtering data with local dataset will not always show correctly unless we call this updateRow/render
+                        // also don't use "invalidateRows" since it destroys the entire row and as bad user experience when updating a row
+                        // see commit: https://github.com/ghiscoding/aurelia-slickgrid/commit/8c503a4d45fba11cbd8d8cc467fae8d177cc4f60
                         if ((args === null || args === void 0 ? void 0 : args.rows) && Array.isArray(args.rows)) {
                             args.rows.forEach((row) => grid.updateRow(row));
                             grid.render();
                         }
-                    }
-                });
+                    });
+                }
             }
         }
         // did the user add a colspan callback? If so, hook it into the DataView getItemMetadata
@@ -645,15 +680,15 @@ export class ReactSlickgridCustomElement extends React.Component {
         }
     }
     bindBackendCallbackFunctions(gridOptions) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _f;
         const backendApi = gridOptions.backendServiceApi;
-        const backendApiService = backendApi && backendApi.service;
-        const serviceOptions = backendApiService && backendApiService.options || {};
+        const backendApiService = backendApi === null || backendApi === void 0 ? void 0 : backendApi.service;
+        const serviceOptions = (backendApiService === null || backendApiService === void 0 ? void 0 : backendApiService.options) || {};
         const isExecuteCommandOnInit = (!serviceOptions) ? false : ((serviceOptions && serviceOptions.hasOwnProperty('executeProcessCommandOnInit')) ? serviceOptions['executeProcessCommandOnInit'] : true);
         if (backendApiService) {
             // update backend filters (if need be) BEFORE the query runs (via the onInit command a few lines below)
             // if user entered some any "presets", we need to reflect them all in the grid
-            if (gridOptions && gridOptions.presets) {
+            if (gridOptions === null || gridOptions === void 0 ? void 0 : gridOptions.presets) {
                 // Filters "presets"
                 if (backendApiService.updateFilters && Array.isArray(gridOptions.presets.filters) && gridOptions.presets.filters.length > 0) {
                     backendApiService.updateFilters(gridOptions.presets.filters, true);
@@ -661,7 +696,7 @@ export class ReactSlickgridCustomElement extends React.Component {
                 // Sorters "presets"
                 if (backendApiService.updateSorters && Array.isArray(gridOptions.presets.sorters) && gridOptions.presets.sorters.length > 0) {
                     // when using multi-column sort, we can have multiple but on single sort then only grab the first sort provided
-                    const sortColumns = this._gridOptions.multiColumnSort ? gridOptions.presets.sorters : gridOptions.presets.sorters.slice(0, 1);
+                    const sortColumns = ((_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.multiColumnSort) ? gridOptions.presets.sorters : gridOptions.presets.sorters.slice(0, 1);
                     backendApiService.updateSorters(undefined, sortColumns);
                 }
                 // Pagination "presets"
@@ -679,7 +714,7 @@ export class ReactSlickgridCustomElement extends React.Component {
             // execute onInit command when necessary
             if (backendApi && backendApiService && (backendApi.onInit || isExecuteCommandOnInit)) {
                 const query = (typeof backendApiService.buildQuery === 'function') ? backendApiService.buildQuery() : '';
-                const process = isExecuteCommandOnInit ? ((_b = (_a = backendApi.process) === null || _a === void 0 ? void 0 : _a.call(backendApi, query)) !== null && _b !== void 0 ? _b : null) : ((_d = (_c = backendApi.onInit) === null || _c === void 0 ? void 0 : _c.call(backendApi, query)) !== null && _d !== void 0 ? _d : null);
+                const process = isExecuteCommandOnInit ? ((_c = (_b = backendApi.process) === null || _b === void 0 ? void 0 : _b.call(backendApi, query)) !== null && _c !== void 0 ? _c : null) : ((_f = (_d = backendApi.onInit) === null || _d === void 0 ? void 0 : _d.call(backendApi, query)) !== null && _f !== void 0 ? _f : null);
                 // wrap this inside a setTimeout to avoid timing issue since the gridOptions needs to be ready before running this onInit
                 setTimeout(() => {
                     var _a, _b, _c, _d;
@@ -726,11 +761,12 @@ export class ReactSlickgridCustomElement extends React.Component {
         }
     }
     executeAfterDataviewCreated(_grid, gridOptions) {
+        var _a;
         // if user entered some Sort "presets", we need to reflect them all in the DOM
         if (gridOptions.enableSorting) {
             if (gridOptions.presets && Array.isArray(gridOptions.presets.sorters)) {
                 // when using multi-column sort, we can have multiple but on single sort then only grab the first sort provided
-                const sortColumns = this._gridOptions.multiColumnSort ? gridOptions.presets.sorters : gridOptions.presets.sorters.slice(0, 1);
+                const sortColumns = ((_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.multiColumnSort) ? gridOptions.presets.sorters : gridOptions.presets.sorters.slice(0, 1);
                 this.sortService.loadGridSorters(sortColumns);
             }
         }
@@ -742,7 +778,7 @@ export class ReactSlickgridCustomElement extends React.Component {
     paginationChanged(pagination) {
         var _a, _b;
         const isSyncGridSelectionEnabled = (_b = (_a = this.gridStateService) === null || _a === void 0 ? void 0 : _a.needToPreserveRowSelection()) !== null && _b !== void 0 ? _b : false;
-        if (!isSyncGridSelectionEnabled && (this._gridOptions.enableRowSelection || this._gridOptions.enableCheckboxSelector)) {
+        if (this.grid && !isSyncGridSelectionEnabled && (this.gridOptions.enableRowSelection || this.gridOptions.enableCheckboxSelector)) {
             this.grid.setSelectedRows([]);
         }
         const { pageNumber, pageSize } = pagination;
@@ -764,67 +800,71 @@ export class ReactSlickgridCustomElement extends React.Component {
         else {
             this._paginationOptions = newPaginationOptions;
         }
-        this._gridOptions.pagination = this._paginationOptions;
-        this.paginationService.updateTotalItems((_a = newPaginationOptions === null || newPaginationOptions === void 0 ? void 0 : newPaginationOptions.totalItems) !== null && _a !== void 0 ? _a : 0, true);
+        if (this._gridOptions) {
+            this._gridOptions.pagination = this._paginationOptions;
+            this.paginationService.updateTotalItems((_a = newPaginationOptions === null || newPaginationOptions === void 0 ? void 0 : newPaginationOptions.totalItems) !== null && _a !== void 0 ? _a : 0, true);
+        }
     }
     /**
      * When dataset changes, we need to refresh the entire grid UI & possibly resize it as well
      * @param dataset
      */
     refreshGridData(dataset, totalCount) {
-        var _a, _b, _c, _d, _f, _g, _h;
+        var _a, _b, _c, _d, _f, _g, _h, _j;
         // 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
         // a local grid with Pagination presets will potentially have a different total of items, we'll need to get it from the DataView and update our total
-        if (((_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.enablePagination) && this._isLocalGrid) {
-            this.showPagination = true;
-            this.loadLocalGridPagination(dataset);
-        }
-        if (((_b = this._gridOptions) === null || _b === void 0 ? void 0 : _b.enableEmptyDataWarningMessage) && Array.isArray(dataset)) {
-            const finalTotalCount = totalCount || dataset.length;
-            this.displayEmptyDataWarning(finalTotalCount < 1);
-        }
-        if (Array.isArray(dataset) && this.grid && ((_c = this.dataview) === null || _c === void 0 ? void 0 : _c.setItems)) {
-            this.dataview.setItems(dataset, this._gridOptions.datasetIdPropertyName);
-            if (!this._gridOptions.backendServiceApi && !this._gridOptions.enableTreeData) {
-                this.dataview.reSort();
+        if (this.grid && this._gridOptions) {
+            if (((_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.enablePagination) && this._isLocalGrid) {
+                this.showPagination = true;
+                this.loadLocalGridPagination(dataset);
             }
-            if (dataset.length > 0) {
-                if (!this._isDatasetInitialized) {
-                    this.loadFilterPresetsWhenDatasetInitialized();
-                    if (this._gridOptions.enableCheckboxSelector) {
-                        this.loadRowSelectionPresetWhenExists();
+            if (((_b = this._gridOptions) === null || _b === void 0 ? void 0 : _b.enableEmptyDataWarningMessage) && Array.isArray(dataset)) {
+                const finalTotalCount = totalCount || dataset.length;
+                this.displayEmptyDataWarning(finalTotalCount < 1);
+            }
+            if (Array.isArray(dataset) && this.grid && ((_c = this.dataView) === null || _c === void 0 ? void 0 : _c.setItems)) {
+                this.dataView.setItems(dataset, (_d = this._gridOptions.datasetIdPropertyName) !== null && _d !== void 0 ? _d : 'id');
+                if (!this._gridOptions.backendServiceApi && !this._gridOptions.enableTreeData) {
+                    this.dataView.reSort();
+                }
+                if (dataset.length > 0) {
+                    if (!this._isDatasetInitialized) {
+                        this.loadFilterPresetsWhenDatasetInitialized();
+                        if (this._gridOptions.enableCheckboxSelector) {
+                            this.loadRowSelectionPresetWhenExists();
+                        }
                     }
+                    this._isDatasetInitialized = true;
                 }
-                this._isDatasetInitialized = true;
-            }
-            if (dataset) {
-                this.grid.invalidate();
-            }
-            // display the Pagination component only after calling this refresh data first, we call it here so that if we preset pagination page number it will be shown correctly
-            this.showPagination = (this._gridOptions && (this._gridOptions.enablePagination || (this._gridOptions.backendServiceApi && this._gridOptions.enablePagination === undefined))) ? true : false;
-            if (this._paginationOptions && ((_d = this._gridOptions) === null || _d === void 0 ? void 0 : _d.pagination) && ((_f = this._gridOptions) === null || _f === void 0 ? void 0 : _f.backendServiceApi)) {
-                const paginationOptions = this.setPaginationOptionsWhenPresetDefined(this._gridOptions, this._paginationOptions);
-                // when we have a totalCount use it, else we'll take it from the pagination object
-                // only update the total items if it's different to avoid refreshing the UI
-                const totalRecords = (totalCount !== undefined) ? totalCount : ((_h = (_g = this._gridOptions) === null || _g === void 0 ? void 0 : _g.pagination) === null || _h === void 0 ? void 0 : _h.totalItems);
-                if (totalRecords !== undefined && totalRecords !== this.totalItems) {
-                    this.totalItems = +totalRecords;
+                if (dataset) {
+                    this.grid.invalidate();
                 }
-                // initialize the Pagination Service with new pagination options (which might have presets)
-                if (!this._isPaginationInitialized) {
-                    this.initializePaginationService(paginationOptions);
+                // display the Pagination component only after calling this refresh data first, we call it here so that if we preset pagination page number it will be shown correctly
+                this.showPagination = (this._gridOptions && (this._gridOptions.enablePagination || (this._gridOptions.backendServiceApi && this._gridOptions.enablePagination === undefined))) ? true : false;
+                if (this._paginationOptions && ((_f = this._gridOptions) === null || _f === void 0 ? void 0 : _f.pagination) && ((_g = this._gridOptions) === null || _g === void 0 ? void 0 : _g.backendServiceApi)) {
+                    const paginationOptions = this.setPaginationOptionsWhenPresetDefined(this._gridOptions, this._paginationOptions);
+                    // when we have a totalCount use it, else we'll take it from the pagination object
+                    // only update the total items if it's different to avoid refreshing the UI
+                    const totalRecords = (totalCount !== undefined) ? totalCount : ((_j = (_h = this._gridOptions) === null || _h === void 0 ? void 0 : _h.pagination) === null || _j === void 0 ? void 0 : _j.totalItems);
+                    if (totalRecords !== undefined && totalRecords !== this.totalItems) {
+                        this.totalItems = +totalRecords;
+                    }
+                    // initialize the Pagination Service with new pagination options (which might have presets)
+                    if (!this._isPaginationInitialized) {
+                        this.initializePaginationService(paginationOptions);
+                    }
+                    else {
+                        // update the pagination service with the new total
+                        this.paginationService.updateTotalItems(this.totalItems);
+                    }
                 }
-                else {
-                    // update the pagination service with the new total
-                    this.paginationService.updateTotalItems(this.totalItems);
+                // resize the grid inside a slight timeout, in case other DOM element changed prior to the resize (like a filter/pagination changed)
+                if (this.grid && this._gridOptions.enableAutoResize) {
+                    const delay = this._gridOptions.autoResize && this._gridOptions.autoResize.delay;
+                    this.resizerService.resizeGrid(delay || 10);
                 }
             }
-            // resize the grid inside a slight timeout, in case other DOM element changed prior to the resize (like a filter/pagination changed)
-            if (this.grid && this._gridOptions.enableAutoResize) {
-                const delay = this._gridOptions.autoResize && this._gridOptions.autoResize.delay;
-                this.resizerService.resizeGrid(delay || 10);
-            }
         }
     }
     /**
@@ -843,7 +883,8 @@ export class ReactSlickgridCustomElement extends React.Component {
      * if there are then load them in the paginationOptions object
      */
     setPaginationOptionsWhenPresetDefined(gridOptions, paginationOptions) {
-        if (gridOptions.presets && gridOptions.presets.pagination && gridOptions.pagination) {
+        var _a;
+        if (((_a = gridOptions.presets) === null || _a === void 0 ? void 0 : _a.pagination) && gridOptions.pagination) {
             paginationOptions.pageSize = gridOptions.presets.pagination.pageSize;
             paginationOptions.pageNumber = gridOptions.presets.pagination.pageNumber;
         }
@@ -856,7 +897,7 @@ export class ReactSlickgridCustomElement extends React.Component {
      */
     updateColumnDefinitionsList(newColumnDefinitions) {
         var _a, _b, _c;
-        if (newColumnDefinitions) {
+        if (this.grid && this._gridOptions && Array.isArray(newColumnDefinitions)) {
             // map/swap the internal library Editor to the SlickGrid Editor factory
             newColumnDefinitions = this.swapInternalEditorToSlickGridFactoryEditor(newColumnDefinitions);
             // if the user wants to automatically add a Custom Editor Formatter, we need to call the auto add function again
@@ -878,7 +919,7 @@ export class ReactSlickgridCustomElement extends React.Component {
         }
     }
     //
-    // private functions
+    // protected functions
     // ------------------
     /**
      * Loop through all column definitions and copy the original optional `width` properties optionally provided by the user.
@@ -912,18 +953,18 @@ export class ReactSlickgridCustomElement extends React.Component {
     }
     /** Initialize the Pagination Service once */
     initializePaginationService(paginationOptions) {
-        if (this._gridOptions) {
+        if (this.grid && this.gridOptions) {
             this.paginationData = {
-                gridOptions: this._gridOptions,
+                gridOptions: this.gridOptions,
                 paginationService: this.paginationService,
             };
             this.paginationService.totalItems = this.totalItems;
             this.paginationService.init(this.grid, paginationOptions, this.backendServiceApi);
-            this.subscriptions.push(this._eventPubSubService.subscribe('onPaginationChanged', (paginationChanges) => this.paginationChanged(paginationChanges)), this._eventPubSubService.subscribe('onPaginationVisibilityChanged', (visibility) => {
+            this.subscriptions.push(this._eventPubSubService.subscribe('onPaginationChanged', paginationChanges => this.paginationChanged(paginationChanges)), this._eventPubSubService.subscribe('onPaginationOptionsChanged', paginationChanges => this.paginationOptionsChanged(paginationChanges)), this._eventPubSubService.subscribe('onPaginationVisibilityChanged', (visibility) => {
                 var _a, _b, _c;
                 this.showPagination = (_a = visibility === null || visibility === void 0 ? void 0 : visibility.visible) !== null && _a !== void 0 ? _a : false;
-                if ((_b = this._gridOptions) === null || _b === void 0 ? void 0 : _b.backendServiceApi) {
-                    (_c = this.backendUtilityService) === null || _c === void 0 ? void 0 : _c.refreshBackendDataset(this._gridOptions);
+                if ((_b = this.gridOptions) === null || _b === void 0 ? void 0 : _b.backendServiceApi) {
+                    (_c = this.backendUtilityService) === null || _c === void 0 ? void 0 : _c.refreshBackendDataset(this.gridOptions);
                 }
                 this.renderPagination(this.showPagination);
             }));
@@ -932,6 +973,26 @@ export class ReactSlickgridCustomElement extends React.Component {
             this._isPaginationInitialized = true;
         }
     }
+    /**
+     * Render (or dispose) the Pagination Component, user can optionally provide False (to not show it) which will in term dispose of the Pagination,
+     * also while disposing we can choose to omit the disposable of the Pagination Service (if we are simply toggling the Pagination, we want to keep the Service alive)
+     * @param {Boolean} showPagination - show (new render) or not (dispose) the Pagination
+     * @param {Boolean} shouldDisposePaginationService - when disposing the Pagination, do we also want to dispose of the Pagination Service? (defaults to True)
+     */
+    renderPagination(showPagination = true) {
+        var _a;
+        if (((_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.enablePagination) && !this._isPaginationInitialized && showPagination) {
+            this.slickPagination = new SlickPaginationComponent(this.paginationService, this._eventPubSubService, this.sharedService, this.props.translaterService);
+            this.slickPagination.renderPagination(this._elm);
+            this._isPaginationInitialized = true;
+        }
+        else if (!showPagination) {
+            if (this.slickPagination) {
+                this.slickPagination.dispose();
+            }
+            this._isPaginationInitialized = false;
+        }
+    }
     /** Load the Editor Collection asynchronously and replace the "collection" property when Promise resolves */
     loadEditorCollectionAsync(column) {
         var _a;
@@ -954,8 +1015,8 @@ export class ReactSlickgridCustomElement extends React.Component {
                         response.json().then(data => this.updateEditorCollection(column, data));
                     }
                 }
-                else if (response && response['content']) {
-                    this.updateEditorCollection(column, response['content']); // from http-client
+                else if (response === null || response === void 0 ? void 0 : response.content) {
+                    this.updateEditorCollection(column, response.content); // from http-client
                 }
             });
         }
@@ -969,11 +1030,11 @@ export class ReactSlickgridCustomElement extends React.Component {
     /** Load any possible Columns Grid Presets */
     loadColumnPresetsWhenDatasetInitialized() {
         // if user entered some Columns "presets", we need to reflect them all in the grid
-        if (this._gridOptions.presets && Array.isArray(this._gridOptions.presets.columns) && this._gridOptions.presets.columns.length > 0) {
-            const gridColumns = this.gridStateService.getAssociatedGridColumns(this.grid, this._gridOptions.presets.columns);
+        if (this.grid && this.gridOptions.presets && Array.isArray(this.gridOptions.presets.columns) && this.gridOptions.presets.columns.length > 0) {
+            const gridColumns = this.gridStateService.getAssociatedGridColumns(this.grid, this.gridOptions.presets.columns);
             if (gridColumns && Array.isArray(gridColumns) && gridColumns.length > 0) {
                 // make sure that the checkbox selector is also visible if it is enabled
-                if (this._gridOptions.enableCheckboxSelector) {
+                if (this.gridOptions.enableCheckboxSelector) {
                     const checkboxColumn = (Array.isArray(this._columnDefinitions) && this._columnDefinitions.length > 0) ? this._columnDefinitions[0] : null;
                     if (checkboxColumn && checkboxColumn.id === '_checkbox_selector' && gridColumns[0].id !== '_checkbox_selector') {
                         gridColumns.unshift(checkboxColumn);
@@ -990,10 +1051,11 @@ export class ReactSlickgridCustomElement extends React.Component {
     }
     /** Load any possible Filters Grid Presets */
     loadFilterPresetsWhenDatasetInitialized() {
+        var _a, _b, _c;
         if (this._gridOptions && !this.props.customDataView) {
             // if user entered some Filter "presets", we need to reflect them all in the DOM
-            if (this._gridOptions.presets && Array.isArray(this._gridOptions.presets.filters)) {
-                this.filterService.populateColumnFilterSearchTermPresets(this._gridOptions.presets.filters);
+            if (this._gridOptions.presets && (Array.isArray(this._gridOptions.presets.filters) || Array.isArray((_b = (_a = this._gridOptions.presets) === null || _a === void 0 ? void 0 : _a.treeData) === null || _b === void 0 ? void 0 : _b.toggledItems))) {
+                this.filterService.populateColumnFilterSearchTermPresets(((_c = this._gridOptions.presets) === null || _c === void 0 ? void 0 : _c.filters) || []);
             }
         }
     }
@@ -1006,8 +1068,8 @@ export class ReactSlickgridCustomElement extends React.Component {
         var _a;
         if (this._gridOptions && this._paginationOptions) {
             this.totalItems = Array.isArray(dataset) ? dataset.length : 0;
-            if (this._paginationOptions && ((_a = this.dataview) === null || _a === void 0 ? void 0 : _a.getPagingInfo)) {
-                const slickPagingInfo = this.dataview.getPagingInfo();
+            if (this._paginationOptions && ((_a = this.dataView) === null || _a === void 0 ? void 0 : _a.getPagingInfo)) {
+                const slickPagingInfo = this.dataView.getPagingInfo();
                 if ((slickPagingInfo === null || slickPagingInfo === void 0 ? void 0 : slickPagingInfo.hasOwnProperty('totalRows')) && this._paginationOptions.totalItems !== slickPagingInfo.totalRows) {
                     this.totalItems = slickPagingInfo.totalRows || 0;
                 }
@@ -1019,26 +1081,25 @@ export class ReactSlickgridCustomElement extends React.Component {
     }
     /** Load any Row Selections into the DataView that were presets by the user */
     loadRowSelectionPresetWhenExists() {
-        var _a, _b, _c;
+        var _a, _b;
         // if user entered some Row Selections "presets"
         const presets = (_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.presets;
-        const selectionModel = (_c = (_b = this.grid) === null || _b === void 0 ? void 0 : _b.getSelectionModel) === null || _c === void 0 ? void 0 : _c.call(_b);
         const enableRowSelection = this._gridOptions && (this._gridOptions.enableCheckboxSelector || this._gridOptions.enableRowSelection);
-        if (enableRowSelection && selectionModel && presets && presets.rowSelection && (Array.isArray(presets.rowSelection.gridRowIndexes) || Array.isArray(presets.rowSelection.dataContextIds))) {
+        if (enableRowSelection && ((_b = this.grid) === null || _b === void 0 ? void 0 : _b.getSelectionModel()) && (presets === null || presets === void 0 ? void 0 : presets.rowSelection) && (Array.isArray(presets.rowSelection.gridRowIndexes) || Array.isArray(presets.rowSelection.dataContextIds))) {
             let dataContextIds = presets.rowSelection.dataContextIds;
             let gridRowIndexes = presets.rowSelection.gridRowIndexes;
             // maps the IDs to the Grid Rows and vice versa, the "dataContextIds" has precedence over the other
             if (Array.isArray(dataContextIds) && dataContextIds.length > 0) {
-                gridRowIndexes = this.dataview.mapIdsToRows(dataContextIds) || [];
+                gridRowIndexes = this.dataView.mapIdsToRows(dataContextIds) || [];
             }
             else if (Array.isArray(gridRowIndexes) && gridRowIndexes.length > 0) {
-                dataContextIds = this.dataview.mapRowsToIds(gridRowIndexes) || [];
+                dataContextIds = this.dataView.mapRowsToIds(gridRowIndexes) || [];
             }
             this.gridStateService.selectedRowDataContextIds = dataContextIds;
             // change the selected rows except UNLESS it's a Local Grid with Pagination
             // local Pagination uses the DataView and that also trigger a change/refresh
             // and we don't want to trigger 2 Grid State changes just 1
-            if ((this._isLocalGrid && !this._gridOptions.enablePagination) || !this._isLocalGrid) {
+            if ((this._isLocalGrid && !this.gridOptions.enablePagination) || !this._isLocalGrid) {
                 setTimeout(() => {
                     if (this.grid && Array.isArray(gridRowIndexes)) {
                         this.grid.setSelectedRows(gridRowIndexes);
@@ -1052,6 +1113,10 @@ export class ReactSlickgridCustomElement extends React.Component {
         const options = $.extend(true, {}, GlobalGridOptions, gridOptions);
         options.gridId = this.props.gridId;
         options.gridContainerId = `slickGridContainer-${this.props.gridId}`;
+        // also make sure to show the header row if user have enabled filtering
+        if (options.enableFiltering && !options.showHeaderRow) {
+            options.showHeaderRow = options.enableFiltering;
+        }
         // if we have a backendServiceApi and the enablePagination is undefined, we'll assume that we do want to see it, else get that defined value
         options.enablePagination = ((gridOptions.backendServiceApi && gridOptions.enablePagination === undefined) ? true : gridOptions.enablePagination) || false;
         // using jQuery extend to do a deep clone has an unwanted side on objects and pageSizes but ES6 spread has other worst side effects
@@ -1060,26 +1125,19 @@ export class ReactSlickgridCustomElement extends React.Component {
         if ((options === null || options === void 0 ? void 0 : options.pagination) && (gridOptions.enablePagination || gridOptions.backendServiceApi) && gridOptions.pagination && Array.isArray(gridOptions.pagination.pageSizes)) {
             options.pagination.pageSizes = gridOptions.pagination.pageSizes;
         }
-        // also make sure to show the header row if user have enabled filtering
-        this._hideHeaderRowAfterPageLoad = (options.showHeaderRow === false);
-        if (options.enableFiltering && !options.showHeaderRow) {
-            options.showHeaderRow = options.enableFiltering;
-        }
         // when we use Pagination on Local Grid, it doesn't seem to work without enableFiltering
         // so we'll enable the filtering but we'll keep the header row hidden
-        if (options && !options.enableFiltering && options.enablePagination && this._isLocalGrid) {
+        if (this.sharedService && !options.enableFiltering && options.enablePagination && this._isLocalGrid) {
             options.enableFiltering = true;
             options.showHeaderRow = false;
             this._hideHeaderRowAfterPageLoad = true;
-            if (this.sharedService) {
-                this.sharedService.hideHeaderRowAfterPageLoad = true;
-            }
+            this.sharedService.hideHeaderRowAfterPageLoad = true;
         }
         return options;
     }
     /** Pre-Register any Resource that don't require SlickGrid to be instantiated (for example RxJS Resource) */
     preRegisterResources() {
-        this._registeredResources = this._gridOptions.registerExternalResources || [];
+        this._registeredResources = this.gridOptions.registerExternalResources || [];
         // bind & initialize all Components/Services that were tagged as enabled
         // register all services by executing their init method and providing them with the Grid object
         if (Array.isArray(this._registeredResources)) {
@@ -1098,15 +1156,15 @@ export class ReactSlickgridCustomElement extends React.Component {
         // push all other Services that we want to be registered
         this._registeredResources.push(this.gridService, this.gridStateService);
         // when using Grouping/DraggableGrouping/Colspan register its Service
-        if (this._gridOptions.createPreHeaderPanel && !this._gridOptions.enableDraggableGrouping) {
+        if (this.gridOptions.createPreHeaderPanel && !this.gridOptions.enableDraggableGrouping) {
             this._registeredResources.push(this.groupingService);
         }
         // when using Tree Data View, register its Service
-        if (this._gridOptions.enableTreeData) {
+        if (this.gridOptions.enableTreeData) {
             this._registeredResources.push(this.treeDataService);
         }
         // when user enables translation, we need to translate Headers on first pass & subsequently in the bindDifferentHooks
-        if (this._gridOptions.enableTranslate) {
+        if (this.gridOptions.enableTranslate) {
             this.extensionService.translateColumnHeaders();
         }
         // also initialize (render) the empty warning component
@@ -1116,7 +1174,7 @@ export class ReactSlickgridCustomElement extends React.Component {
         // register all services by executing their init method and providing them with the Grid object
         if (Array.isArray(this._registeredResources)) {
             for (const resource of this._registeredResources) {
-                if (typeof resource.init === 'function') {
+                if (this.grid && typeof resource.init === 'function') {
                     resource.init(this.grid, this.props.containerService);
                 }
             }
@@ -1132,26 +1190,6 @@ export class ReactSlickgridCustomElement extends React.Component {
         this.paginationService.addRxJsResource(this.rxjs);
         this.props.containerService.registerInstance('RxJsResource', this.rxjs);
     }
-    /**
-     * Render (or dispose) the Pagination Component, user can optionally provide False (to not show it) which will in term dispose of the Pagination,
-     * also while disposing we can choose to omit the disposable of the Pagination Service (if we are simply toggling the Pagination, we want to keep the Service alive)
-     * @param {Boolean} showPagination - show (new render) or not (dispose) the Pagination
-     * @param {Boolean} shouldDisposePaginationService - when disposing the Pagination, do we also want to dispose of the Pagination Service? (defaults to True)
-     */
-    renderPagination(showPagination = true) {
-        var _a;
-        if (((_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.enablePagination) && !this._isPaginationInitialized && showPagination) {
-            this.slickPagination = new SlickPaginationComponent(this.paginationService, this._eventPubSubService, this.sharedService, this.props.translaterService);
-            this.slickPagination.renderPagination(this.elm.current);
-            this._isPaginationInitialized = true;
-        }
-        else if (!showPagination) {
-            if (this.slickPagination) {
-                this.slickPagination.dispose();
-            }
-            this._isPaginationInitialized = false;
-        }
-    }
     /**
      * Takes a flat dataset with parent/child relationship, sort it (via its tree structure) and return the sorted flat array
      * @param {Array<Object>} flatDatasetInput - flat dataset input
@@ -1164,8 +1202,8 @@ export class ReactSlickgridCustomElement extends React.Component {
         let sortedDatasetResult;
         let flatDatasetOutput = [];
         // if the hierarchical dataset was already initialized then no need to re-convert it, we can use it directly from the shared service ref
-        if (this._isDatasetHierarchicalInitialized && this.props.datasetHierarchical) {
-            sortedDatasetResult = this.treeDataService.sortHierarchicalDataset(this.props.datasetHierarchical);
+        if (this._isDatasetHierarchicalInitialized && this.datasetHierarchical) {
+            sortedDatasetResult = this.treeDataService.sortHierarchicalDataset(this.datasetHierarchical);
             flatDatasetOutput = sortedDatasetResult.flat;
         }
         else if (Array.isArray(flatDatasetInput) && flatDatasetInput.length > 0) {
@@ -1178,7 +1216,7 @@ export class ReactSlickgridCustomElement extends React.Component {
             else {
                 // else we assume that the user provided an array that is already sorted (user's responsability)
                 // and so we can simply convert the array to a tree structure and we're done, no need to sort
-                this.sharedService.hierarchicalDataset = this.treeDataService.convertFlatParentChildToTreeDataset(flatDatasetInput, this._gridOptions);
+                this.sharedService.hierarchicalDataset = this.treeDataService.convertFlatParentChildToTreeDataset(flatDatasetInput, this.gridOptions);
                 flatDatasetOutput = flatDatasetInput || [];
             }
         }
@@ -1199,13 +1237,14 @@ export class ReactSlickgridCustomElement extends React.Component {
             console.error('[Slickgrid-React] Make sure that none of your Column Definition "id" property includes a dot in its name because that will cause some problems with the Editors. For example if your column definition "field" property is "user.firstName" then use "firstName" as the column "id".');
         }
         return columnDefinitions.map((column) => {
+            var _a, _b;
             // on every Editor which have a "collection" or a "collectionAsync"
-            if (column.editor && column.editor.collectionAsync) {
+            if ((_a = column.editor) === null || _a === void 0 ? void 0 : _a.collectionAsync) {
                 this.loadEditorCollectionAsync(column);
             }
             return {
                 ...column,
-                editor: column.editor && column.editor.model,
+                editor: (_b = column.editor) === null || _b === void 0 ? void 0 : _b.model,
                 internalColumnEditor: { ...column.editor }
             };
         });
@@ -1227,9 +1266,8 @@ export class ReactSlickgridCustomElement extends React.Component {
         column.editor.collection = newCollection;
         column.editor.disabled = false;
         // find the new column reference pointer & re-assign the new editor to the internalColumnEditor
-        const columns = this.grid.getColumns();
-        if (Array.isArray(columns)) {
-            const columnRef = columns.find((col) => col.id === column.id);
+        if (Array.isArray(this._columnDefinitions)) {
+            const columnRef = this._columnDefinitions.find((col) => col.id === column.id);
             if (columnRef) {
                 columnRef.internalColumnEditor = column.editor;
             }
@@ -1243,15 +1281,14 @@ export class ReactSlickgridCustomElement extends React.Component {
         }
     }
     render() {
-        return (React.createElement("div", { id: `slickGridContainer-${this.props.gridId}`, className: "grid-pane test3", ref: this.elm },
-            React.createElement("slot", { name: "slickgrid-header" }),
+        return (React.createElement("div", { id: `slickGridContainer-${this.props.gridId}`, className: "grid-pane", ref: elm => this._elm = elm },
+            this.props.header && React.createElement("div", { className: "header" }, this.props.header),
             React.createElement("div", { id: `${this.props.gridId}`, className: "slickgrid-container", style: { width: '100%' }, onBlur: $event => this.commitEdit($event.target) }),
-            React.createElement("slot", { name: "slickgrid-footer" })));
+            this.props.footer && React.createElement("div", { className: "footer" }, this.props.footer)));
     }
 }
-ReactSlickgridCustomElement.defaultProps = {
+ReactSlickgrid.defaultProps = {
     reactUtilService: new ReactUtilService(),
-    globalEa: GlobalEventPubSubService,
     containerService: GlobalContainerService,
     translaterService: new TranslaterService(),
     dataset: [],