slickgrid-react 5.14.1 → 9.0.2

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

@@ -1,4 +1,5 @@
-import { GridStateType, SlickDataView, SlickEventHandler, SlickGrid, 
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SlickDataView, SlickEventHandler, SlickGrid, 
 // services
 BackendUtilityService, collectionObserver, CollectionService, EventNamingStyle, ExtensionService, ExtensionUtility, FilterFactory, FilterService, GridEventService, GridService, GridStateService, HeaderGroupingService, PaginationService, ResizerService, SharedService, SlickGroupItemMetadataProvider, SlickgridConfig, SortService, TreeDataService, 
 // utilities
@@ -9,18 +10,21 @@ import { SlickEmptyWarningComponent } from '@slickgrid-universal/empty-warning-c
 import { SlickPaginationComponent } from '@slickgrid-universal/pagination-component';
 import { extend } from '@slickgrid-universal/utils';
 import { dequal } from 'dequal/lite';
-import i18next from 'i18next';
 import React from 'react';
-import { GlobalGridOptions } from '../global-grid-options';
-import { disposeAllSubscriptions } from '../services/utilities';
-import { GlobalContainerService } from '../services/singletons';
-import { loadReactComponentDynamically } from '../services/reactUtils';
-import { TranslaterService } from '../services/translater.service';
+import { I18nextContext } from '../contexts/i18nextContext.js';
+import { GlobalGridOptions } from '../global-grid-options.js';
+import { disposeAllSubscriptions } from '../services/utilities.js';
+import { GlobalContainerService } from '../services/singletons.js';
+import { loadReactComponentDynamically } from '../services/reactUtils.js';
+import { TranslaterI18NextService } from '../services/translaterI18Next.service.js';
 const WARN_NO_PREPARSE_DATE_SIZE = 10000; // data size to warn user when pre-parse isn't enabled
 export class SlickgridReact extends React.Component {
+    props;
+    // i18next has to be provided by the external user through our `I18nextProvider`
+    static contextType = I18nextContext;
+    _mounted = false;
     setStateValue(key, value, callback) {
-        var _a;
-        if (((_a = this.state) === null || _a === void 0 ? void 0 : _a[key]) === value) {
+        if (this.state?.[key] === value) {
             return;
         }
         if (!this._mounted) {
@@ -34,39 +38,98 @@ export class SlickgridReact extends React.Component {
             return result;
         }, callback);
     }
-    get gridOptions() {
-        return this._gridOptions || {};
+    _columns = [];
+    _currentDatasetLength = 0;
+    _dataset = null;
+    _options = {};
+    _elm;
+    _collectionObservers = [];
+    _eventHandler;
+    _eventPubSubService;
+    _hideHeaderRowAfterPageLoad = false;
+    _i18next;
+    _isAutosizeColsCalled = false;
+    _isGridInitialized = false;
+    _isDatasetInitialized = false;
+    _isDatasetHierarchicalInitialized = false;
+    _isPaginationInitialized = false;
+    _isLocalGrid = true;
+    _paginationOptions;
+    _registeredResources = [];
+    _scrollEndCalled = false;
+    get options() {
+        return this._options || {};
     }
-    set gridOptions(options) {
-        var _a, _b, _c;
+    set options(options) {
         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) {
+        if (this.grid?.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)) {
+        if (this.sharedService?.gridOptions && this.grid?.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;
+        this._options = mergedOptions;
     }
+    groupItemMetadataProvider;
+    backendServiceApi;
+    metrics;
+    showPagination = false;
+    serviceList = [];
+    subscriptions = [];
+    // components
+    slickEmptyWarning;
+    slickFooter;
+    slickPagination;
+    // services
+    backendUtilityService;
+    collectionService;
+    extensionService;
+    extensionUtility;
+    filterFactory;
+    filterService;
+    gridEventService;
+    gridService;
+    gridStateService;
+    groupingService;
+    headerGroupingService;
+    resizerService;
+    rxjs;
+    sharedService;
+    sortService;
+    treeDataService;
+    dataView;
+    grid;
+    totalItems = 0;
+    extensions;
+    instances = null;
+    static defaultProps = {
+        containerService: GlobalContainerService,
+        translaterService: new TranslaterI18NextService(),
+        gridId: '',
+        dataset: [],
+        columns: [],
+        options: {},
+    };
     get dataset() {
-        var _a;
-        return ((_a = this.dataView) === null || _a === void 0 ? void 0 : _a.getItems()) || [];
+        return this.dataView?.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);
+        const isDeepCopyDataOnPageLoadEnabled = !!this._options?.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)) {
+        if (this.grid &&
+            this.options?.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
         }
@@ -74,7 +137,7 @@ export class SlickgridReact extends React.Component {
         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._isAutosizeColsCalled) {
+        if (this.grid && this.options.autoFitColumnsOnFirstLoad && prevDatasetLn === 0 && !this._isAutosizeColsCalled) {
             this.grid.autosizeColumns();
             this._isAutosizeColsCalled = true;
         }
@@ -83,24 +146,22 @@ export class SlickgridReact extends React.Component {
         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 isDatasetEqual = dequal(newHierarchicalDataset, this.sharedService?.hierarchicalDataset ?? []);
         const prevFlatDatasetLn = this._currentDatasetLength;
         if (this.sharedService) {
             this.sharedService.hierarchicalDataset = newHierarchicalDataset;
         }
-        if (newHierarchicalDataset && this.props.columnDefinitions && ((_c = this.filterService) === null || _c === void 0 ? void 0 : _c.clearFilters)) {
+        if (newHierarchicalDataset && this.props.columns && this.filterService?.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');
+        if (this.dataView && newHierarchicalDataset && this.grid && this.sortService?.processTreeDataInitialSort) {
+            this.dataView.setItems([], this._options?.datasetIdPropertyName ?? '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 to queue our process until the flat dataset is ready, so we can queue a microtask to execute the DataView refresh only after everything is ready
             queueMicrotask(() => {
-                var _a, _b;
-                const flatDatasetLn = (_b = (_a = this.dataView) === null || _a === void 0 ? void 0 : _a.getItemCount()) !== null && _b !== void 0 ? _b : 0;
+                const flatDatasetLn = this.dataView?.getItemCount() ?? 0;
                 if (flatDatasetLn > 0 && (flatDatasetLn !== prevFlatDatasetLn || !isDatasetEqual)) {
                     this.filterService.refreshTreeDataFilters();
                 }
@@ -109,43 +170,21 @@ export class SlickgridReact extends React.Component {
         this._isDatasetHierarchicalInitialized = true;
     }
     get paginationService() {
-        var _a;
-        return (_a = this.state) === null || _a === void 0 ? void 0 : _a.paginationService;
+        return this.state?.paginationService;
     }
     set paginationService(value) {
         this.setStateValue('paginationService', value);
     }
     constructor(props) {
-        var _a;
         super(props);
         this.props = props;
-        this._mounted = false;
-        this._columnDefinitions = [];
-        this._currentDatasetLength = 0;
-        this._dataset = null;
-        this._collectionObservers = [];
-        this._hideHeaderRowAfterPageLoad = false;
-        this._isAutosizeColsCalled = false;
-        this._isGridInitialized = false;
-        this._isDatasetInitialized = false;
-        this._isDatasetHierarchicalInitialized = false;
-        this._isPaginationInitialized = false;
-        this._isLocalGrid = true;
-        this._registeredResources = [];
-        this._scrollEndCalled = false;
-        this._gridOptions = {};
-        this.showPagination = false;
-        this.serviceList = [];
-        this.subscriptions = [];
-        this.totalItems = 0;
-        this.instances = null;
         const slickgridConfig = new SlickgridConfig();
         this._eventHandler = new SlickEventHandler();
         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 || {});
+        this._hideHeaderRowAfterPageLoad = props.options?.showHeaderRow === false;
+        this._options = this.mergeGridOptions(props.options || {});
         // initialize and assign all Service Dependencies
         this._eventPubSubService = new EventPubSubService();
         this._eventPubSubService.eventNamingStyle = EventNamingStyle.camelCase;
@@ -198,8 +237,7 @@ export class SlickgridReact extends React.Component {
         this.props.containerService.registerInstance('TreeDataService', this.treeDataService);
     }
     get backendService() {
-        var _a;
-        return (_a = this.gridOptions.backendServiceApi) === null || _a === void 0 ? void 0 : _a.service;
+        return this.options.backendServiceApi?.service;
     }
     get eventHandler() {
         return this._eventHandler;
@@ -217,7 +255,6 @@ export class SlickgridReact extends React.Component {
         return this._registeredResources;
     }
     componentDidMount() {
-        var _a, _b, _c;
         this._mounted = true;
         if (this._elm && this._eventPubSubService instanceof EventPubSubService) {
             this._eventPubSubService.elementSource = this._elm;
@@ -239,19 +276,21 @@ export class SlickgridReact extends React.Component {
         }
         // save resource refs to register before the grid options are merged and possibly deep copied
         // since a deep copy of grid options would lose original resource refs but we want to keep them as singleton
-        this._registeredResources = ((_a = this.gridOptions) === null || _a === void 0 ? void 0 : _a.externalResources) || [];
+        this._registeredResources = this.options?.externalResources || [];
         this.initialization(this._eventHandler);
         this._isGridInitialized = true;
         // 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
         if (!this.hasBackendInfiniteScroll()) {
-            this.gridOptions.enablePagination = !!((this.gridOptions.backendServiceApi && this.gridOptions.enablePagination === undefined) ? true : this.gridOptions.enablePagination);
+            this.options.enablePagination = !!(this.options.backendServiceApi && this.options.enablePagination === undefined
+                ? true
+                : this.options.enablePagination);
         }
-        if (!this._isPaginationInitialized && !this.props.datasetHierarchical && ((_b = this._gridOptions) === null || _b === void 0 ? void 0 : _b.enablePagination) && this._isLocalGrid) {
+        if (!this._isPaginationInitialized && !this.props.datasetHierarchical && this._options?.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 ((_c = this._gridOptions) === null || _c === void 0 ? void 0 : _c.enableEmptyDataWarningMessage) {
+        if (this._options?.enableEmptyDataWarningMessage) {
             const dataset = this.props.dataset || [];
             if (Array.isArray(dataset)) {
                 const finalTotalCount = dataset.length;
@@ -259,40 +298,56 @@ export class SlickgridReact extends React.Component {
             }
         }
         // add dark mode CSS class when enabled
-        if (this.gridOptions.darkMode) {
+        if (this.options.darkMode) {
             this.setDarkMode(true);
         }
         this.suggestDateParsingWhenHelpful();
     }
     initialization(eventHandler) {
-        var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
-        if (!this._columnDefinitions) {
-            throw new Error('Using `<SlickgridReact>` requires columnDefinitions, it seems that you might have forgot to provide the missing bindable model.');
+        if (!this._columns) {
+            throw new Error('Using `<SlickgridReact>` requires `columns` and it seems that you might have forgot to provide this missing bindable model.');
         }
-        this._gridOptions.translater = this.props.translaterService;
+        this._options.translater = this.props.translaterService;
         this._eventHandler = eventHandler;
         this._isAutosizeColsCalled = false;
         // when detecting a frozen grid, we'll automatically enable the mousewheel scroll handler so that we can scroll from both left/right frozen containers
-        if (this._gridOptions && ((this._gridOptions.frozenRow !== undefined && this._gridOptions.frozenRow >= 0) || this._gridOptions.frozenColumn !== undefined && this._gridOptions.frozenColumn >= 0) && this._gridOptions.enableMouseWheelScrollHandler === undefined) {
-            this._gridOptions.enableMouseWheelScrollHandler = true;
+        if (this._options &&
+            ((this._options.frozenRow !== undefined && this._options.frozenRow >= 0) ||
+                (this._options.frozenColumn !== undefined && this._options.frozenColumn >= 0)) &&
+            this._options.enableMouseWheelScrollHandler === undefined) {
+            this._options.enableMouseWheelScrollHandler = true;
         }
-        this._eventPubSubService.eventNamingStyle = (_b = (_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.eventNamingStyle) !== null && _b !== void 0 ? _b : EventNamingStyle.camelCase;
+        this._eventPubSubService.eventNamingStyle = this._options?.eventNamingStyle ?? EventNamingStyle.camelCase;
         this._eventPubSubService.publish(`onBeforeGridCreate`, true);
         // 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._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.backendServiceApi = (_d = this._gridOptions) === null || _d === void 0 ? void 0 : _d.backendServiceApi;
+        this._options = this.mergeGridOptions(this._options);
+        this._paginationOptions = this._options?.pagination;
+        this.backendServiceApi = this._options?.backendServiceApi;
         this._isLocalGrid = !this.backendServiceApi; // considered a local grid if it doesn't have a backend service set
+        // inject the I18Next instance when translation is enabled
+        if (this._options?.enableTranslate || this._options?.i18n) {
+            const importErrorMsg = '[Slickgrid-React] Enabling translation requires you to install I18Next in your App and use `I18nextProvider` to provide it. ' +
+                'Please make sure to first install it via "npm install i18next react-i18next" and then ' +
+                'use `<I18nextProvider value={i18n}><App/></I18nextProvider>` in your main index.tsx file. ' +
+                'Visit https://ghiscoding.gitbook.io/slickgrid-react/localization/localization for more info.';
+            this._i18next = this.context; // Access the context directly
+            if (this.props.translaterService && this._i18next) {
+                this.props.translaterService.i18nInstance = this._i18next;
+            }
+            else {
+                throw new Error(importErrorMsg);
+            }
+        }
         // unless specified, we'll create an internal postProcess callback (currently only available for GraphQL)
-        if (this.gridOptions.backendServiceApi && !((_f = this.gridOptions.backendServiceApi) === null || _f === void 0 ? void 0 : _f.disableInternalPostProcess)) {
-            this.createBackendApiInternalPostProcessCallback(this._gridOptions);
+        if (this.options.backendServiceApi && !this.options.backendServiceApi?.disableInternalPostProcess) {
+            this.createBackendApiInternalPostProcessCallback(this._options);
         }
         if (!this.props.customDataView) {
-            const dataviewInlineFilters = this._gridOptions.dataView && this._gridOptions.dataView.inlineFilters || false;
-            let dataViewOptions = { ...this._gridOptions.dataView, inlineFilters: dataviewInlineFilters };
-            if (this._gridOptions.draggableGrouping || this._gridOptions.enableGrouping) {
+            const dataviewInlineFilters = (this._options.dataView && this._options.dataView.inlineFilters) || false;
+            let dataViewOptions = { ...this._options.dataView, inlineFilters: dataviewInlineFilters };
+            if (this._options.draggableGrouping || this._options.enableGrouping) {
                 this.groupItemMetadataProvider = new SlickGroupItemMetadataProvider();
                 this.sharedService.groupItemMetadataProvider = this.groupItemMetadataProvider;
                 dataViewOptions = { ...dataViewOptions, groupItemMetadataProvider: this.groupItemMetadataProvider };
@@ -304,23 +359,23 @@ export class SlickgridReact extends React.Component {
         // RxJS Resource is in this lot because it has to be registered before anything else and doesn't require SlickGrid to be initialized
         this.preRegisterResources();
         // prepare and load all SlickGrid editors, if an async editor is found then we'll also execute it.
-        this._columnDefinitions = this.loadSlickGridEditors(this.props.columnDefinitions);
+        this._columns = this.loadSlickGridEditors(this.props.columns);
         // if the user wants to automatically add a Custom Editor Formatter, we need to call the auto add function again
-        if (this._gridOptions.autoAddCustomEditorFormatter) {
-            autoAddEditorFormatterToColumnsWithEditor(this._columnDefinitions, this._gridOptions.autoAddCustomEditorFormatter);
+        if (this._options.autoAddCustomEditorFormatter) {
+            autoAddEditorFormatterToColumnsWithEditor(this._columns, this._options.autoAddCustomEditorFormatter);
         }
         // save reference for all columns before they optionally become hidden/visible
-        this.sharedService.allColumns = this._columnDefinitions;
-        this.sharedService.visibleColumns = this._columnDefinitions;
+        this.sharedService.allColumns = this._columns;
+        this.sharedService.visibleColumns = this._columns;
         // 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);
+        this.extensionService.createExtensionsBeforeGridCreation(this._columns, this._options);
         // if user entered some Pinning/Frozen "presets", we need to apply them in the grid options
-        if ((_g = this.gridOptions.presets) === null || _g === void 0 ? void 0 : _g.pinning) {
-            this.gridOptions = { ...this.gridOptions, ...this.gridOptions.presets.pinning };
+        if (this.options.presets?.pinning) {
+            this.options = { ...this.options, ...this.options.presets.pinning };
         }
         // build SlickGrid Grid, also user might optionally pass a custom dataview (e.g. remote model)
-        this.grid = new SlickGrid(`#${this.props.gridId}`, this.props.customDataView || this.dataView, this._columnDefinitions, this._gridOptions, this._eventPubSubService);
+        this.grid = new SlickGrid(`#${this.props.gridId}`, this.props.customDataView || this.dataView, this._columns, this._options, this._eventPubSubService);
         this.sharedService.dataView = this.dataView;
         this.sharedService.slickGrid = this.grid;
         this.sharedService.gridContainerElement = this._elm;
@@ -328,11 +383,11 @@ export class SlickgridReact extends React.Component {
             this.grid.registerPlugin(this.groupItemMetadataProvider); // register GroupItemMetadataProvider when Grouping is enabled
         }
         this.extensionService.bindDifferentExtensions();
-        this.bindDifferentHooks(this.grid, this._gridOptions, this.dataView);
+        this.bindDifferentHooks(this.grid, this._options, 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 = (_j = (_h = this._gridOptions) === null || _h === void 0 ? void 0 : _h.frozenColumn) !== null && _j !== void 0 ? _j : -1;
-        if (frozenColumnIndex >= 0 && frozenColumnIndex <= this._columnDefinitions.length && this._columnDefinitions.length > 0) {
-            this.sharedService.frozenVisibleColumnId = (_l = (_k = this._columnDefinitions[frozenColumnIndex]) === null || _k === void 0 ? void 0 : _k.id) !== null && _l !== void 0 ? _l : '';
+        const frozenColumnIndex = this._options?.frozenColumn ?? -1;
+        if (frozenColumnIndex >= 0 && frozenColumnIndex <= this._columns.length && this._columns.length > 0) {
+            this.sharedService.frozenVisibleColumnId = this._columns[frozenColumnIndex]?.id ?? '';
         }
         // get any possible Services that user want to register
         this.registerResources();
@@ -345,25 +400,25 @@ export class SlickgridReact extends React.Component {
             this.resizerService.init(this.grid, gridContainerElm);
         }
         // user could show a custom footer with the data metrics (dataset length and last updated timestamp)
-        if (!this._gridOptions.enablePagination && this._gridOptions.showCustomFooter && this._gridOptions.customFooterOptions && gridContainerElm) {
-            this.slickFooter = new SlickFooterComponent(this.grid, this._gridOptions.customFooterOptions, this._eventPubSubService, this.props.translaterService);
+        if (!this._options.enablePagination && this._options.showCustomFooter && this._options.customFooterOptions && gridContainerElm) {
+            this.slickFooter = new SlickFooterComponent(this.grid, this._options.customFooterOptions, this._eventPubSubService, this.props.translaterService);
             this.slickFooter.renderFooter(gridContainerElm);
         }
         if (!this.props.customDataView && this.dataView) {
-            const initialDataset = ((_m = this._gridOptions) === null || _m === void 0 ? void 0 : _m.enableTreeData) ? this.sortTreeDataset(this.props.dataset) : this.props.dataset;
+            const initialDataset = this._options?.enableTreeData ? this.sortTreeDataset(this.props.dataset) : this.props.dataset;
             if (Array.isArray(initialDataset)) {
-                this.dataView.setItems(initialDataset, (_o = this._gridOptions.datasetIdPropertyName) !== null && _o !== void 0 ? _o : 'id');
+                this.dataView.setItems(initialDataset, this._options.datasetIdPropertyName ?? '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
-            if (((_p = this.grid) === null || _p === void 0 ? void 0 : _p.getSelectionModel()) && ((_q = this._gridOptions) === null || _q === void 0 ? void 0 : _q.dataView) && this._gridOptions.dataView.hasOwnProperty('syncGridSelection')) {
+            if (this.grid?.getSelectionModel() && this._options?.dataView && this._options.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;
-                if (this._gridOptions.backendServiceApi && this._gridOptions.dataView.hasOwnProperty('syncGridSelectionWithBackendService')) {
-                    preservedRowSelectionWithBackend = this._gridOptions.dataView.syncGridSelectionWithBackendService;
+                if (this._options.backendServiceApi && this._options.dataView.hasOwnProperty('syncGridSelectionWithBackendService')) {
+                    preservedRowSelectionWithBackend = this._options.dataView.syncGridSelectionWithBackendService;
                 }
-                const syncGridSelection = this._gridOptions.dataView.syncGridSelection;
+                const syncGridSelection = this._options.dataView.syncGridSelection;
                 if (typeof syncGridSelection === 'boolean') {
                     let preservedRowSelection = syncGridSelection;
                     if (!this._isLocalGrid) {
@@ -377,7 +432,7 @@ export class SlickgridReact extends React.Component {
                 }
             }
             if (this._dataset.length > 0) {
-                if (!this._isDatasetInitialized && (this._gridOptions.enableCheckboxSelector || this._gridOptions.enableRowSelection)) {
+                if (!this._isDatasetInitialized && (this._options.enableCheckboxSelector || this._options.enableRowSelection)) {
                     this.loadRowSelectionPresetWhenExists();
                 }
                 this.loadFilterPresetsWhenDatasetInitialized();
@@ -394,14 +449,14 @@ export class SlickgridReact extends React.Component {
         this._eventPubSubService.publish(`onGridCreated`, this.grid);
         // after the DataView is created & updated execute some processes & dispatch some events
         if (!this.props.customDataView) {
-            this.executeAfterDataviewCreated(this.grid, this._gridOptions);
+            this.executeAfterDataviewCreated(this.grid, this._options);
         }
         // bind resize ONLY after the dataView is ready
-        this.bindResizeHook(this.grid, this._gridOptions);
+        this.bindResizeHook(this.grid, this._options);
         // bind the Backend Service API callback functions only after the grid is initialized
         // because the preProcess() and onInit() might get triggered
-        if ((_r = this._gridOptions) === null || _r === void 0 ? void 0 : _r.backendServiceApi) {
-            this.bindBackendCallbackFunctions(this._gridOptions);
+        if (this._options?.backendServiceApi) {
+            this.bindBackendCallbackFunctions(this._options);
         }
         // create the React Grid Instance with reference to all Services
         const reactElementInstance = {
@@ -419,7 +474,6 @@ export class SlickgridReact extends React.Component {
             gridEventService: this.gridEventService,
             gridStateService: this.gridStateService,
             gridService: this.gridService,
-            groupingService: this.headerGroupingService,
             headerGroupingService: this.headerGroupingService,
             paginationService: this.paginationService,
             resizerService: this.resizerService,
@@ -427,40 +481,41 @@ export class SlickgridReact extends React.Component {
             treeDataService: this.treeDataService,
         };
         // addons (SlickGrid extra plugins/controls)
-        this.extensions = (_s = this.extensionService) === null || _s === void 0 ? void 0 : _s.extensionList;
+        this.extensions = this.extensionService?.extensionList;
         // all instances (SlickGrid, DataView & all Services)
         this.instances = reactElementInstance;
         this.setStateValue('instances', reactElementInstance);
         this._eventPubSubService.publish('onReactGridCreated', reactElementInstance);
         // subscribe to column definitions assignment changes
-        this.observeColumnDefinitions();
+        this.observeColumns();
     }
     componentWillUnmount(shouldEmptyDomElementContainer = false) {
-        var _a, _b, _c, _d, _f, _g, _h;
         this._eventPubSubService.publish('onBeforeGridDestroy', this.grid);
-        (_a = this._eventHandler) === null || _a === void 0 ? void 0 : _a.unsubscribeAll();
-        i18next.off('languageChanged');
+        this._eventHandler?.unsubscribeAll();
+        if (typeof this._i18next?.off === 'function') {
+            this._i18next.off('languageChanged');
+        }
         // we could optionally also empty the content of the grid container DOM element
         if (shouldEmptyDomElementContainer) {
             this.emptyGridContainerElm();
         }
-        this._collectionObservers.forEach(obs => obs === null || obs === void 0 ? void 0 : obs.disconnect());
+        this._collectionObservers.forEach((obs) => obs?.disconnect());
         this._eventPubSubService.publish('onAfterGridDestroyed', true);
         // dispose of all Services
         this.serviceList.forEach((service) => {
-            if (service === null || service === void 0 ? void 0 : service.dispose) {
+            if (service?.dispose) {
                 service.dispose();
             }
         });
         this.serviceList = [];
         // dispose backend service when defined and a dispose method exists
-        (_c = (_b = this.backendService) === null || _b === void 0 ? void 0 : _b.dispose) === null || _c === void 0 ? void 0 : _c.call(_b);
+        this.backendService?.dispose?.();
         // dispose all registered external resources
         this.disposeExternalResources();
         // dispose the Components
-        (_d = this.slickEmptyWarning) === null || _d === void 0 ? void 0 : _d.dispose();
-        (_f = this.slickFooter) === null || _f === void 0 ? void 0 : _f.dispose();
-        (_g = this.slickPagination) === null || _g === void 0 ? void 0 : _g.dispose();
+        this.slickEmptyWarning?.dispose();
+        this.slickFooter?.dispose();
+        this.slickPagination?.dispose();
         if (this.dataView) {
             if (this.dataView.setItems) {
                 this.dataView.setItems([]);
@@ -469,7 +524,7 @@ export class SlickgridReact extends React.Component {
                 this.dataView.destroy();
             }
         }
-        if ((_h = this.grid) === null || _h === void 0 ? void 0 : _h.destroy) {
+        if (this.grid?.destroy) {
             this.grid.destroy(shouldEmptyDomElementContainer);
         }
         // also dispose of all Subscriptions
@@ -480,18 +535,17 @@ export class SlickgridReact extends React.Component {
             }
             this.backendServiceApi = undefined;
         }
-        for (const prop of Object.keys(this.props.columnDefinitions)) {
-            this.props.columnDefinitions[prop] = null;
+        for (const prop of Object.keys(this.props.columns)) {
+            this.props.columns[prop] = null;
         }
         for (const prop of Object.keys(this.sharedService)) {
             this.sharedService[prop] = null;
         }
         this._dataset = null;
-        this._columnDefinitions = [];
+        this._columns = [];
     }
     emptyGridContainerElm() {
-        var _a;
-        const gridContainerId = ((_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.gridContainerId) || 'grid1';
+        const gridContainerId = this._options?.gridContainerId || 'grid1';
         const gridContainerElm = document.querySelector(`#${gridContainerId}`);
         emptyElement(gridContainerElm);
     }
@@ -502,7 +556,7 @@ export class SlickgridReact extends React.Component {
         if (Array.isArray(this._registeredResources)) {
             while (this._registeredResources.length > 0) {
                 const res = this._registeredResources.pop();
-                if (res === null || res === void 0 ? void 0 : res.dispose) {
+                if (res?.dispose) {
                     res.dispose();
                 }
             }
@@ -511,12 +565,12 @@ export class SlickgridReact extends React.Component {
     }
     componentDidUpdate(prevProps) {
         // get the grid options (order of precedence is Global Options first, then user option which could overwrite the Global options)
-        if (this.props.gridOptions !== prevProps.gridOptions) {
-            this._gridOptions = { ...GlobalGridOptions, ...this._gridOptions };
+        if (this.props.options !== prevProps.options) {
+            this._options = { ...GlobalGridOptions, ...this._options };
         }
-        if (this.props.columnDefinitions !== prevProps.columnDefinitions) {
-            this._columnDefinitions = this.props.columnDefinitions;
-            this.columnDefinitionsChanged(this.props.columnDefinitions);
+        if (this.props.columns !== prevProps.columns) {
+            this._columns = this.props.columns;
+            this.columnsChanged(this.props.columns);
         }
         if (this.props.dataset !== prevProps.dataset) {
             this.dataset = this.props.dataset || prevProps.dataset;
@@ -526,15 +580,15 @@ export class SlickgridReact extends React.Component {
         }
         this.suggestDateParsingWhenHelpful();
     }
-    columnDefinitionsChanged(columnDefinitions) {
-        if (columnDefinitions) {
-            this._columnDefinitions = columnDefinitions;
+    columnsChanged(columns) {
+        if (columns) {
+            this._columns = columns;
         }
         if (this._isGridInitialized) {
-            this.updateColumnDefinitionsList(this._columnDefinitions);
+            this.updateColumnsList(this._columns);
         }
-        if (this._columnDefinitions.length > 0) {
-            this.copyColumnWidthsReference(this._columnDefinitions);
+        if (this._columns.length > 0) {
+            this.copyColumnWidthsReference(this._columns);
         }
     }
     /**
@@ -543,16 +597,22 @@ export class SlickgridReact extends React.Component {
      * The behavior is to refresh the Dataset & Pagination without requiring the user to create his own PostProcess every time
      */
     createBackendApiInternalPostProcessCallback(gridOptions) {
-        const backendApi = gridOptions === null || gridOptions === void 0 ? void 0 : gridOptions.backendServiceApi;
-        if (backendApi === null || backendApi === void 0 ? void 0 : backendApi.service) {
+        const backendApi = gridOptions?.backendServiceApi;
+        if (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') {
                 backendApi.internalPostProcess = (processResult) => {
-                    const datasetName = (backendApi && backendApiService && typeof backendApiService.getDatasetName === 'function') ? backendApiService.getDatasetName() : '';
-                    if (processResult === null || processResult === void 0 ? void 0 : processResult.data[datasetName]) {
-                        const data = processResult.data[datasetName].hasOwnProperty('nodes') ? processResult.data[datasetName].nodes : processResult.data[datasetName];
-                        const totalCount = processResult.data[datasetName].hasOwnProperty('totalCount') ? processResult.data[datasetName].totalCount : processResult.data[datasetName].length;
+                    const datasetName = backendApi && backendApiService && typeof backendApiService.getDatasetName === 'function'
+                        ? backendApiService.getDatasetName()
+                        : '';
+                    if (processResult?.data[datasetName]) {
+                        const data = processResult.data[datasetName].hasOwnProperty('nodes')
+                            ? processResult.data[datasetName].nodes
+                            : processResult.data[datasetName];
+                        const totalCount = processResult.data[datasetName].hasOwnProperty('totalCount')
+                            ? processResult.data[datasetName].totalCount
+                            : processResult.data[datasetName].length;
                         this.refreshGridData(data, totalCount || 0);
                     }
                 };
@@ -560,26 +620,28 @@ export class SlickgridReact extends React.Component {
         }
     }
     bindDifferentHooks(grid, gridOptions, dataView) {
-        var _a;
         // translate some of them on first load, then on each language change
         if (gridOptions.enableTranslate) {
             this.extensionService.translateAllExtensions();
         }
         // on locale change, we have to manually translate the Headers, GridMenu
-        i18next.on('languageChanged', (lang) => {
-            // publish event of the same name that Slickgrid-Universal uses on a language change event
-            this._eventPubSubService.publish('onLanguageChange');
-            if (gridOptions.enableTranslate) {
-                this.extensionService.translateAllExtensions(lang);
-                if ((gridOptions.createPreHeaderPanel && gridOptions.createTopHeaderPanel) || (gridOptions.createPreHeaderPanel && !gridOptions.enableDraggableGrouping)) {
-                    this.headerGroupingService.translateHeaderGrouping();
+        if (typeof this._i18next?.on === 'function') {
+            this._i18next.on('languageChanged', (lang) => {
+                // publish event of the same name that Slickgrid-Universal uses on a language change event
+                this._eventPubSubService.publish('onLanguageChange');
+                if (gridOptions.enableTranslate) {
+                    this.extensionService.translateAllExtensions(lang);
+                    if ((gridOptions.createPreHeaderPanel && gridOptions.createTopHeaderPanel) ||
+                        (gridOptions.createPreHeaderPanel && !gridOptions.enableDraggableGrouping)) {
+                        this.headerGroupingService.translateHeaderGrouping();
+                    }
                 }
-            }
-        });
+            });
+        }
         // 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 ((_a = backendApi === null || backendApi === void 0 ? void 0 : backendApi.service) === null || _a === void 0 ? void 0 : _a.init) {
+            if (backendApi?.service?.init) {
                 backendApi.service.init(backendApi.options, gridOptions.pagination, this.grid, this.sharedService);
             }
         }
@@ -636,52 +698,42 @@ export class SlickgridReact extends React.Component {
                     this.handleOnItemCountChanged(dataView.getFilteredItemCount() || 0, dataView.getItemCount() || 0);
                 });
                 this._eventHandler.subscribe(dataView.onSetItemsCalled, (_e, args) => {
-                    var _a;
                     this.sharedService.isItemsDateParsed = false;
                     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)) {
-                        this.resizerService.resizeColumnsByCellContent(!((_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.resizeByContentOnlyOnFirstLoad));
+                    if (args.itemCount > 0 &&
+                        (this.options.autosizeColumnsByCellContentOnFirstLoad || this.options.enableAutoResizeColumnsByCellContent)) {
+                        this.resizerService.resizeColumnsByCellContent(!this._options?.resizeByContentOnlyOnFirstLoad);
                     }
                 });
-                if ((gridOptions === null || gridOptions === void 0 ? void 0 : gridOptions.enableFiltering) && !gridOptions.enableRowDetailView) {
+                if (gridOptions?.enableFiltering && !gridOptions.enableRowDetailView) {
                     this._eventHandler.subscribe(dataView.onRowsChanged, (_e, { calledOnRowCountChanged, rows }) => {
                         // 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 (!calledOnRowCountChanged && Array.isArray(rows)) {
                             const ranges = grid.getRenderedRange();
-                            rows
-                                .filter(row => row >= ranges.top && row <= ranges.bottom)
-                                .forEach((row) => grid.updateRow(row));
+                            rows.filter((row) => row >= ranges.top && row <= ranges.bottom).forEach((row) => grid.updateRow(row));
                             grid.render();
                         }
                     });
                 }
             }
         }
-        // @deprecated @user `dataview.globalItemMetadataProvider.getRowMetadata`
-        // did the user add a colspan callback? If so, hook it into the DataView getItemMetadata
-        if ((gridOptions === null || gridOptions === void 0 ? void 0 : gridOptions.colspanCallback) && (dataView === null || dataView === void 0 ? void 0 : dataView.getItem) && (dataView === null || dataView === void 0 ? void 0 : dataView.getItemMetadata)) {
-            dataView.getItemMetadata = (rowNumber) => {
-                let callbackResult = null;
-                if (gridOptions.colspanCallback) {
-                    callbackResult = gridOptions.colspanCallback(dataView.getItem(rowNumber));
-                }
-                return callbackResult;
-            };
-        }
     }
     bindBackendCallbackFunctions(gridOptions) {
-        var _a, _b, _c, _d, _f, _g;
         const backendApi = gridOptions.backendServiceApi;
-        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);
+        const backendApiService = backendApi?.service;
+        const serviceOptions = 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 === null || gridOptions === void 0 ? void 0 : gridOptions.presets) {
+            if (gridOptions?.presets) {
                 // Filters "presets"
                 if (backendApiService.updateFilters && Array.isArray(gridOptions.presets.filters) && gridOptions.presets.filters.length > 0) {
                     backendApiService.updateFilters(gridOptions.presets.filters, true);
@@ -689,7 +741,7 @@ export class SlickgridReact 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 = ((_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.multiColumnSort) ? gridOptions.presets.sorters : gridOptions.presets.sorters.slice(0, 1);
+                    const sortColumns = this._options?.multiColumnSort ? gridOptions.presets.sorters : gridOptions.presets.sorters.slice(0, 1);
                     backendApiService.updateSorters(undefined, sortColumns);
                 }
                 // Pagination "presets"
@@ -706,11 +758,10 @@ export class SlickgridReact 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 ? ((_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);
+                const query = typeof backendApiService.buildQuery === 'function' ? backendApiService.buildQuery() : '';
+                const process = isExecuteCommandOnInit ? (backendApi.process?.(query) ?? null) : (backendApi.onInit?.(query) ?? null);
                 // wrap this inside a microtask to be executed at the end of the task and avoid timing issue since the gridOptions needs to be ready before running this onInit
                 queueMicrotask(() => {
-                    var _a, _b, _c, _d;
                     const backendUtilityService = this.backendUtilityService;
                     // keep start time & end timestamps & return it after process execution
                     const startTime = new Date();
@@ -719,47 +770,45 @@ export class SlickgridReact extends React.Component {
                         backendApi.preProcess();
                     }
                     // the processes can be a Promise (like Http)
-                    const totalItems = (_c = (_b = (_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.pagination) === null || _b === void 0 ? void 0 : _b.totalItems) !== null && _c !== void 0 ? _c : 0;
+                    const totalItems = this._options?.pagination?.totalItems ?? 0;
                     if (process instanceof Promise) {
                         process
                             .then((processResult) => backendUtilityService.executeBackendProcessesCallback(startTime, processResult, backendApi, totalItems))
                             .catch((error) => backendUtilityService.onBackendError(error, backendApi));
                     }
-                    else if (process && ((_d = this.rxjs) === null || _d === void 0 ? void 0 : _d.isObservable(process))) {
+                    else if (process && this.rxjs?.isObservable(process)) {
                         this.subscriptions.push(process.subscribe((processResult) => backendUtilityService.executeBackendProcessesCallback(startTime, processResult, backendApi, totalItems), (error) => backendUtilityService.onBackendError(error, backendApi)));
                     }
                 });
             }
             // when user enables Infinite Scroll
-            if ((_g = backendApi.service.options) === null || _g === void 0 ? void 0 : _g.infiniteScroll) {
+            if (backendApi.service.options?.infiniteScroll) {
                 this.addBackendInfiniteScrollCallback();
             }
         }
     }
     addBackendInfiniteScrollCallback() {
-        var _a;
-        if (this.grid && this.gridOptions.backendServiceApi && this.hasBackendInfiniteScroll() && !((_a = this.gridOptions.backendServiceApi) === null || _a === void 0 ? void 0 : _a.onScrollEnd)) {
+        if (this.grid && this.options.backendServiceApi && this.hasBackendInfiniteScroll() && !this.options.backendServiceApi?.onScrollEnd) {
             const onScrollEnd = () => {
                 this.backendUtilityService.setInfiniteScrollBottomHit(true);
                 // even if we're not showing pagination, we still use pagination service behind the scene
                 // to keep track of the scroll position and fetch next set of data (aka next page)
                 // we also need a flag to know if we reached the of the dataset or not (no more pages)
-                this.paginationService.goToNextPage().then(hasNext => {
+                this.paginationService.goToNextPage().then((hasNext) => {
                     if (!hasNext) {
                         this.backendUtilityService.setInfiniteScrollBottomHit(false);
                     }
                 });
             };
-            this.gridOptions.backendServiceApi.onScrollEnd = onScrollEnd;
+            this.options.backendServiceApi.onScrollEnd = onScrollEnd;
             // subscribe to SlickGrid onScroll to determine when reaching the end of the scroll bottom position
             // run onScrollEnd() method when that happens
             this._eventHandler.subscribe(this.grid.onScroll, (_e, args) => {
-                var _a;
                 const viewportElm = args.grid.getViewportNode();
-                if (['mousewheel', 'scroll'].includes(args.triggeredBy || '')
-                    && ((_a = this.paginationService) === null || _a === void 0 ? void 0 : _a.totalItems)
-                    && args.scrollTop > 0
-                    && Math.ceil(viewportElm.offsetHeight + args.scrollTop) >= args.scrollHeight) {
+                if (['mousewheel', 'scroll'].includes(args.triggeredBy || '') &&
+                    this.paginationService?.totalItems &&
+                    args.scrollTop > 0 &&
+                    Math.ceil(viewportElm.offsetHeight + args.scrollTop) >= args.scrollHeight) {
                     if (!this._scrollEndCalled) {
                         onScrollEnd();
                         this._scrollEndCalled = true;
@@ -768,8 +817,8 @@ export class SlickgridReact extends React.Component {
             });
             // use postProcess to identify when scrollEnd process is finished to avoid calling the scrollEnd multiple times
             // we also need to keep a ref of the user's postProcess and call it after our own postProcess
-            const orgPostProcess = this.gridOptions.backendServiceApi.postProcess;
-            this.gridOptions.backendServiceApi.postProcess = (processResult) => {
+            const orgPostProcess = this.options.backendServiceApi.postProcess;
+            this.options.backendServiceApi.postProcess = (processResult) => {
                 this._scrollEndCalled = false;
                 if (orgPostProcess) {
                     orgPostProcess(processResult);
@@ -778,7 +827,8 @@ export class SlickgridReact extends React.Component {
         }
     }
     bindResizeHook(grid, options) {
-        if ((options.autoFitColumnsOnFirstLoad && options.autosizeColumnsByCellContentOnFirstLoad) || (options.enableAutoSizeColumns && options.enableAutoResizeColumnsByCellContent)) {
+        if ((options.autoFitColumnsOnFirstLoad && options.autosizeColumnsByCellContentOnFirstLoad) ||
+            (options.enableAutoSizeColumns && options.enableAutoResizeColumnsByCellContent)) {
             throw new Error(`[Slickgrid-React] You cannot enable both autosize/fit viewport & resize by content, you must choose which resize technique to use. You can enable these 2 options ("autoFitColumnsOnFirstLoad" and "enableAutoSizeColumns") OR these other 2 options ("autosizeColumnsByCellContentOnFirstLoad" and "enableAutoResizeColumnsByCellContent").`);
         }
         // auto-resize grid on browser resize
@@ -789,18 +839,21 @@ export class SlickgridReact extends React.Component {
             this.resizerService.resizeGrid();
         }
         // expand/autofit columns on first page load
-        if (grid && (options === null || options === void 0 ? void 0 : options.enableAutoResize) && options.autoFitColumnsOnFirstLoad && options.enableAutoSizeColumns && !this._isAutosizeColsCalled) {
+        if (grid &&
+            options?.enableAutoResize &&
+            options.autoFitColumnsOnFirstLoad &&
+            options.enableAutoSizeColumns &&
+            !this._isAutosizeColsCalled) {
             grid.autosizeColumns();
             this._isAutosizeColsCalled = true;
         }
     }
     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 = ((_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.multiColumnSort) ? gridOptions.presets.sorters : gridOptions.presets.sorters.slice(0, 1);
+                const sortColumns = this._options?.multiColumnSort ? gridOptions.presets.sorters : gridOptions.presets.sorters.slice(0, 1);
                 this.sortService.loadGridSorters(sortColumns);
             }
         }
@@ -810,9 +863,11 @@ export class SlickgridReact extends React.Component {
      * Also if we use Row Selection or the Checkbox Selector with a Backend Service (Odata, GraphQL), we need to reset any selection
      */
     paginationChanged(pagination) {
-        var _a, _b, _c;
-        const isSyncGridSelectionEnabled = (_b = (_a = this.gridStateService) === null || _a === void 0 ? void 0 : _a.needToPreserveRowSelection()) !== null && _b !== void 0 ? _b : false;
-        if (this.grid && !isSyncGridSelectionEnabled && ((_c = this.gridOptions) === null || _c === void 0 ? void 0 : _c.backendServiceApi) && (this.gridOptions.enableRowSelection || this.gridOptions.enableCheckboxSelector)) {
+        const isSyncGridSelectionEnabled = this.gridStateService?.needToPreserveRowSelection() ?? false;
+        if (this.grid &&
+            !isSyncGridSelectionEnabled &&
+            this.options?.backendServiceApi &&
+            (this.options.enableRowSelection || this.options.enableCheckboxSelector)) {
             this.grid.setSelectedRows([]);
         }
         const { pageNumber, pageSize } = pagination;
@@ -822,21 +877,20 @@ export class SlickgridReact extends React.Component {
             }
         }
         this._eventPubSubService.publish('onGridStateChanged', {
-            change: { newValues: { pageNumber, pageSize }, type: GridStateType.pagination },
-            gridState: this.gridStateService.getCurrentGridState()
+            change: { newValues: { pageNumber, pageSize }, type: 'pagination' },
+            gridState: this.gridStateService.getCurrentGridState(),
         });
     }
     paginationOptionsChanged(newPaginationOptions) {
-        var _a;
         if (newPaginationOptions && this._paginationOptions) {
             this._paginationOptions = { ...this._paginationOptions, ...newPaginationOptions };
         }
         else {
             this._paginationOptions = newPaginationOptions;
         }
-        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);
+        if (this._options) {
+            this._options.pagination = this._paginationOptions;
+            this.paginationService.updateTotalItems(newPaginationOptions?.totalItems ?? 0, true);
         }
     }
     /**
@@ -844,40 +898,40 @@ export class SlickgridReact extends React.Component {
      * @param dataset
      */
     refreshGridData(dataset, totalCount) {
-        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 (this.grid && this._gridOptions) {
-            if (((_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.enablePagination) && this._isLocalGrid) {
+        if (this.grid && this._options) {
+            if (this._options?.enablePagination && this._isLocalGrid) {
                 this.showPagination = true;
                 this.loadLocalGridPagination(dataset);
             }
-            if (((_b = this._gridOptions) === null || _b === void 0 ? void 0 : _b.enableEmptyDataWarningMessage) && Array.isArray(dataset)) {
+            if (this._options?.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) {
+            if (Array.isArray(dataset) && this.grid && this.dataView?.setItems) {
+                this.dataView.setItems(dataset, this._options.datasetIdPropertyName ?? 'id');
+                if (!this._options.backendServiceApi && !this._options.enableTreeData) {
                     this.dataView.reSort();
                 }
                 if (dataset.length > 0) {
                     if (!this._isDatasetInitialized) {
                         this.loadFilterPresetsWhenDatasetInitialized();
-                        if (this._gridOptions.enableCheckboxSelector) {
+                        if (this._options.enableCheckboxSelector) {
                             this.loadRowSelectionPresetWhenExists();
                         }
                     }
                     this._isDatasetInitialized = true;
                 }
                 // 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)));
-                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);
+                this.showPagination = !!(this._options &&
+                    (this._options.enablePagination || (this._options.backendServiceApi && this._options.enablePagination === undefined)));
+                if (this._paginationOptions && this._options?.pagination && this._options?.backendServiceApi) {
+                    const paginationOptions = this.setPaginationOptionsWhenPresetDefined(this._options, 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);
+                    const totalRecords = totalCount !== undefined ? totalCount : this._options?.pagination?.totalItems;
                     if (totalRecords !== undefined && totalRecords !== this.totalItems) {
                         this.totalItems = +totalRecords;
                     }
@@ -891,8 +945,8 @@ export class SlickgridReact extends React.Component {
                     }
                 }
                 // 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;
+                if (this.grid && this._options.enableAutoResize) {
+                    const delay = this._options.autoResize && this._options.autoResize.delay;
                     this.resizerService.resizeGrid(delay || 10);
                 }
             }
@@ -905,7 +959,7 @@ export class SlickgridReact extends React.Component {
     showHeaderRow(showing = true) {
         this.grid.setHeaderRowVisibility(showing);
         if (showing === true && this._isGridInitialized) {
-            this.grid.setColumns(this.props.columnDefinitions);
+            this.grid.setColumns(this.props.columns);
         }
         return showing;
     }
@@ -914,8 +968,7 @@ export class SlickgridReact extends React.Component {
      * if there are then load them in the paginationOptions object
      */
     setPaginationOptionsWhenPresetDefined(gridOptions, paginationOptions) {
-        var _a;
-        if (((_a = gridOptions.presets) === null || _a === void 0 ? void 0 : _a.pagination) && gridOptions.pagination) {
+        if (gridOptions.presets?.pagination && gridOptions.pagination) {
             if (this.hasBackendInfiniteScroll()) {
                 console.warn('[Slickgrid-React] `presets.pagination` is not supported with Infinite Scroll, reverting to first page.');
             }
@@ -927,12 +980,11 @@ export class SlickgridReact extends React.Component {
         return paginationOptions;
     }
     setDarkMode(dark = false) {
-        var _a, _b;
         if (dark) {
-            (_a = this.sharedService.gridContainerElement) === null || _a === void 0 ? void 0 : _a.classList.add('slick-dark-mode');
+            this.sharedService.gridContainerElement?.classList.add('slick-dark-mode');
         }
         else {
-            (_b = this.sharedService.gridContainerElement) === null || _b === void 0 ? void 0 : _b.classList.remove('slick-dark-mode');
+            this.sharedService.gridContainerElement?.classList.remove('slick-dark-mode');
         }
     }
     /**
@@ -940,25 +992,24 @@ export class SlickgridReact extends React.Component {
      * We will re-render the grid so that the new header and data shows up correctly.
      * If using i18n, we also need to trigger a re-translate of the column headers
      */
-    updateColumnDefinitionsList(newColumnDefinitions) {
-        var _a, _b, _c;
-        if (this.grid && this._gridOptions && Array.isArray(newColumnDefinitions)) {
+    updateColumnsList(newColumns) {
+        if (this.grid && this._options && Array.isArray(newColumns)) {
             // map the Editor model to editorClass and load editor collectionAsync
-            newColumnDefinitions = this.loadSlickGridEditors(newColumnDefinitions);
+            newColumns = this.loadSlickGridEditors(newColumns);
             // if the user wants to automatically add a Custom Editor Formatter, we need to call the auto add function again
-            if (this._gridOptions.autoAddCustomEditorFormatter) {
-                autoAddEditorFormatterToColumnsWithEditor(newColumnDefinitions, this._gridOptions.autoAddCustomEditorFormatter);
+            if (this._options.autoAddCustomEditorFormatter) {
+                autoAddEditorFormatterToColumnsWithEditor(newColumns, this._options.autoAddCustomEditorFormatter);
             }
-            if (this._gridOptions.enableTranslate) {
-                this.extensionService.translateColumnHeaders(undefined, newColumnDefinitions);
+            if (this._options.enableTranslate) {
+                this.extensionService.translateColumnHeaders(undefined, newColumns);
             }
             else {
-                this.extensionService.renderColumnHeaders(newColumnDefinitions, true);
+                this.extensionService.renderColumnHeaders(newColumns, true);
             }
-            if ((_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.enableAutoSizeColumns) {
+            if (this._options?.enableAutoSizeColumns) {
                 this.grid.autosizeColumns();
             }
-            else if (((_b = this._gridOptions) === null || _b === void 0 ? void 0 : _b.enableAutoResizeColumnsByCellContent) && ((_c = this.resizerService) === null || _c === void 0 ? void 0 : _c.resizeColumnsByCellContent)) {
+            else if (this._options?.enableAutoResizeColumnsByCellContent && this.resizerService?.resizeColumnsByCellContent) {
                 this.resizerService.resizeColumnsByCellContent();
             }
         }
@@ -970,53 +1021,50 @@ export class SlickgridReact extends React.Component {
      * assignment changes are not triggering on the column definitions, for that
      * we can use our internal array observer for any changes done via (push, pop, shift, ...)
      */
-    observeColumnDefinitions() {
-        this._collectionObservers.push(collectionObserver(this._columnDefinitions, this.columnDefinitionsChanged.bind(this)));
+    observeColumns() {
+        this._collectionObservers.push(collectionObserver(this._columns, this.columnsChanged.bind(this)));
     }
     /**
      * Loop through all column definitions and copy the original optional `width` properties optionally provided by the user.
      * We will use this when doing a resize by cell content, if user provided a `width` it won't override it.
      */
-    copyColumnWidthsReference(columnDefinitions) {
-        columnDefinitions.forEach(col => col.originalWidth = col.width);
+    copyColumnWidthsReference(columns) {
+        columns.forEach((col) => (col.originalWidth = col.width));
     }
     displayEmptyDataWarning(showWarning = true) {
-        var _a;
-        (_a = this.slickEmptyWarning) === null || _a === void 0 ? void 0 : _a.showEmptyDataMessage(showWarning);
+        this.slickEmptyWarning?.showEmptyDataMessage(showWarning);
     }
     /** When data changes in the DataView, we'll refresh the metrics and/or display a warning if the dataset is empty */
     handleOnItemCountChanged(currentPageRowItemCount, totalItemCount) {
-        var _a;
         this._currentDatasetLength = totalItemCount;
         this.metrics = {
             startTime: new Date(),
             endTime: new Date(),
             itemCount: currentPageRowItemCount,
-            totalItemCount
+            totalItemCount,
         };
         // if custom footer is enabled, then we'll update its metrics
         if (this.slickFooter) {
             this.slickFooter.metrics = this.metrics;
         }
         // when using local (in-memory) dataset, we'll display a warning message when filtered data is empty
-        if (this._isLocalGrid && ((_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.enableEmptyDataWarningMessage)) {
+        if (this._isLocalGrid && this._options?.enableEmptyDataWarningMessage) {
             this.displayEmptyDataWarning(currentPageRowItemCount === 0);
         }
         // when autoResize.autoHeight is enabled, we'll want to call a resize
-        if (this._gridOptions.enableAutoResize && this.resizerService.isAutoHeightEnabled && currentPageRowItemCount > 0) {
+        if (this._options.enableAutoResize && this.resizerService.isAutoHeightEnabled && currentPageRowItemCount > 0) {
             this.resizerService.resizeGrid();
         }
     }
     /** Initialize the Pagination Service once */
     initializePaginationService(paginationOptions) {
-        if (this.grid && this.gridOptions) {
+        if (this.grid && this.options) {
             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('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);
+            this.subscriptions.push(this._eventPubSubService.subscribe('onPaginationChanged', (paginationChanges) => this.paginationChanged(paginationChanges)), this._eventPubSubService.subscribe('onPaginationOptionsChanged', (paginationChanges) => this.paginationOptionsChanged(paginationChanges)), this._eventPubSubService.subscribe('onPaginationVisibilityChanged', (visibility) => {
+                this.showPagination = visibility?.visible ?? false;
+                if (this.options?.backendServiceApi) {
+                    this.backendUtilityService?.refreshBackendDataset(this.options);
                 }
                 this.renderPagination(this.showPagination);
             }));
@@ -1032,12 +1080,11 @@ export class SlickgridReact extends React.Component {
      * @param {Boolean} shouldDisposePaginationService - when disposing the Pagination, do we also want to dispose of the Pagination Service? (defaults to True)
      */
     async renderPagination(showPagination = true) {
-        var _a, _b;
-        if (this.grid && ((_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.enablePagination) && !this._isPaginationInitialized && showPagination) {
-            if (this.gridOptions.customPaginationComponent) {
+        if (this.grid && this._options?.enablePagination && !this._isPaginationInitialized && showPagination) {
+            if (this.options.customPaginationComponent) {
                 const paginationContainer = document.createElement('section');
                 this._elm.appendChild(paginationContainer);
-                const { component } = await loadReactComponentDynamically(this.gridOptions.customPaginationComponent, paginationContainer);
+                const { component } = await loadReactComponentDynamically(this.options.customPaginationComponent, paginationContainer);
                 this.slickPagination = component;
             }
             else {
@@ -1050,14 +1097,13 @@ export class SlickgridReact extends React.Component {
             }
         }
         else if (!showPagination) {
-            (_b = this.slickPagination) === null || _b === void 0 ? void 0 : _b.dispose();
+            this.slickPagination?.dispose();
             this._isPaginationInitialized = false;
         }
     }
     /** Load the Editor Collection asynchronously and replace the "collection" property when Promise resolves */
     loadEditorCollectionAsync(column) {
-        var _a;
-        if (column === null || column === void 0 ? void 0 : column.editor) {
+        if (column?.editor) {
             const collectionAsync = column.editor.collectionAsync;
             column.editor.disabled = true; // disable the Editor DOM element, we'll re-enable it after receiving the collection with "updateEditorCollection()"
             if (collectionAsync instanceof Promise) {
@@ -1069,20 +1115,20 @@ export class SlickgridReact extends React.Component {
                     }
                     else if (response instanceof Response && typeof response.json === 'function') {
                         if (response.bodyUsed) {
-                            console.warn(`[SlickGrid-React] The response body passed to collectionAsync was already read.`
-                                + `Either pass the dataset from the Response or clone the response first using response.clone()`);
+                            console.warn(`[SlickGrid-React] The response body passed to collectionAsync was already read.` +
+                                `Either pass the dataset from the Response or clone the response first using response.clone()`);
                         }
                         else {
                             // from Fetch
-                            response.json().then(data => this.updateEditorCollection(column, data));
+                            response.json().then((data) => this.updateEditorCollection(column, data));
                         }
                     }
-                    else if (response === null || response === void 0 ? void 0 : response.content) {
+                    else if (response?.content) {
                         this.updateEditorCollection(column, response.content); // from http-client
                     }
                 });
             }
-            else if ((_a = this.rxjs) === null || _a === void 0 ? void 0 : _a.isObservable(collectionAsync)) {
+            else if (this.rxjs?.isObservable(collectionAsync)) {
                 // wrap this inside a microtask at the end of the task to avoid timing issue since updateEditorCollection requires to call SlickGrid getColumns() method after columns are available
                 queueMicrotask(() => {
                     this.subscriptions.push(collectionAsync.subscribe((resolvedCollection) => this.updateEditorCollection(column, resolvedCollection)));
@@ -1091,41 +1137,38 @@ export class SlickgridReact extends React.Component {
         }
     }
     insertDynamicPresetColumns(columnId, gridPresetColumns) {
-        if (this._columnDefinitions) {
-            const columnPosition = this._columnDefinitions.findIndex(c => c.id === columnId);
+        if (this._columns) {
+            const columnPosition = this._columns.findIndex((c) => c.id === columnId);
             if (columnPosition >= 0) {
-                const dynColumn = this._columnDefinitions[columnPosition];
-                if ((dynColumn === null || dynColumn === void 0 ? void 0 : dynColumn.id) === columnId && !gridPresetColumns.some(c => c.id === columnId)) {
-                    columnPosition > 0
-                        ? gridPresetColumns.splice(columnPosition, 0, dynColumn)
-                        : gridPresetColumns.unshift(dynColumn);
+                const dynColumn = this._columns[columnPosition];
+                if (dynColumn?.id === columnId && !gridPresetColumns.some((c) => c.id === columnId)) {
+                    columnPosition > 0 ? gridPresetColumns.splice(columnPosition, 0, dynColumn) : gridPresetColumns.unshift(dynColumn);
                 }
             }
         }
     }
     /** Load any possible Columns Grid Presets */
     loadColumnPresetsWhenDatasetInitialized() {
-        var _a, _b, _c, _d, _f, _g, _h, _j, _k;
         // if user entered some Columns "presets", we need to reflect them all in the grid
-        if (this.grid && this.gridOptions.presets && Array.isArray(this.gridOptions.presets.columns) && this.gridOptions.presets.columns.length > 0) {
-            const gridPresetColumns = this.gridStateService.getAssociatedGridColumns(this.grid, this.gridOptions.presets.columns);
-            if (gridPresetColumns && Array.isArray(gridPresetColumns) && gridPresetColumns.length > 0 && Array.isArray(this._columnDefinitions)) {
+        if (this.grid && this.options.presets && Array.isArray(this.options.presets.columns) && this.options.presets.columns.length > 0) {
+            const gridPresetColumns = this.gridStateService.getAssociatedGridColumns(this.grid, this.options.presets.columns);
+            if (gridPresetColumns && Array.isArray(gridPresetColumns) && gridPresetColumns.length > 0 && Array.isArray(this._columns)) {
                 // make sure that the dynamic columns are included in presets (1.Row Move, 2. Row Selection, 3. Row Detail)
-                if (this.gridOptions.enableRowMoveManager) {
-                    const rmmColId = (_c = (_b = (_a = this.gridOptions) === null || _a === void 0 ? void 0 : _a.rowMoveManager) === null || _b === void 0 ? void 0 : _b.columnId) !== null && _c !== void 0 ? _c : '_move';
+                if (this.options.enableRowMoveManager) {
+                    const rmmColId = this.options?.rowMoveManager?.columnId ?? '_move';
                     this.insertDynamicPresetColumns(rmmColId, gridPresetColumns);
                 }
-                if (this.gridOptions.enableCheckboxSelector) {
-                    const chkColId = (_g = (_f = (_d = this.gridOptions) === null || _d === void 0 ? void 0 : _d.checkboxSelector) === null || _f === void 0 ? void 0 : _f.columnId) !== null && _g !== void 0 ? _g : '_checkbox_selector';
+                if (this.options.enableCheckboxSelector) {
+                    const chkColId = this.options?.checkboxSelector?.columnId ?? '_checkbox_selector';
                     this.insertDynamicPresetColumns(chkColId, gridPresetColumns);
                 }
-                if (this.gridOptions.enableRowDetailView) {
-                    const rdvColId = (_k = (_j = (_h = this.gridOptions) === null || _h === void 0 ? void 0 : _h.rowDetailView) === null || _j === void 0 ? void 0 : _j.columnId) !== null && _k !== void 0 ? _k : '_detail_selector';
+                if (this.options.enableRowDetailView) {
+                    const rdvColId = this.options?.rowDetailView?.columnId ?? '_detail_selector';
                     this.insertDynamicPresetColumns(rdvColId, gridPresetColumns);
                 }
                 // keep copy the original optional `width` properties optionally provided by the user.
                 // We will use this when doing a resize by cell content, if user provided a `width` it won't override it.
-                gridPresetColumns.forEach(col => col.originalWidth = col.width);
+                gridPresetColumns.forEach((col) => (col.originalWidth = col.width));
                 // finally set the new presets columns (including checkbox selector if need be)
                 this.grid.setColumns(gridPresetColumns);
                 this.sharedService.visibleColumns = gridPresetColumns;
@@ -1134,11 +1177,11 @@ export class SlickgridReact extends React.Component {
     }
     /** Load any possible Filters Grid Presets */
     loadFilterPresetsWhenDatasetInitialized() {
-        var _a, _b, _c;
-        if (this._gridOptions && !this.props.customDataView) {
+        if (this._options && !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) || 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) || []);
+            if (this._options.presets &&
+                (Array.isArray(this._options.presets.filters) || Array.isArray(this._options.presets?.treeData?.toggledItems))) {
+                this.filterService.populateColumnFilterSearchTermPresets(this._options.presets?.filters || []);
             }
         }
     }
@@ -1148,27 +1191,28 @@ export class SlickgridReact extends React.Component {
      * 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
      */
     loadLocalGridPagination(dataset) {
-        var _a;
-        if (this._gridOptions && this._paginationOptions) {
+        if (this._options && this._paginationOptions) {
             this.totalItems = Array.isArray(dataset) ? dataset.length : 0;
-            if (this._paginationOptions && ((_a = this.dataView) === null || _a === void 0 ? void 0 : _a.getPagingInfo)) {
+            if (this._paginationOptions && this.dataView?.getPagingInfo) {
                 const slickPagingInfo = this.dataView.getPagingInfo();
-                if ((slickPagingInfo === null || slickPagingInfo === void 0 ? void 0 : slickPagingInfo.hasOwnProperty('totalRows')) && this._paginationOptions.totalItems !== slickPagingInfo.totalRows) {
+                if (slickPagingInfo?.hasOwnProperty('totalRows') && this._paginationOptions.totalItems !== slickPagingInfo.totalRows) {
                     this.totalItems = slickPagingInfo.totalRows || 0;
                 }
             }
             this._paginationOptions.totalItems = this.totalItems;
-            const paginationOptions = this.setPaginationOptionsWhenPresetDefined(this._gridOptions, this._paginationOptions);
+            const paginationOptions = this.setPaginationOptionsWhenPresetDefined(this._options, this._paginationOptions);
             this.initializePaginationService(paginationOptions);
         }
     }
     /** Load any Row Selections into the DataView that were presets by the user */
     loadRowSelectionPresetWhenExists() {
-        var _a, _b;
         // if user entered some Row Selections "presets"
-        const presets = (_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.presets;
-        const enableRowSelection = this._gridOptions && (this._gridOptions.enableCheckboxSelector || this._gridOptions.enableRowSelection);
-        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))) {
+        const presets = this._options?.presets;
+        const enableRowSelection = this._options && (this._options.enableCheckboxSelector || this._options.enableRowSelection);
+        if (enableRowSelection &&
+            this.grid?.getSelectionModel() &&
+            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
@@ -1184,14 +1228,13 @@ export class SlickgridReact extends React.Component {
                 this.dataView.setSelectedIds(dataContextIds || [], {
                     isRowBeingAdded: true,
                     shouldTriggerEvent: false, // do not trigger when presetting the grid
-                    applyRowSelectionToGrid: true
+                    applyRowSelectionToGrid: true,
                 });
             }
         }
     }
     hasBackendInfiniteScroll(gridOptions) {
-        var _a, _b;
-        return !!((_b = (_a = (gridOptions || this.gridOptions).backendServiceApi) === null || _a === void 0 ? void 0 : _a.service.options) === null || _b === void 0 ? void 0 : _b.infiniteScroll);
+        return !!(gridOptions || this.options).backendServiceApi?.service.options?.infiniteScroll;
     }
     mergeGridOptions(gridOptions) {
         // use extend to deep merge & copy to avoid immutable properties being changed in GlobalGridOptions after a route change
@@ -1205,7 +1248,10 @@ export class SlickgridReact extends React.Component {
         // using copy extend to do a deep clone has an unwanted side on objects and pageSizes but ES6 spread has other worst side effects
         // so we will just overwrite the pageSizes when needed, this is the only one causing issues so far.
         // On a deep extend, Object and Array are extended, but object wrappers on primitive types such as String, Boolean, and Number are not.
-        if ((options === null || options === void 0 ? void 0 : options.pagination) && (gridOptions.enablePagination || gridOptions.backendServiceApi) && gridOptions.pagination && Array.isArray(gridOptions.pagination.pageSizes)) {
+        if (options?.pagination &&
+            (gridOptions.enablePagination || gridOptions.backendServiceApi) &&
+            gridOptions.pagination &&
+            Array.isArray(gridOptions.pagination.pageSizes)) {
             options.pagination.pageSizes = gridOptions.pagination.pageSizes;
         }
         // when we use Pagination on Local Grid, it doesn't seem to work without enableFiltering
@@ -1223,7 +1269,7 @@ export class SlickgridReact extends React.Component {
         if (disposePreviousResources) {
             this.disposeExternalResources();
         }
-        resources.forEach(res => this._registeredResources.push(res));
+        resources.forEach((res) => this._registeredResources.push(res));
         this.initializeExternalResources(resources);
     }
     resetExternalResources() {
@@ -1231,12 +1277,12 @@ export class SlickgridReact extends React.Component {
     }
     /** Pre-Register any Resource that don't require SlickGrid to be instantiated (for example RxJS Resource & RowDetail) */
     preRegisterResources() {
-        this._registeredResources = this.gridOptions.externalResources || [];
+        this._registeredResources = this.options.externalResources || [];
         // 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)) {
             for (const resource of this._registeredResources) {
-                if ((resource === null || resource === void 0 ? void 0 : resource.className) === 'RxJsResource') {
+                if (resource?.className === 'RxJsResource') {
                     this.registerRxJsResource(resource);
                 }
             }
@@ -1259,15 +1305,16 @@ export class SlickgridReact 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.createTopHeaderPanel) || (this.gridOptions.createPreHeaderPanel && !this.gridOptions.enableDraggableGrouping)) {
+        if ((this.options.createPreHeaderPanel && this.options.createTopHeaderPanel) ||
+            (this.options.createPreHeaderPanel && !this.options.enableDraggableGrouping)) {
             this._registeredResources.push(this.headerGroupingService);
         }
         // when using Tree Data View, register its Service
-        if (this.gridOptions.enableTreeData) {
+        if (this.options.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.options.enableTranslate) {
             this.extensionService.translateColumnHeaders();
         }
         // also initialize (render) the empty warning component
@@ -1302,10 +1349,10 @@ export class SlickgridReact extends React.Component {
             sortedDatasetResult = this.treeDataService.sortHierarchicalDataset(this.datasetHierarchical);
             flatDatasetOutput = sortedDatasetResult.flat;
         }
-        else if (this._gridOptions && Array.isArray(flatDatasetInput) && flatDatasetInput.length > 0) {
+        else if (this._options && Array.isArray(flatDatasetInput) && flatDatasetInput.length > 0) {
             // we need to first convert the flat dataset to a hierarchical dataset and then sort it
             // we'll also add props, by mutation, required by the TreeDataService on the flat array like `__hasChildren`, `parentId` and anything else to work properly
-            sortedDatasetResult = this.treeDataService.convertFlatParentChildToTreeDatasetAndSort(flatDatasetInput, this._columnDefinitions, this._gridOptions);
+            sortedDatasetResult = this.treeDataService.convertFlatParentChildToTreeDatasetAndSort(flatDatasetInput, this._columns, this._options);
             this.sharedService.hierarchicalDataset = sortedDatasetResult.hierarchical;
             flatDatasetOutput = sortedDatasetResult.flat;
         }
@@ -1316,24 +1363,25 @@ export class SlickgridReact extends React.Component {
         return flatDatasetOutput;
     }
     /** Prepare and load all SlickGrid editors, if an async editor is found then we'll also execute it. */
-    loadSlickGridEditors(columnDefinitions) {
-        if (columnDefinitions.some(col => `${col === null || col === void 0 ? void 0 : col.id}`.includes('.'))) {
+    loadSlickGridEditors(columns) {
+        if (columns.some((col) => `${col?.id}`.includes('.'))) {
             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;
+        return columns.map((column) => {
             if (column) {
                 // on every Editor which have a "collection" or a "collectionAsync"
-                if ((_a = column.editor) === null || _a === void 0 ? void 0 : _a.collectionAsync) {
+                if (column.editor?.collectionAsync) {
                     this.loadEditorCollectionAsync(column);
                 }
-                return { ...column, editorClass: (_b = column.editor) === null || _b === void 0 ? void 0 : _b.model };
+                return { ...column, editorClass: column.editor?.model };
             }
         });
     }
     suggestDateParsingWhenHelpful() {
-        var _a;
-        if (((_a = this.dataView) === null || _a === void 0 ? void 0 : _a.getItemCount()) > WARN_NO_PREPARSE_DATE_SIZE && !this.gridOptions.silenceWarnings && !this.gridOptions.preParseDateColumns && this.grid.getColumns().some(c => isColumnDateType(c.type))) {
+        if (this.dataView?.getItemCount() > WARN_NO_PREPARSE_DATE_SIZE &&
+            !this.options.silenceWarnings &&
+            !this.options.preParseDateColumns &&
+            this.grid.getColumns().some((c) => isColumnDateType(c.type))) {
             console.warn('[Slickgrid-React] For getting better perf, we suggest you enable the `preParseDateColumns` grid option, ' +
                 'for more info visit => https://ghiscoding.gitbook.io/slickgrid-react/column-functionalities/sorting#pre-parse-date-columns-for-better-perf');
         }
@@ -1348,7 +1396,7 @@ export class SlickgridReact extends React.Component {
             column.editor.disabled = false;
             // get current Editor, remove it from the DOM then re-enable it and re-render it with the new collection.
             const currentEditor = this.grid.getCellEditor();
-            if ((currentEditor === null || currentEditor === void 0 ? void 0 : currentEditor.disable) && (currentEditor === null || currentEditor === void 0 ? void 0 : currentEditor.renderDomElement)) {
+            if (currentEditor?.disable && currentEditor?.renderDomElement) {
                 currentEditor.destroy();
                 currentEditor.disable(false);
                 currentEditor.renderDomElement(newCollection);
@@ -1356,17 +1404,9 @@ export class SlickgridReact extends React.Component {
         }
     }
     render() {
-        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" }),
-            this.props.footer && React.createElement("div", { className: "footer" }, this.props.footer)));
+        return (_jsxs("div", { id: `slickGridContainer-${this.props.gridId}`, className: "grid-pane", ref: (elm) => {
+                this._elm = elm;
+            }, children: [this.props.header && _jsx("div", { className: "header", children: this.props.header }), _jsx("div", { id: `${this.props.gridId}`, className: "slickgrid-container" }), this.props.footer && _jsx("div", { className: "footer", children: this.props.footer })] }));
     }
 }
-SlickgridReact.defaultProps = {
-    containerService: GlobalContainerService,
-    translaterService: new TranslaterService(),
-    dataset: [],
-    gridId: '',
-    columnDefinitions: [],
-};
 //# sourceMappingURL=slickgrid-react.js.map