angular-slickgrid 8.14.1 → 9.0.0

package/{fesm2022 → dist/fesm2022}/angular-slickgrid.mjs

@@ -1,4 +1,4 @@
-import { unsubscribeAll, createDomElement, SlickRowSelectionModel, SlickEventData, castObservableToPromise, addToArrayWhenNotExists, FileType, DelimiterType, EventNamingStyle, OperatorType, Filters, SlickEventHandler, SlickgridConfig as SlickgridConfig$1, BackendUtilityService, GridEventService, SharedService, CollectionService, ExtensionUtility, FilterFactory, FilterService, ResizerService, SortService, TreeDataService, PaginationService, ExtensionService, GridStateService, GridService, HeaderGroupingService, emptyElement, SlickGroupItemMetadataProvider, SlickDataView, autoAddEditorFormatterToColumnsWithEditor, SlickGrid, GridStateType, ExtensionName, isColumnDateType } from '@slickgrid-universal/common';
+import { unsubscribeAll, createDomElement, SlickRowSelectionModel, SlickEventData, castObservableToPromise, addToArrayWhenNotExists, DelimiterType, EventNamingStyle, Filters, SlickEventHandler, SlickgridConfig as SlickgridConfig$1, BackendUtilityService, GridEventService, SharedService, CollectionService, ExtensionUtility, FilterFactory, FilterService, ResizerService, SortService, TreeDataService, PaginationService, ExtensionService, GridStateService, GridService, HeaderGroupingService, emptyElement, SlickGroupItemMetadataProvider, SlickDataView, autoAddEditorFormatterToColumnsWithEditor, SlickGrid, ExtensionName, isColumnDateType } from '@slickgrid-universal/common';
 export * from '@slickgrid-universal/common';
 import * as i0 from '@angular/core';
 import { Injectable, Optional, EventEmitter, ContentChild, Input, Output, Inject, Component, NgModule } from '@angular/core';
@@ -68,9 +68,7 @@ class AngularUtilService {
             // when user provides the DOM element target, we will read the new Component html and use it to replace the target html
             if (targetElement && domElem) {
                 targetElement.innerHTML =
-                    typeof createCompOptions?.sanitizer === 'function'
-                        ? createCompOptions.sanitizer(domElem.innerHTML || '')
-                        : domElem.innerHTML;
+                    typeof createCompOptions?.sanitizer === 'function' ? createCompOptions.sanitizer(domElem.innerHTML || '') : domElem.innerHTML;
             }
         }
         return { componentRef, domElement: domElem };
@@ -95,10 +93,10 @@ class AngularUtilService {
         }
         return componentOutput;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AngularUtilService, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AngularUtilService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AngularUtilService, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AngularUtilService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AngularUtilService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AngularUtilService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
 
@@ -120,10 +118,10 @@ class ContainerService {
             this.dependencies.push({ key, instance });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContainerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContainerService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ContainerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ContainerService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContainerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ContainerService, decorators: [{
             type: Injectable
         }] });
 
@@ -159,10 +157,10 @@ class TranslaterService {
     translate(translationKey) {
         return this.translateService?.instant?.(translationKey || ' ');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TranslaterService, deps: [{ token: i1.TranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TranslaterService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TranslaterService, deps: [{ token: i1.TranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TranslaterService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TranslaterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TranslaterService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.TranslateService, decorators: [{
                     type: Optional
@@ -387,7 +385,7 @@ class SlickRowDetailView extends SlickRowDetailView$1 {
                 addon: this,
                 grid: this._grid,
                 dataView: this.dataView,
-                parent: this.rowDetailViewOptions?.parent,
+                parentRef: this.rowDetailViewOptions?.parentRef,
             }, {
                 sanitizer: this._grid.sanitizeHtmlString,
             });
@@ -431,7 +429,7 @@ class SlickRowDetailView extends SlickRowDetailView$1 {
      * @param item
      */
     notifyTemplate(item) {
-        this.onAsyncResponse.notify({ item, itemDetail: item }, new SlickEventData(), this);
+        this.onAsyncResponse.notify({ item }, new SlickEventData(), this);
     }
     /**
      * On Processing, we will notify the plugin with the new item detail once backend server call completes
@@ -575,7 +573,7 @@ const GlobalGridOptions = {
     defaultBackendServiceFilterTypingDebounce: 500,
     defaultColumnSortFieldId: 'id',
     defaultFilterPlaceholder: '🔎︎',
-    defaultFilterRangeOperator: OperatorType.rangeInclusive,
+    defaultFilterRangeOperator: 'RangeInclusive',
     editable: false,
     enableAutoResize: true,
     enableAutoSizeColumns: true,
@@ -610,7 +608,7 @@ const GlobalGridOptions = {
         addGroupIndentation: true,
         exportWithFormatter: false,
         filename: 'export',
-        format: FileType.xlsx,
+        format: 'xlsx',
         groupingColumnHeaderTitle: 'Group By',
         groupCollapsedSymbol: '⮞',
         groupExpandedSymbol: '⮟',
@@ -621,7 +619,7 @@ const GlobalGridOptions = {
         delimiter: DelimiterType.comma,
         exportWithFormatter: false,
         filename: 'export',
-        format: FileType.csv,
+        format: 'csv',
         groupingColumnHeaderTitle: 'Group By',
         groupingAggregatorRowText: '',
         sanitizeDataExport: false,
@@ -727,6 +725,7 @@ const GlobalGridOptions = {
         maxItemToInspectSingleColumnWidthByContent: 5000,
         widthToRemoveFromExceededWidthReadjustment: 50,
     },
+    rowTopOffsetRenderType: 'transform',
     treeDataOptions: {
         exportIndentMarginLeft: 5,
         exportIndentationLeadingChar: '͏͏͏͏͏͏͏͏͏·',
@@ -805,6 +804,7 @@ class Constants {
         TEXT_LAST_UPDATE: 'Last Update',
         TEXT_LESS_THAN: 'Less than',
         TEXT_LESS_THAN_OR_EQUAL_TO: 'Less than or equal to',
+        TEXT_LOADING: 'Loading...',
         TEXT_NO_ELEMENTS_FOUND: 'Aucun élément trouvé',
         TEXT_NOT_CONTAINS: 'Not contains',
         TEXT_NOT_EQUAL_TO: 'Not equal to',
@@ -917,35 +917,35 @@ class AngularSlickgridComponent {
     treeDataService;
     customDataView;
     gridId = '';
-    gridOptions = {};
+    options = {};
     get paginationOptions() {
         return this._paginationOptions;
     }
     set paginationOptions(newPaginationOptions) {
         if (newPaginationOptions && this._paginationOptions) {
-            this._paginationOptions = { ...this.gridOptions.pagination, ...this._paginationOptions, ...newPaginationOptions };
+            this._paginationOptions = { ...this.options.pagination, ...this._paginationOptions, ...newPaginationOptions };
         }
         else {
             this._paginationOptions = newPaginationOptions;
         }
-        this.gridOptions.pagination = this._paginationOptions ?? this.gridOptions.pagination;
-        this.paginationService.updateTotalItems(this.gridOptions.pagination?.totalItems ?? 0, true);
+        this.options.pagination = this._paginationOptions ?? this.options.pagination;
+        this.paginationService.updateTotalItems(this.options.pagination?.totalItems ?? 0, true);
     }
-    get columnDefinitions() {
+    get columns() {
         return this._columnDefinitions;
     }
-    set columnDefinitions(columnDefinitions) {
-        this._columnDefinitions = columnDefinitions;
+    set columns(columns) {
+        this._columnDefinitions = columns;
         if (this._isGridInitialized) {
-            this.updateColumnDefinitionsList(columnDefinitions);
+            this.updateColumnDefinitionsList(columns);
         }
-        if (columnDefinitions.length > 0) {
-            this.copyColumnWidthsReference(columnDefinitions);
+        if (columns.length > 0) {
+            this.copyColumnWidthsReference(columns);
         }
     }
     // make the columnDefinitions a 2-way binding so that plugin adding cols
     // are synched on user's side as well (RowMove, RowDetail, RowSelections)
-    columnDefinitionsChange = new EventEmitter(true);
+    columnsChange = new EventEmitter(true);
     get dataset() {
         return (this.customDataView ? this.slickGrid?.getData?.() : this.dataView?.getItems()) || [];
     }
@@ -955,7 +955,7 @@ class AngularSlickgridComponent {
         let data = newDataset;
         // when Tree Data is enabled and we don't yet have the hierarchical dataset filled, we can force a convert+sort of the array
         if (this.slickGrid &&
-            this.gridOptions?.enableTreeData &&
+            this.options?.enableTreeData &&
             Array.isArray(newDataset) &&
             (newDataset.length > 0 || newDataset.length !== prevDatasetLn || !isDatasetEqual)) {
             this._isDatasetHierarchicalInitialized = false;
@@ -966,7 +966,7 @@ class AngularSlickgridComponent {
         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.slickGrid && this.gridOptions?.autoFitColumnsOnFirstLoad && prevDatasetLn === 0 && !this._isAutosizeColsCalled) {
+        if (this.slickGrid && this.options?.autoFitColumnsOnFirstLoad && prevDatasetLn === 0 && !this._isAutosizeColsCalled) {
             this.slickGrid.autosizeColumns();
             this._isAutosizeColsCalled = true;
         }
@@ -979,7 +979,7 @@ class AngularSlickgridComponent {
         const isDatasetEqual = dequal(newHierarchicalDataset, this.sharedService?.hierarchicalDataset ?? []);
         const prevFlatDatasetLn = this._currentDatasetLength;
         this.sharedService.hierarchicalDataset = newHierarchicalDataset;
-        if (newHierarchicalDataset && this.columnDefinitions && this.filterService?.clearFilters) {
+        if (newHierarchicalDataset && this.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
@@ -1000,13 +1000,13 @@ class AngularSlickgridComponent {
         return this.elm;
     }
     get backendService() {
-        return this.gridOptions?.backendServiceApi?.service;
+        return this.options?.backendServiceApi?.service;
     }
     get eventHandler() {
         return this._eventHandler;
     }
     get gridContainerElement() {
-        return document.querySelector(`#${this.gridOptions.gridContainerId || ''}`);
+        return document.querySelector(`#${this.options.gridContainerId || ''}`);
     }
     /** GETTER to know if dataset was initialized or not */
     get isDatasetInitialized() {
@@ -1095,18 +1095,18 @@ class AngularSlickgridComponent {
         this.containerService.registerInstance('TreeDataService', this.treeDataService);
     }
     ngAfterViewInit() {
-        if (!this.columnDefinitions) {
-            throw new Error('Using `<angular-slickgrid>` requires [columnDefinitions], it seems that you might have forgot to provide the missing bindable input.');
+        if (!this.columns) {
+            throw new Error('Using `<angular-slickgrid>` requires [columns], it seems that you might have forgot to provide the missing bindable input.');
         }
         this.initialization(this._eventHandler);
         this._isGridInitialized = true;
         // recheck the empty warning message after grid is shown so that it works in every use case
-        if (this.gridOptions?.enableEmptyDataWarningMessage && Array.isArray(this.dataset)) {
+        if (this.options?.enableEmptyDataWarningMessage && Array.isArray(this.dataset)) {
             const finalTotalCount = this.dataset.length;
             this.displayEmptyDataWarning(finalTotalCount < 1);
         }
         // add dark mode CSS class when enabled
-        if (this.gridOptions.darkMode) {
+        if (this.options.darkMode) {
             this.setDarkMode(true);
         }
         this.suggestDateParsingWhenHelpful();
@@ -1149,9 +1149,9 @@ class AngularSlickgridComponent {
             }
             this.backendServiceApi = undefined;
         }
-        if (this.columnDefinitions) {
-            for (const prop of Object.keys(this.columnDefinitions)) {
-                this.columnDefinitions[prop] = null;
+        if (this.columns) {
+            for (const prop of Object.keys(this.columns)) {
+                this.columns[prop] = null;
             }
         }
         for (const prop of Object.keys(this.sharedService)) {
@@ -1181,7 +1181,7 @@ class AngularSlickgridComponent {
         this._registeredResources = [];
     }
     emptyGridContainerElm() {
-        const gridContainerId = this.gridOptions?.gridContainerId || 'grid1';
+        const gridContainerId = this.options?.gridContainerId || 'grid1';
         const gridContainerElm = document.querySelector(`#${gridContainerId}`);
         emptyElement(gridContainerElm);
     }
@@ -1213,33 +1213,33 @@ class AngularSlickgridComponent {
         }
     }
     initialization(eventHandler) {
-        this.gridOptions.translater = this.translaterService;
+        this.options.translater = this.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 = this.gridOptions?.eventNamingStyle ?? 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.gridOptions = this.mergeGridOptions(this.gridOptions);
-        this._paginationOptions = this.gridOptions?.pagination;
-        this.locales = this.gridOptions?.locales ?? Constants.locales;
-        this.backendServiceApi = this.gridOptions?.backendServiceApi;
+        this.options = this.mergeGridOptions(this.options);
+        this._paginationOptions = this.options?.pagination;
+        this.locales = this.options?.locales ?? Constants.locales;
+        this.backendServiceApi = this.options?.backendServiceApi;
         this._isLocalGrid = !this.backendServiceApi; // considered a local grid if it doesn't have a backend service set
         // unless specified, we'll create an internal postProcess callback (currently only available for GraphQL)
-        if (this.gridOptions.backendServiceApi && !this.gridOptions.backendServiceApi?.disableInternalPostProcess) {
-            this.createBackendApiInternalPostProcessCallback(this.gridOptions);
+        if (this.options.backendServiceApi && !this.options.backendServiceApi?.disableInternalPostProcess) {
+            this.createBackendApiInternalPostProcessCallback(this.options);
         }
         if (!this.customDataView) {
-            const dataviewInlineFilters = this.gridOptions?.dataView?.inlineFilters ?? false;
-            let dataViewOptions = { ...this.gridOptions.dataView, inlineFilters: dataviewInlineFilters };
-            if (this.gridOptions.draggableGrouping || this.gridOptions.enableGrouping) {
+            const dataviewInlineFilters = 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 };
@@ -1253,8 +1253,8 @@ class AngularSlickgridComponent {
         // prepare and load all SlickGrid editors, if an async editor is found then we'll also execute it.
         this._columnDefinitions = this.loadSlickGridEditors(this._columnDefinitions || []);
         // 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._columnDefinitions, this.options.autoAddCustomEditorFormatter);
         }
         // save reference for all columns before they optionally become hidden/visible
         this.sharedService.allColumns = this._columnDefinitions;
@@ -1263,17 +1263,17 @@ class AngularSlickgridComponent {
         // we'll subscribe to the event and push back the change to the user so they always use full column defs array including extra cols
         this.subscriptions.push(this._eventPubSubService.subscribe('onPluginColumnsChanged', (data) => {
             this._columnDefinitions = data.columns;
-            this.columnDefinitionsChange.emit(this._columnDefinitions);
+            this.columnsChange.emit(this._columnDefinitions);
         }));
         // after subscribing to potential columns changed, we are ready to create these optional extensions
         // when we did find some to create (RowMove, RowDetail, RowSelections), it will automatically modify column definitions (by previous subscribe)
-        this.extensionService.createExtensionsBeforeGridCreation(this._columnDefinitions, this.gridOptions);
+        this.extensionService.createExtensionsBeforeGridCreation(this._columnDefinitions, this.options);
         // if user entered some Pinning/Frozen "presets", we need to apply them in the grid options
-        if (this.gridOptions.presets?.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.slickGrid = new SlickGrid(`#${this.gridId}`, this.customDataView || this.dataView, this._columnDefinitions, this.gridOptions, this._eventPubSubService);
+        this.slickGrid = new SlickGrid(`#${this.gridId}`, this.customDataView || this.dataView, this._columnDefinitions, this.options, this._eventPubSubService);
         this.sharedService.dataView = this.dataView;
         this.sharedService.slickGrid = this.slickGrid;
         this.sharedService.gridContainerElement = this.elm.nativeElement;
@@ -1281,9 +1281,9 @@ class AngularSlickgridComponent {
             this.slickGrid.registerPlugin(this.groupItemMetadataProvider); // register GroupItemMetadataProvider when Grouping is enabled
         }
         this.extensionService.bindDifferentExtensions();
-        this.bindDifferentHooks(this.slickGrid, this.gridOptions, this.dataView);
+        this.bindDifferentHooks(this.slickGrid, 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 = this.gridOptions.frozenColumn !== undefined ? this.gridOptions.frozenColumn : -1;
+        const frozenColumnIndex = this.options.frozenColumn !== undefined ? this.options.frozenColumn : -1;
         if (frozenColumnIndex >= 0 && frozenColumnIndex <= this._columnDefinitions.length) {
             this.sharedService.frozenVisibleColumnId = this._columnDefinitions[frozenColumnIndex].id || '';
         }
@@ -1297,29 +1297,26 @@ class AngularSlickgridComponent {
             this.resizerService.init(this.slickGrid, this.gridContainerElement);
         }
         // 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 &&
-            this.gridContainerElement) {
-            this.slickFooter = new SlickFooterComponent(this.slickGrid, this.gridOptions.customFooterOptions, this._eventPubSubService, this.translaterService);
+        if (!this.options.enablePagination && this.options.showCustomFooter && this.options.customFooterOptions && this.gridContainerElement) {
+            this.slickFooter = new SlickFooterComponent(this.slickGrid, this.options.customFooterOptions, this._eventPubSubService, this.translaterService);
             this.slickFooter.renderFooter(this.gridContainerElement);
         }
         if (!this.customDataView && this.dataView) {
             // load the data in the DataView (unless it's a hierarchical dataset, if so it will be loaded after the initial tree sort)
-            const initialDataset = this.gridOptions?.enableTreeData ? this.sortTreeDataset(this._dataset) : this._dataset;
+            const initialDataset = this.options?.enableTreeData ? this.sortTreeDataset(this._dataset) : this._dataset;
             this.dataView.beginUpdate();
-            this.dataView.setItems(initialDataset || [], this.gridOptions.datasetIdPropertyName ?? 'id');
+            this.dataView.setItems(initialDataset || [], this.options.datasetIdPropertyName ?? 'id');
             this.dataView.endUpdate();
             // 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 (this.slickGrid?.getSelectionModel() && this.gridOptions?.dataView && 'syncGridSelection' in this.gridOptions.dataView) {
+            if (this.slickGrid?.getSelectionModel() && this.options?.dataView && 'syncGridSelection' in this.options.dataView) {
                 // 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 && 'syncGridSelectionWithBackendService' in this.gridOptions.dataView) {
-                    preservedRowSelectionWithBackend = this.gridOptions.dataView.syncGridSelectionWithBackendService;
+                if (this.options.backendServiceApi && 'syncGridSelectionWithBackendService' in this.options.dataView) {
+                    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) {
@@ -1334,7 +1331,7 @@ class AngularSlickgridComponent {
             }
             const datasetLn = this.dataView.getLength() || this._dataset?.length || 0;
             if (datasetLn > 0) {
-                if (!this._isDatasetInitialized && (this.gridOptions.enableCheckboxSelector || this.gridOptions.enableRowSelection)) {
+                if (!this._isDatasetInitialized && (this.options.enableCheckboxSelector || this.options.enableRowSelection)) {
                     this.loadRowSelectionPresetWhenExists();
                 }
                 this.loadFilterPresetsWhenDatasetInitialized();
@@ -1351,19 +1348,19 @@ class AngularSlickgridComponent {
         this._eventPubSubService.publish('onGridCreated', this.slickGrid);
         // after the DataView is created & updated execute some processes
         if (!this.customDataView) {
-            this.executeAfterDataviewCreated(this.slickGrid, this.gridOptions);
+            this.executeAfterDataviewCreated(this.slickGrid, this.options);
         }
         // bind resize ONLY after the dataView is ready
-        this.bindResizeHook(this.slickGrid, this.gridOptions);
+        this.bindResizeHook(this.slickGrid, this.options);
         // bind the Backend Service API callback functions only after the grid is initialized
         // because the preProcess() and onInit() might get triggered
-        if (this.gridOptions?.backendServiceApi) {
-            this.bindBackendCallbackFunctions(this.gridOptions);
+        if (this.options?.backendServiceApi) {
+            this.bindBackendCallbackFunctions(this.options);
         }
         // 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.gridOptions?.enablePagination && this._isLocalGrid) {
+        if (this.options?.enablePagination && this._isLocalGrid) {
             this.showPagination = true;
             this.loadLocalGridPagination(this.dataset);
         }
@@ -1381,7 +1378,6 @@ class AngularSlickgridComponent {
             gridEventService: this.gridEventService,
             gridStateService: this.gridStateService,
             gridService: this.gridService,
-            groupingService: this.headerGroupingService,
             headerGroupingService: this.headerGroupingService,
             extensionService: this.extensionService,
             paginationComponent: this.slickPagination,
@@ -1401,8 +1397,8 @@ class AngularSlickgridComponent {
         const isSyncGridSelectionEnabled = this.gridStateService?.needToPreserveRowSelection() ?? false;
         if (this.slickGrid &&
             !isSyncGridSelectionEnabled &&
-            this.gridOptions?.backendServiceApi &&
-            (this.gridOptions.enableRowSelection || this.gridOptions.enableCheckboxSelector)) {
+            this.options?.backendServiceApi &&
+            (this.options.enableRowSelection || this.options.enableCheckboxSelector)) {
             this.slickGrid.setSelectedRows([]);
         }
         const { pageNumber, pageSize } = pagination;
@@ -1412,7 +1408,7 @@ class AngularSlickgridComponent {
             }
         }
         this._eventPubSubService.publish('onGridStateChanged', {
-            change: { newValues: { pageNumber, pageSize }, type: GridStateType.pagination },
+            change: { newValues: { pageNumber, pageSize }, type: 'pagination' },
             gridState: this.gridStateService.getCurrentGridState(),
         });
         this.cd.markForCheck();
@@ -1422,19 +1418,19 @@ class AngularSlickgridComponent {
      * @param dataset
      */
     refreshGridData(dataset, totalCount) {
-        if (this.gridOptions?.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.slickGrid && this.dataView?.setItems) {
-            this.dataView.setItems(dataset, this.gridOptions.datasetIdPropertyName ?? 'id');
-            if (!this.gridOptions.backendServiceApi && !this.gridOptions.enableTreeData) {
+            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();
                     }
                 }
@@ -1444,14 +1440,13 @@ class AngularSlickgridComponent {
                 this.slickGrid.invalidate();
             }
             // display the Pagination component only after calling this refresh data first, we call it here so that if we preset pagination page number it will be shown correctly
-            this.showPagination = !!(this.gridOptions &&
-                (this.gridOptions.enablePagination ||
-                    (this.gridOptions.backendServiceApi && this.gridOptions.enablePagination === undefined)));
-            if (this._paginationOptions && this.gridOptions?.pagination && this.gridOptions?.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 : this.gridOptions?.pagination?.totalItems;
+                const totalRecords = totalCount !== undefined ? totalCount : this.options?.pagination?.totalItems;
                 if (totalRecords !== undefined && totalRecords !== this.totalItems) {
                     this.totalItems = +totalRecords;
                 }
@@ -1465,8 +1460,8 @@ class AngularSlickgridComponent {
                 }
             }
             // resize the grid inside a slight timeout, in case other DOM element changed prior to the resize (like a filter/pagination changed)
-            if (this.slickGrid && this.gridOptions.enableAutoResize) {
-                const delay = this.gridOptions.autoResize && this.gridOptions.autoResize.delay;
+            if (this.slickGrid && this.options.enableAutoResize) {
+                const delay = this.options.autoResize && this.options.autoResize.delay;
                 this.resizerService.resizeGrid(delay || 10);
             }
         }
@@ -1507,19 +1502,19 @@ class AngularSlickgridComponent {
      * 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) {
+    updateColumnDefinitionsList(newColumns) {
         // map the Editor model to editorClass and load editor collectionAsync
-        newColumnDefinitions = this.loadSlickGridEditors(newColumnDefinitions);
-        if (this.gridOptions.enableTranslate) {
-            this.extensionService.translateColumnHeaders(undefined, newColumnDefinitions);
+        newColumns = this.loadSlickGridEditors(newColumns);
+        if (this.options.enableTranslate) {
+            this.extensionService.translateColumnHeaders(undefined, newColumns);
         }
         else {
-            this.extensionService.renderColumnHeaders(newColumnDefinitions, true);
+            this.extensionService.renderColumnHeaders(newColumns, true);
         }
-        if (this.gridOptions?.enableAutoSizeColumns) {
+        if (this.options?.enableAutoSizeColumns) {
             this.slickGrid.autosizeColumns();
         }
-        else if (this.gridOptions?.enableAutoResizeColumnsByCellContent && this.resizerService?.resizeColumnsByCellContent) {
+        else if (this.options?.enableAutoResizeColumnsByCellContent && this.resizerService?.resizeColumnsByCellContent) {
             this.resizerService.resizeColumnsByCellContent();
         }
     }
@@ -1530,7 +1525,7 @@ class AngularSlickgridComponent {
     showHeaderRow(showing = true) {
         this.slickGrid.setHeaderRowVisibility(showing);
         if (showing === true && this._isGridInitialized) {
-            this.slickGrid.setColumns(this.columnDefinitions);
+            this.slickGrid.setColumns(this.columns);
         }
         return showing;
     }
@@ -1548,8 +1543,8 @@ class AngularSlickgridComponent {
      * 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));
     }
     bindDifferentHooks(grid, gridOptions, dataView) {
         // on locale change, we have to manually translate the Headers, GridMenu
@@ -1632,8 +1627,8 @@ class AngularSlickgridComponent {
                 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(!this.gridOptions?.resizeByContentOnlyOnFirstLoad);
+                    (this.options.autosizeColumnsByCellContentOnFirstLoad || this.options.enableAutoResizeColumnsByCellContent)) {
+                    this.resizerService.resizeColumnsByCellContent(!this.options?.resizeByContentOnlyOnFirstLoad);
                 }
             });
             if (gridOptions?.enableFiltering && !gridOptions.enableRowDetailView) {
@@ -1649,17 +1644,6 @@ class AngularSlickgridComponent {
                 });
             }
         }
-        // @deprecated @user `dataview.globalItemMetadataProvider.getRowMetadata`
-        // did the user add a colspan callback? If so, hook it into the DataView getItemMetadata
-        if (gridOptions?.colspanCallback && dataView && dataView.getItem && dataView.getItemMetadata) {
-            dataView.getItemMetadata = (rowNumber) => {
-                let callbackResult = null;
-                if (gridOptions.colspanCallback) {
-                    callbackResult = gridOptions.colspanCallback(dataView.getItem(rowNumber));
-                }
-                return callbackResult;
-            };
-        }
     }
     bindBackendCallbackFunctions(gridOptions) {
         const backendApi = gridOptions.backendServiceApi;
@@ -1672,19 +1656,13 @@ class AngularSlickgridComponent {
             // if user entered some any "presets", we need to reflect them all in the grid
             if (gridOptions?.presets) {
                 // Filters "presets"
-                if (backendApiService.updateFilters &&
-                    Array.isArray(gridOptions.presets.filters) &&
-                    gridOptions.presets.filters.length > 0) {
+                if (backendApiService.updateFilters && Array.isArray(gridOptions.presets.filters) && gridOptions.presets.filters.length > 0) {
                     backendApiService.updateFilters(gridOptions.presets.filters, true);
                 }
                 // Sorters "presets"
-                if (backendApiService.updateSorters &&
-                    Array.isArray(gridOptions.presets.sorters) &&
-                    gridOptions.presets.sorters.length > 0) {
+                if (backendApiService.updateSorters && Array.isArray(gridOptions.presets.sorters) && gridOptions.presets.sorters.length > 0) {
                     // when using multi-column sort, we can have multiple but on single sort then only grab the first sort provided
-                    const sortColumns = this.gridOptions.multiColumnSort
-                        ? gridOptions.presets.sorters
-                        : gridOptions.presets.sorters.slice(0, 1);
+                    const sortColumns = this.options.multiColumnSort ? gridOptions.presets.sorters : gridOptions.presets.sorters.slice(0, 1);
                     backendApiService.updateSorters(undefined, sortColumns);
                 }
                 // Pagination "presets"
@@ -1714,7 +1692,7 @@ class AngularSlickgridComponent {
                         backendApi.preProcess();
                     }
                     // the processes can be a Promise (like Http)
-                    const totalItems = this.gridOptions?.pagination?.totalItems ?? 0;
+                    const totalItems = this.options?.pagination?.totalItems ?? 0;
                     if (process instanceof Promise) {
                         process
                             .then((processResult) => backendUtilityService.executeBackendProcessesCallback(startTime, processResult, backendApi, totalItems))
@@ -1736,9 +1714,9 @@ class AngularSlickgridComponent {
     }
     addBackendInfiniteScrollCallback() {
         if (this.slickGrid &&
-            this.gridOptions.backendServiceApi &&
+            this.options.backendServiceApi &&
             this.hasBackendInfiniteScroll() &&
-            !this.gridOptions.backendServiceApi?.onScrollEnd) {
+            !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
@@ -1750,7 +1728,7 @@ class AngularSlickgridComponent {
                     }
                 });
             };
-            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.slickGrid.onScroll, (_e, args) => {
@@ -1767,8 +1745,8 @@ class AngularSlickgridComponent {
             });
             // 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);
@@ -1802,9 +1780,7 @@ class AngularSlickgridComponent {
         // if user entered some Sort "presets", we need to reflect them all in the DOM
         if (gridOptions.enableSorting && Array.isArray(gridOptions.presets?.sorters)) {
             // when using multi-column sort, we can have multiple but on single sort then only grab the first sort provided
-            const sortColumns = this.gridOptions.multiColumnSort
-                ? gridOptions.presets.sorters
-                : gridOptions.presets.sorters.slice(0, 1);
+            const sortColumns = this.options.multiColumnSort ? gridOptions.presets.sorters : gridOptions.presets.sorters.slice(0, 1);
             this.sortService.loadGridSorters(sortColumns);
         }
     }
@@ -1822,18 +1798,18 @@ class AngularSlickgridComponent {
             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 && this.gridOptions?.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();
         }
     }
     initializePaginationService(paginationOptions) {
-        if (this.gridOptions) {
+        if (this.options) {
             this.paginationData = {
-                gridOptions: this.gridOptions,
+                gridOptions: this.options,
                 paginationService: this.paginationService,
             };
             this.paginationService.totalItems = this.totalItems;
@@ -1842,8 +1818,8 @@ class AngularSlickgridComponent {
                 this.paginationChanged(paginationChanges);
             }), this._eventPubSubService.subscribe('onPaginationVisibilityChanged', (visibility) => {
                 this.showPagination = visibility?.visible ?? false;
-                if (this.gridOptions?.backendServiceApi) {
-                    this.backendUtilityService?.refreshBackendDataset(this.gridOptions);
+                if (this.options?.backendServiceApi) {
+                    this.backendUtilityService?.refreshBackendDataset(this.options);
                 }
                 this.renderPagination(this.showPagination);
             }));
@@ -1886,20 +1862,20 @@ class AngularSlickgridComponent {
     /** Load any possible Columns Grid Presets */
     loadColumnPresetsWhenDatasetInitialized() {
         // if user entered some Columns "presets", we need to reflect them all in the grid
-        if (Array.isArray(this.gridOptions.presets?.columns) && this.gridOptions.presets.columns.length > 0) {
-            const gridPresetColumns = this.gridStateService.getAssociatedGridColumns(this.slickGrid, this.gridOptions.presets.columns);
+        if (Array.isArray(this.options.presets?.columns) && this.options.presets.columns.length > 0) {
+            const gridPresetColumns = this.gridStateService.getAssociatedGridColumns(this.slickGrid, this.options.presets.columns);
             if (Array.isArray(gridPresetColumns) && gridPresetColumns.length > 0 && Array.isArray(this._columnDefinitions)) {
                 // 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 = this.gridOptions?.rowMoveManager?.columnId ?? '_move';
+                if (this.options.enableRowMoveManager) {
+                    const rmmColId = this.options?.rowMoveManager?.columnId ?? '_move';
                     this.insertDynamicPresetColumns(rmmColId, gridPresetColumns);
                 }
-                if (this.gridOptions.enableCheckboxSelector) {
-                    const chkColId = this.gridOptions?.checkboxSelector?.columnId ?? '_checkbox_selector';
+                if (this.options.enableCheckboxSelector) {
+                    const chkColId = this.options?.checkboxSelector?.columnId ?? '_checkbox_selector';
                     this.insertDynamicPresetColumns(chkColId, gridPresetColumns);
                 }
-                if (this.gridOptions.enableRowDetailView) {
-                    const rdvColId = this.gridOptions?.rowDetailView?.columnId ?? '_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.
@@ -1913,12 +1889,12 @@ class AngularSlickgridComponent {
     }
     /** Load any possible Filters Grid Presets */
     loadFilterPresetsWhenDatasetInitialized() {
-        if (this.gridOptions && !this.customDataView) {
+        if (this.options && !this.customDataView) {
             // if user entered some Filter "presets", we need to reflect them all in the DOM
             // also note that a presets of Tree Data Toggling will also call this method because Tree Data toggling does work with data filtering
             // (collapsing a parent will basically use Filter for hidding (aka collapsing) away the child underneat it)
-            if (Array.isArray(this.gridOptions.presets?.filters) || Array.isArray(this.gridOptions.presets?.treeData?.toggledItems)) {
-                this.filterService.populateColumnFilterSearchTermPresets(this.gridOptions.presets?.filters || []);
+            if (Array.isArray(this.options.presets?.filters) || Array.isArray(this.options.presets?.treeData?.toggledItems)) {
+                this.filterService.populateColumnFilterSearchTermPresets(this.options.presets?.filters || []);
             }
         }
     }
@@ -1928,26 +1904,24 @@ class AngularSlickgridComponent {
      * 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) {
-        if (this.gridOptions && this._paginationOptions) {
+        if (this.options && this._paginationOptions) {
             this.totalItems = Array.isArray(dataset) ? dataset.length : 0;
             if (this._paginationOptions && this.dataView?.getPagingInfo) {
                 const slickPagingInfo = this.dataView.getPagingInfo();
-                if (slickPagingInfo &&
-                    'totalRows' in slickPagingInfo &&
-                    this._paginationOptions.totalItems !== slickPagingInfo.totalRows) {
+                if (slickPagingInfo && 'totalRows' in slickPagingInfo && 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() {
         // if user entered some Row Selections "presets"
-        const presets = this.gridOptions?.presets;
-        const enableRowSelection = this.gridOptions && (this.gridOptions.enableCheckboxSelector || this.gridOptions.enableRowSelection);
+        const presets = this.options?.presets;
+        const enableRowSelection = this.options && (this.options.enableCheckboxSelector || this.options.enableRowSelection);
         if (enableRowSelection &&
             this.slickGrid?.getSelectionModel() &&
             presets?.rowSelection &&
@@ -1973,7 +1947,7 @@ class AngularSlickgridComponent {
         }
     }
     hasBackendInfiniteScroll(gridOptions) {
-        return !!(gridOptions || this.gridOptions).backendServiceApi?.service.options?.infiniteScroll;
+        return !!(gridOptions || this.options).backendServiceApi?.service.options?.infiniteScroll;
     }
     mergeGridOptions(gridOptions) {
         gridOptions.gridId = this.gridId;
@@ -2027,12 +2001,12 @@ class AngularSlickgridComponent {
     }
     /** 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 || [];
         // Angular-Slickgrid requires RxJS, so we'll register it as the first resource
         this.registerRxJsResource(new RxJsResource());
-        if (this.gridOptions.enableRowDetailView) {
+        if (this.options.enableRowDetailView) {
             this.slickRowDetailView = new SlickRowDetailView(this.angularUtilService, this.appRef, this._eventPubSubService, this.elm.nativeElement, this.rxjs);
-            this.slickRowDetailView.create(this.columnDefinitions, this.gridOptions);
+            this.slickRowDetailView.create(this.columns, this.options);
             this.extensionService.addExtensionToList(ExtensionName.rowDetailView, {
                 name: ExtensionName.rowDetailView,
                 instance: this.slickRowDetailView,
@@ -2056,16 +2030,16 @@ class AngularSlickgridComponent {
         // 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
@@ -2076,7 +2050,7 @@ class AngularSlickgridComponent {
         this.initializeExternalResources(this._registeredResources);
         // initialize RowDetail separately since we already added it to the ExtensionList via `addExtensionToList()` but not in external resources,
         // because we don't want to dispose the extension/resource more than once (because externalResources/extensionList are both looping through their list to dispose of them)
-        if (this.gridOptions.enableRowDetailView && this.slickRowDetailView) {
+        if (this.options.enableRowDetailView && this.slickRowDetailView) {
             this.slickRowDetailView.init(this.slickGrid);
         }
     }
@@ -2097,9 +2071,9 @@ class AngularSlickgridComponent {
      * @param {Boolean} shouldDisposePaginationService - when disposing the Pagination, do we also want to dispose of the Pagination Service? (defaults to True)
      */
     renderPagination(showPagination = true) {
-        if (this.slickGrid && this.gridOptions?.enablePagination && !this._isPaginationInitialized && showPagination) {
-            if (this.gridOptions.customPaginationComponent) {
-                const paginationComp = this.angularUtilService.createAngularComponent(this.gridOptions.customPaginationComponent);
+        if (this.slickGrid && this.options?.enablePagination && !this._isPaginationInitialized && showPagination) {
+            if (this.options.customPaginationComponent) {
+                const paginationComp = this.angularUtilService.createAngularComponent(this.options.customPaginationComponent);
                 this.slickPagination = paginationComp.componentRef.instance;
             }
             else {
@@ -2134,7 +2108,7 @@ class AngularSlickgridComponent {
         else if (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._columnDefinitions, this.options);
             this.sharedService.hierarchicalDataset = sortedDatasetResult.hierarchical;
             flatDatasetOutput = sortedDatasetResult.flat;
         }
@@ -2145,11 +2119,11 @@ class AngularSlickgridComponent {
         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.id}`.includes('.'))) {
+    loadSlickGridEditors(columns) {
+        if (columns.some((col) => `${col.id}`.includes('.'))) {
             console.error('[Angular-Slickgrid] 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) => {
+        return columns.map((column) => {
             // on every Editor that have a "collectionAsync", resolve the data and assign it to the "collection" property
             if (column?.editor?.collectionAsync) {
                 this.loadEditorCollectionAsync(column);
@@ -2159,8 +2133,8 @@ class AngularSlickgridComponent {
     }
     suggestDateParsingWhenHelpful() {
         if (this.dataView?.getItemCount() > WARN_NO_PREPARSE_DATE_SIZE &&
-            !this.gridOptions.silenceWarnings &&
-            !this.gridOptions.preParseDateColumns &&
+            !this.options.silenceWarnings &&
+            !this.options.preParseDateColumns &&
             this.slickGrid.getColumns().some((c) => isColumnDateType(c.type))) {
             console.warn('[Slickgrid-Universal] For getting better perf, we suggest you enable the `preParseDateColumns` grid option, ' +
                 'for more info visit => https://ghiscoding.gitbook.io/angular-slickgrid/column-functionalities/sorting#pre-parse-date-columns-for-better-perf');
@@ -2183,20 +2157,20 @@ class AngularSlickgridComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AngularSlickgridComponent, deps: [{ token: AngularUtilService }, { token: i0.ApplicationRef }, { token: i0.ChangeDetectorRef }, { token: ContainerService }, { token: i0.ElementRef }, { token: i1.TranslateService, optional: true }, { token: TranslaterService, optional: true }, { token: 'config' }, { token: 'externalService' }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AngularSlickgridComponent, selector: "angular-slickgrid", inputs: { customDataView: "customDataView", gridId: "gridId", gridOptions: "gridOptions", paginationOptions: "paginationOptions", columnDefinitions: "columnDefinitions", dataset: "dataset", datasetHierarchical: "datasetHierarchical" }, outputs: { columnDefinitionsChange: "columnDefinitionsChange" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AngularSlickgridComponent, deps: [{ token: AngularUtilService }, { token: i0.ApplicationRef }, { token: i0.ChangeDetectorRef }, { token: ContainerService }, { token: i0.ElementRef }, { token: i1.TranslateService, optional: true }, { token: TranslaterService, optional: true }, { token: 'config' }, { token: 'externalService' }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AngularSlickgridComponent, isStandalone: false, selector: "angular-slickgrid", inputs: { customDataView: "customDataView", gridId: "gridId", options: "options", paginationOptions: "paginationOptions", columns: "columns", dataset: "dataset", datasetHierarchical: "datasetHierarchical" }, outputs: { columnsChange: "columnsChange" }, providers: [
             // make everything transient (non-singleton)
             AngularUtilService,
             TranslaterService,
         ], queries: [{ propertyName: "slickgridHeader", first: true, predicate: ["slickgridHeader"], descendants: true, static: true }, { propertyName: "slickgridFooter", first: true, predicate: ["slickgridFooter"], descendants: true, static: true }], ngImport: i0, template: "<div id=\"slickGridContainer-{{ gridId }}\" class=\"gridPane\">\n  <ng-container *ngTemplateOutlet=\"slickgridHeader\"></ng-container>\n  <div attr.id=\"{{ gridId }}\" class=\"slickgrid-container\"></div>\n  <ng-container *ngTemplateOutlet=\"slickgridFooter\"></ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], preserveWhitespaces: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AngularSlickgridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AngularSlickgridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'angular-slickgrid', providers: [
                         // make everything transient (non-singleton)
                         AngularUtilService,
                         TranslaterService,
-                    ], template: "<div id=\"slickGridContainer-{{ gridId }}\" class=\"gridPane\">\n  <ng-container *ngTemplateOutlet=\"slickgridHeader\"></ng-container>\n  <div attr.id=\"{{ gridId }}\" class=\"slickgrid-container\"></div>\n  <ng-container *ngTemplateOutlet=\"slickgridFooter\"></ng-container>\n</div>\n" }]
+                    ], standalone: false, template: "<div id=\"slickGridContainer-{{ gridId }}\" class=\"gridPane\">\n  <ng-container *ngTemplateOutlet=\"slickgridHeader\"></ng-container>\n  <div attr.id=\"{{ gridId }}\" class=\"slickgrid-container\"></div>\n  <ng-container *ngTemplateOutlet=\"slickgridFooter\"></ng-container>\n</div>\n" }]
         }], ctorParameters: () => [{ type: AngularUtilService }, { type: i0.ApplicationRef }, { type: i0.ChangeDetectorRef }, { type: ContainerService }, { type: i0.ElementRef }, { type: i1.TranslateService, decorators: [{
                     type: Optional
                 }] }, { type: TranslaterService, decorators: [{
@@ -2211,13 +2185,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], gridId: [{
                 type: Input
-            }], gridOptions: [{
+            }], options: [{
                 type: Input
             }], paginationOptions: [{
                 type: Input
-            }], columnDefinitions: [{
+            }], columns: [{
                 type: Input
-            }], columnDefinitionsChange: [{
+            }], columnsChange: [{
                 type: Output
             }], dataset: [{
                 type: Input
@@ -2243,11 +2217,11 @@ class AngularSlickgridModule {
             ],
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AngularSlickgridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: AngularSlickgridModule, declarations: [AngularSlickgridComponent], imports: [CommonModule, TranslateModule], exports: [AngularSlickgridComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AngularSlickgridModule, imports: [CommonModule, TranslateModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AngularSlickgridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: AngularSlickgridModule, declarations: [AngularSlickgridComponent], imports: [CommonModule, TranslateModule], exports: [AngularSlickgridComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AngularSlickgridModule, imports: [CommonModule, TranslateModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AngularSlickgridModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AngularSlickgridModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, TranslateModule],