@slickgrid-universal/vanilla-bundle 5.11.0 → 5.12.1

package/README.md

@@ -26,6 +26,6 @@ Vanilla Bundle implementation (no framework, plain TypeSript implementation). Th
 - [whatwg-fetch](https://github.com/whatwg/fetch) - Fetch Standard
 
 ### Installation
-This Vanilla Bundle is used used by the standalone [vite-demo-vanilla-bundle](https://github.com/ghiscoding/slickgrid-universal/tree/master/examples/vite-demo-vanilla-bundle) which serves for demo purposes.
+This Vanilla Bundle is used used by the standalone [demos/vanilla](https://github.com/ghiscoding/slickgrid-universal/tree/master/demos/vanilla) which serves for demo purposes.
 
 Go to the root of the repo and follow the instructions provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation)

package/dist/cjs/components/slick-vanilla-grid-bundle.js

@@ -29,10 +29,13 @@ class SlickVanillaGridBundle {
     set dataset(newDataset) {
         const prevDatasetLn = this._currentDatasetLength;
         const isDatasetEqual = (0, lite_1.dequal)(newDataset, this.dataset || []);
-        const isDeepCopyDataOnPageLoadEnabled = !!(this._gridOptions?.enableDeepCopyDatasetOnPageLoad);
+        const isDeepCopyDataOnPageLoadEnabled = !!this._gridOptions?.enableDeepCopyDatasetOnPageLoad;
         let data = isDeepCopyDataOnPageLoadEnabled ? (0, utils_1.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.slickGrid && this.gridOptions?.enableTreeData && Array.isArray(newDataset) && (newDataset.length > 0 || newDataset.length !== prevDatasetLn || !isDatasetEqual)) {
+        if (this.slickGrid &&
+            this.gridOptions?.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
         }
@@ -85,7 +88,7 @@ class SlickVanillaGridBundle {
         // 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 (this.slickGrid?.getOptions) {
-            mergedOptions = ((0, utils_1.extend)(true, {}, this.slickGrid.getOptions(), options));
+            mergedOptions = (0, utils_1.extend)(true, {}, this.slickGrid.getOptions(), options);
         }
         else {
             mergedOptions = this.mergeGridOptions(options);
@@ -170,7 +173,7 @@ class SlickVanillaGridBundle {
         gridParentContainerElm.appendChild(this._gridContainerElm);
         // 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 = (options?.showHeaderRow === false);
+        this._hideHeaderRowAfterPageLoad = options?.showHeaderRow === false;
         this._columnDefinitions = columnDefs || [];
         if (this._columnDefinitions.length > 0) {
             this.copyColumnWidthsReference(this._columnDefinitions);
@@ -179,7 +182,7 @@ class SlickVanillaGridBundle {
         // since a deep copy of grid options would lose original resource refs but we want to keep them as singleton
         this._registeredResources = options?.externalResources || [];
         this._gridOptions = this.mergeGridOptions(options || {});
-        const isDeepCopyDataOnPageLoadEnabled = !!(this._gridOptions?.enableDeepCopyDatasetOnPageLoad);
+        const isDeepCopyDataOnPageLoadEnabled = !!this._gridOptions?.enableDeepCopyDatasetOnPageLoad;
         // add dark mode CSS class when enabled
         if (this._gridOptions.darkMode) {
             this.setDarkMode(true);
@@ -195,19 +198,28 @@ class SlickVanillaGridBundle {
         this.gridEventService = services?.gridEventService ?? new common_1.GridEventService();
         this.sharedService = services?.sharedService ?? new common_1.SharedService();
         this.collectionService = services?.collectionService ?? new common_1.CollectionService(this.translaterService);
-        this.extensionUtility = services?.extensionUtility ?? new common_1.ExtensionUtility(this.sharedService, this.backendUtilityService, this.translaterService);
+        this.extensionUtility =
+            services?.extensionUtility ?? new common_1.ExtensionUtility(this.sharedService, this.backendUtilityService, this.translaterService);
         this.filterFactory = new common_1.FilterFactory(slickgridConfig, this.translaterService, this.collectionService);
+        // prettier-ignore
         this.filterService = services?.filterService ?? new common_1.FilterService(this.filterFactory, this._eventPubSubService, this.sharedService, this.backendUtilityService);
         this.resizerService = services?.resizerService ?? new common_1.ResizerService(this._eventPubSubService);
+        // prettier-ignore
         this.sortService = services?.sortService ?? new common_1.SortService(this.collectionService, this.sharedService, this._eventPubSubService, this.backendUtilityService);
         this.treeDataService = services?.treeDataService ?? new common_1.TreeDataService(this._eventPubSubService, this.sharedService, this.sortService);
+        // prettier-ignore
         this.paginationService = services?.paginationService ?? new common_1.PaginationService(this._eventPubSubService, this.sharedService, this.backendUtilityService);
-        this.extensionService = services?.extensionService ?? new common_1.ExtensionService(this.extensionUtility, this.filterService, this._eventPubSubService, this.sharedService, this.sortService, this.treeDataService, this.translaterService, () => this.gridService);
+        this.extensionService =
+            services?.extensionService ??
+                new common_1.ExtensionService(this.extensionUtility, this.filterService, this._eventPubSubService, this.sharedService, this.sortService, this.treeDataService, this.translaterService, () => this.gridService);
+        // prettier-ignore
         this.gridStateService = services?.gridStateService ?? new common_1.GridStateService(this.extensionService, this.filterService, this._eventPubSubService, this.sharedService, this.sortService, this.treeDataService);
+        // prettier-ignore
         this.gridService = services?.gridService ?? new common_1.GridService(this.gridStateService, this.filterService, this._eventPubSubService, this.paginationService, this.sharedService, this.sortService, this.treeDataService);
         this.headerGroupingService = services?.headerGroupingService ?? new common_1.HeaderGroupingService(this.extensionUtility);
         if (hierarchicalDataset) {
-            this.sharedService.hierarchicalDataset = (isDeepCopyDataOnPageLoadEnabled ? (0, utils_1.extend)(true, [], hierarchicalDataset) : hierarchicalDataset) || [];
+            this.sharedService.hierarchicalDataset =
+                (isDeepCopyDataOnPageLoadEnabled ? (0, utils_1.extend)(true, [], hierarchicalDataset) : hierarchicalDataset) || [];
         }
         const eventHandler = new common_1.SlickEventHandler();
         // register all service instances in the container
@@ -289,7 +301,7 @@ class SlickVanillaGridBundle {
         if (shouldEmptyDomElementContainer) {
             this.emptyGridContainerElm();
         }
-        this._collectionObservers.forEach(obs => obs?.disconnect());
+        this._collectionObservers.forEach((obs) => obs?.disconnect());
         this._eventPubSubService?.dispose();
         this._slickerGridInstances = null;
     }
@@ -306,7 +318,10 @@ class SlickVanillaGridBundle {
     }
     initialization(gridContainerElm, eventHandler, inputDataset) {
         // 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) {
+        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;
         }
         // create the slickgrid container and add it to the user's grid container
@@ -503,7 +518,10 @@ class SlickVanillaGridBundle {
         // 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?.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
@@ -528,10 +546,15 @@ class SlickVanillaGridBundle {
             // internalPostProcess only works (for now) with a GraphQL Service, so make sure it is of that type
             if ( /* backendApiService instanceof GraphqlService || */typeof backendApiService.getDatasetName === 'function') {
                 backendApi.internalPostProcess = (processResult) => {
+                    // prettier-ignore
                     const datasetName = (backendApi && backendApiService && typeof backendApiService.getDatasetName === 'function') ? backendApiService.getDatasetName() : '';
                     if (processResult && processResult.data && 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 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);
                     }
                 };
@@ -552,7 +575,8 @@ class SlickVanillaGridBundle {
         this.subscriptions.push(this._eventPubSubService.subscribe('onLanguageChange', (args) => {
             if (gridOptions.enableTranslate) {
                 this.extensionService.translateAllExtensions(args.language);
-                if ((gridOptions.createPreHeaderPanel && gridOptions.createTopHeaderPanel) || (gridOptions.createPreHeaderPanel && !gridOptions.enableDraggableGrouping)) {
+                if ((gridOptions.createPreHeaderPanel && gridOptions.createTopHeaderPanel) ||
+                    (gridOptions.createPreHeaderPanel && !gridOptions.enableDraggableGrouping)) {
                     this.headerGroupingService.translateHeaderGrouping();
                 }
             }
@@ -596,20 +620,19 @@ class SlickVanillaGridBundle {
                 this.sharedService.isItemsDateParsed = false;
                 this.handleOnItemCountChanged(this.dataView?.getFilteredItemCount() || 0, args.itemCount);
                 // when user has resize by content enabled, we'll force a full width calculation since we change our entire dataset
-                if (args.itemCount > 0 && (this.gridOptions.autosizeColumnsByCellContentOnFirstLoad || this.gridOptions.enableAutoResizeColumnsByCellContent)) {
+                if (args.itemCount > 0 &&
+                    (this.gridOptions.autosizeColumnsByCellContentOnFirstLoad || this.gridOptions.enableAutoResizeColumnsByCellContent)) {
                     this.resizerService.resizeColumnsByCellContent(!this.gridOptions?.resizeByContentOnlyOnFirstLoad);
                 }
             });
-            if (gridOptions?.enableFiltering && !gridOptions.enableRowDetailView) {
+            if ((gridOptions?.enableFiltering || gridOptions?.dataView?.globalItemMetadataProvider) && !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();
                     }
                 });
@@ -629,6 +652,7 @@ class SlickVanillaGridBundle {
             this.loadColumnPresetsWhenDatasetInitialized();
             this.loadFilterPresetsWhenDatasetInitialized();
         }
+        // @deprecated @user `dataview.globalItemMetadataProvider.getRowMetadata`
         // did the user add a colspan callback? If so, hook it into the DataView getItemMetadata
         if (gridOptions?.colspanCallback && dataView?.getItem && dataView?.getItemMetadata) {
             dataView.getItemMetadata = (rowNumber) => {
@@ -644,6 +668,7 @@ class SlickVanillaGridBundle {
         const backendApi = gridOptions.backendServiceApi;
         const backendApiService = backendApi?.service;
         const serviceOptions = backendApiService?.options ?? {};
+        // prettier-ignore
         const isExecuteCommandOnInit = (!serviceOptions) ? false : ((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)
@@ -673,7 +698,7 @@ class SlickVanillaGridBundle {
             }
             // execute onInit command when necessary
             if (backendApi && backendApiService && (backendApi.onInit || isExecuteCommandOnInit)) {
-                const query = (typeof backendApiService.buildQuery === 'function') ? backendApiService.buildQuery() : '';
+                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(() => {
@@ -703,13 +728,16 @@ class SlickVanillaGridBundle {
         }
     }
     addBackendInfiniteScrollCallback() {
-        if (this.slickGrid && this.gridOptions.backendServiceApi && this.hasBackendInfiniteScroll() && !this.gridOptions.backendServiceApi?.onScrollEnd) {
+        if (this.slickGrid &&
+            this.gridOptions.backendServiceApi &&
+            this.hasBackendInfiniteScroll() &&
+            !this.gridOptions.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);
                     }
@@ -720,10 +748,10 @@ class SlickVanillaGridBundle {
             // run onScrollEnd() method when that happens
             this._eventHandler.subscribe(this.slickGrid.onScroll, (_e, args) => {
                 const viewportElm = args.grid.getViewportNode();
-                if (['mousewheel', 'scroll'].includes(args.triggeredBy || '')
-                    && this.paginationService?.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;
@@ -742,7 +770,8 @@ class SlickVanillaGridBundle {
         }
     }
     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-Universal] 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 (optionally provide grid height or width)
@@ -753,7 +782,11 @@ class SlickVanillaGridBundle {
             this.resizerService.resizeGrid();
         }
         // expand/autofit columns on first page load
-        if (grid && options?.enableAutoResize && options.autoFitColumnsOnFirstLoad && options.enableAutoSizeColumns && !this._isAutosizeColsCalled) {
+        if (grid &&
+            options?.enableAutoResize &&
+            options.autoFitColumnsOnFirstLoad &&
+            options.enableAutoSizeColumns &&
+            !this._isAutosizeColsCalled) {
             grid.autosizeColumns();
             this._isAutosizeColsCalled = true;
         }
@@ -774,7 +807,10 @@ class SlickVanillaGridBundle {
      */
     paginationChanged(pagination) {
         const isSyncGridSelectionEnabled = this.gridStateService?.needToPreserveRowSelection() ?? false;
-        if (this.slickGrid && !isSyncGridSelectionEnabled && this._gridOptions?.backendServiceApi && (this.gridOptions.enableRowSelection || this.gridOptions.enableCheckboxSelector)) {
+        if (this.slickGrid &&
+            !isSyncGridSelectionEnabled &&
+            this._gridOptions?.backendServiceApi &&
+            (this.gridOptions.enableRowSelection || this.gridOptions.enableCheckboxSelector)) {
             this.slickGrid.setSelectedRows([]);
         }
         const { pageNumber, pageSize } = pagination;
@@ -783,7 +819,7 @@ class SlickVanillaGridBundle {
         }
         this._eventPubSubService.publish('onGridStateChanged', {
             change: { newValues: { pageNumber, pageSize }, type: common_1.GridStateType.pagination },
-            gridState: this.gridStateService.getCurrentGridState()
+            gridState: this.gridStateService.getCurrentGridState(),
         });
     }
     /**
@@ -817,12 +853,13 @@ class SlickVanillaGridBundle {
                     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)));
+                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);
                     // 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._gridOptions?.pagination?.totalItems;
                     if (totalRecords !== undefined && totalRecords !== this.totalItems) {
                         this.totalItems = +totalRecords;
                     }
@@ -920,7 +957,7 @@ class SlickVanillaGridBundle {
      * 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);
+        columnDefinitions.forEach((col) => (col.originalWidth = col.width));
     }
     displayEmptyDataWarning(showWarning = true) {
         if (this.gridOptions.enableEmptyDataWarningMessage) {
@@ -934,7 +971,7 @@ class SlickVanillaGridBundle {
             startTime: new Date(),
             endTime: new Date(),
             itemCount: currentPageRowItemCount,
-            totalItemCount
+            totalItemCount,
         };
         // if custom footer is enabled, then we'll update its metrics
         if (this.slickFooter) {
@@ -944,6 +981,10 @@ class SlickVanillaGridBundle {
         if (this._isLocalGrid && this._gridOptions?.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) {
+            this.resizerService.resizeGrid();
+        }
     }
     /** Initialize the Pagination Service once */
     initializePaginationService(paginationOptions) {
@@ -954,7 +995,7 @@ class SlickVanillaGridBundle {
             };
             this.paginationService.totalItems = this.totalItems;
             this.paginationService.init(this.slickGrid, paginationOptions, this.backendServiceApi);
-            this.subscriptions.push(this._eventPubSubService.subscribe('onPaginationChanged', paginationChanges => this.paginationChanged(paginationChanges)), this._eventPubSubService.subscribe('onPaginationVisibilityChanged', visibility => {
+            this.subscriptions.push(this._eventPubSubService.subscribe('onPaginationChanged', (paginationChanges) => this.paginationChanged(paginationChanges)), this._eventPubSubService.subscribe('onPaginationVisibilityChanged', (visibility) => {
                 this.showPagination = visibility?.visible ?? false;
                 if (this.gridOptions?.backendServiceApi) {
                     this.backendUtilityService?.refreshBackendDataset(this.gridOptions);
@@ -1018,12 +1059,12 @@ class SlickVanillaGridBundle {
                     }
                     else if (response?.status >= 200 && response.status < 300 && typeof response.json === 'function') {
                         if (response.bodyUsed) {
-                            console.warn(`[SlickGrid-Universal] 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-Universal] 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?.content) {
@@ -1041,13 +1082,11 @@ class SlickVanillaGridBundle {
     }
     insertDynamicPresetColumns(columnId, gridPresetColumns) {
         if (this._columnDefinitions) {
-            const columnPosition = this._columnDefinitions.findIndex(c => c.id === columnId);
+            const columnPosition = this._columnDefinitions.findIndex((c) => c.id === columnId);
             if (columnPosition >= 0) {
                 const dynColumn = this._columnDefinitions[columnPosition];
-                if (dynColumn?.id === columnId && !gridPresetColumns.some(c => c.id === columnId)) {
-                    columnPosition > 0
-                        ? gridPresetColumns.splice(columnPosition, 0, dynColumn)
-                        : gridPresetColumns.unshift(dynColumn);
+                if (dynColumn?.id === columnId && !gridPresetColumns.some((c) => c.id === columnId)) {
+                    columnPosition > 0 ? gridPresetColumns.splice(columnPosition, 0, dynColumn) : gridPresetColumns.unshift(dynColumn);
                 }
             }
         }
@@ -1055,7 +1094,10 @@ class SlickVanillaGridBundle {
     /** Load any possible Columns Grid Presets */
     loadColumnPresetsWhenDatasetInitialized() {
         // if user entered some Columns "presets", we need to reflect them all in the grid
-        if (this.slickGrid && this.gridOptions.presets && Array.isArray(this.gridOptions.presets.columns) && this.gridOptions.presets.columns.length > 0) {
+        if (this.slickGrid &&
+            this.gridOptions.presets &&
+            Array.isArray(this.gridOptions.presets.columns) &&
+            this.gridOptions.presets.columns.length > 0) {
             const gridPresetColumns = this.gridStateService.getAssociatedGridColumns(this.slickGrid, this.gridOptions.presets.columns);
             if (gridPresetColumns && 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)
@@ -1073,7 +1115,7 @@ class SlickVanillaGridBundle {
                 }
                 // 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.slickGrid.setColumns(gridPresetColumns);
                 this.sharedService.visibleColumns = gridPresetColumns;
@@ -1086,7 +1128,8 @@ class SlickVanillaGridBundle {
             // 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 (this.gridOptions.presets && (Array.isArray(this.gridOptions.presets.filters) || Array.isArray(this.gridOptions.presets?.treeData?.toggledItems))) {
+            if (this.gridOptions.presets &&
+                (Array.isArray(this.gridOptions.presets.filters) || Array.isArray(this.gridOptions.presets?.treeData?.toggledItems))) {
                 this.filterService.populateColumnFilterSearchTermPresets(this.gridOptions.presets?.filters || []);
             }
         }
@@ -1116,7 +1159,12 @@ class SlickVanillaGridBundle {
         const presets = this.gridOptions?.presets;
         const selectionModel = this.slickGrid?.getSelectionModel();
         const enableRowSelection = this.gridOptions && (this.gridOptions.enableCheckboxSelector || this.gridOptions.enableRowSelection);
-        if (this.slickGrid && this.dataView && enableRowSelection && selectionModel && presets?.rowSelection && (Array.isArray(presets.rowSelection.gridRowIndexes) || Array.isArray(presets.rowSelection.dataContextIds))) {
+        if (this.slickGrid &&
+            this.dataView &&
+            enableRowSelection &&
+            selectionModel &&
+            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
@@ -1132,7 +1180,7 @@ class SlickVanillaGridBundle {
                 this.dataView.setSelectedIds(dataContextIds || [], {
                     isRowBeingAdded: true,
                     shouldTriggerEvent: false, // do not trigger when presetting the grid
-                    applyRowSelectionToGrid: true
+                    applyRowSelectionToGrid: true,
                 });
             }
         }
@@ -1142,7 +1190,7 @@ class SlickVanillaGridBundle {
         if (disposePreviousResources) {
             this.disposeExternalResources();
         }
-        resources.forEach(res => this._registeredResources.push(res));
+        resources.forEach((res) => this._registeredResources.push(res));
         this.initializeExternalResources(resources);
     }
     resetExternalResources() {
@@ -1177,7 +1225,8 @@ class SlickVanillaGridBundle {
         // 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.gridOptions.createPreHeaderPanel && this.gridOptions.createTopHeaderPanel) ||
+            (this.gridOptions.createPreHeaderPanel && !this.gridOptions.enableDraggableGrouping)) {
             this._registeredResources.push(this.headerGroupingService);
         }
         // when using Tree Data View, register its Service
@@ -1235,7 +1284,7 @@ class SlickVanillaGridBundle {
     /** Prepare and load all SlickGrid editors, if an async editor is found then we'll also execute it. */
     loadSlickGridEditors(columnDefinitions) {
         const columns = Array.isArray(columnDefinitions) ? columnDefinitions : [];
-        if (columns.some(col => `${col.id}`.includes('.'))) {
+        if (columns.some((col) => `${col.id}`.includes('.'))) {
             console.error('[Slickgrid-Universal] 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 columns.map((column) => {
@@ -1247,7 +1296,11 @@ class SlickVanillaGridBundle {
         });
     }
     suggestDateParsingWhenHelpful() {
-        if (!this.gridOptions.silenceWarnings && this.dataView && this.dataView.getItemCount() > WARN_NO_PREPARSE_DATE_SIZE && !this.gridOptions.preParseDateColumns && this.slickGrid?.getColumns().some(c => (0, common_1.isColumnDateType)(c.type))) {
+        if (!this.gridOptions.silenceWarnings &&
+            this.dataView &&
+            this.dataView.getItemCount() > WARN_NO_PREPARSE_DATE_SIZE &&
+            !this.gridOptions.preParseDateColumns &&
+            this.slickGrid?.getColumns().some((c) => (0, common_1.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/slickgrid-universal/column-functionalities/sorting#pre-parse-date-columns-for-better-perf');
         }
@@ -1262,7 +1315,7 @@ class SlickVanillaGridBundle {
             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.slickGrid.getCellEditor();
-            if (currentEditor?.disable && currentEditor?.renderDomElement) {
+            if (currentEditor?.disable && currentEditor.renderDomElement) {
                 if (typeof currentEditor.destroy === 'function') {
                     currentEditor.destroy();
                 }