ghiscoding · ghiscoding · Sep 1, 2026 · Sep 1, 2026
diff --git a/demos/vanilla/src/examples/example04.ts b/demos/vanilla/src/examples/example04.ts
@@ -653,7 +653,7 @@ export default class Example04 {
 
   setLargeFreezedColumns() {
     this.setFrozenColumns(2);
-    this.sgb.gridStateService.changeColumnsArrangement(
+    this.sgb.gridStateService.applyColumnLayout(
       [
         { columnId: '_checkbox_selector', cssClass: 'slick-cell-checkboxsel', headerCssClass: '', width: 40 },
         { columnId: 'title', cssClass: '', headerCssClass: '', width: 240 },

diff --git a/demos/vanilla/src/examples/example11.ts b/demos/vanilla/src/examples/example11.ts
@@ -826,13 +826,13 @@ export default class Example11 {
       const pinning = selectedView?.pinning ?? { frozenBottom: false, frozenColumn: -1, frozenRow: -1 };
       this.sgb.filterService.updateFilters(filters as CurrentFilter[]);
       this.sgb.sortService.updateSorting(sorters as CurrentSorter[]);
-      this.sgb.gridStateService.changeColumnsArrangement(columns);
+      this.sgb.gridStateService.applyColumnLayout(columns);
       this.sgb.gridService.setPinning(pinning); // make sure to set pinning last in case some columns were hidden which would offset the pinning
     } else {
       this.sgb.gridService.clearPinning();
       this.sgb.filterService.clearFilters();
       this.sgb.sortService.clearSorting();
-      this.sgb.gridStateService.changeColumnsArrangement(
+      this.sgb.gridStateService.applyColumnLayout(
         [...this.columns].map((col) => ({ columnId: `${col.id}` }))
         // OR the `hidden` props alternative
         // [...this.columns].map((col) => ({ columnId: `${col.id}`, hidden: false }))

diff --git a/...ks/angular-slickgrid/src/library/components/__tests__/angular-slickgrid.component.spec.ts b/...ks/angular-slickgrid/src/library/components/__tests__/angular-slickgrid.component.spec.ts
@@ -181,7 +181,7 @@ const gridServiceStub = {
 const gridStateServiceStub = {
   init: vi.fn(),
   dispose: vi.fn(),
-  changeColumnsArrangement: vi.fn((columns) => {
+  applyColumnLayout: vi.fn((columns) => {
     const gridColumns = gridStateServiceStub.getAssociatedGridColumns(mockGrid, columns);
     if (gridColumns && Array.isArray(gridColumns)) {
       mockGrid.setColumns(gridColumns);
@@ -1723,12 +1723,12 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
 
       it('should reflect columns in the grid', () => {
         const mockColsPresets = [{ columnId: 'firstName', width: 100 }];
-        const changeColsSpy = vi.spyOn(gridStateServiceStub, 'changeColumnsArrangement');
+        const applyColumnLayoutSpy = vi.spyOn(gridStateServiceStub, 'applyColumnLayout');
 
         component.options = { presets: { columns: mockColsPresets } } as unknown as GridOption;
         component.initialization(slickEventHandler);
 
-        expect(changeColsSpy).toHaveBeenCalledWith(mockColsPresets, false);
+        expect(applyColumnLayoutSpy).toHaveBeenCalledWith(mockColsPresets, false);
       });
 
       it('should reflect columns with an extra checkbox selection column in the grid when "enableCheckboxSelector" is set', () => {
@@ -1739,13 +1739,13 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
           { ...mockCol, editorClass: undefined, hidden: false },
         ];
         vi.spyOn(gridStateServiceStub, 'getAssociatedGridColumns').mockReturnValue([mockCol]);
-        const changeColsSpy = vi.spyOn(gridStateServiceStub, 'changeColumnsArrangement');
+        const applyColumnLayoutSpy = vi.spyOn(gridStateServiceStub, 'applyColumnLayout');
 
         component.columns = mockCols;
         component.options = { ...gridOptions, enableCheckboxSelector: true, presets: { columns: mockColsPresets } } as unknown as GridOption;
         component.initialization(slickEventHandler);
 
-        expect(changeColsSpy).toHaveBeenCalledWith(mockColsPresets, false);
+        expect(applyColumnLayoutSpy).toHaveBeenCalledWith(mockColsPresets, false);
       });
 
       it('should reflect columns with an extra row detail column in the grid when "enableRowDetailView" is set', () => {
@@ -1756,7 +1756,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
           { ...mockCol, editorClass: undefined, hidden: false },
         ];
         vi.spyOn(gridStateServiceStub, 'getAssociatedGridColumns').mockReturnValue([mockCol]);
-        const changeColsSpy = vi.spyOn(gridStateServiceStub, 'changeColumnsArrangement');
+        const applyColumnLayoutSpy = vi.spyOn(gridStateServiceStub, 'applyColumnLayout');
 
         component.columns = mockCols;
         component.options = {
@@ -1767,7 +1767,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
         } as GridOption;
         component.initialization(slickEventHandler);
 
-        expect(changeColsSpy).toHaveBeenCalledWith(mockColsPresets, false);
+        expect(applyColumnLayoutSpy).toHaveBeenCalledWith(mockColsPresets, false);
       });
 
       it('should reflect columns with an extra row move column in the grid when "enableRowMoveManager" is set', () => {
@@ -1778,13 +1778,13 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
           { ...mockCol, editorClass: undefined, hidden: false },
         ];
         vi.spyOn(gridStateServiceStub, 'getAssociatedGridColumns').mockReturnValue([mockCol]);
-        const changeColsSpy = vi.spyOn(gridStateServiceStub, 'changeColumnsArrangement');
+        const applyColumnLayoutSpy = vi.spyOn(gridStateServiceStub, 'applyColumnLayout');
 
         component.columns = mockCols;
         component.options = { ...gridOptions, enableRowMoveManager: true, presets: { columns: mockColsPresets } } as unknown as GridOption;
         component.initialization(slickEventHandler);
 
-        expect(changeColsSpy).toHaveBeenCalledWith(mockColsPresets, false);
+        expect(applyColumnLayoutSpy).toHaveBeenCalledWith(mockColsPresets, false);
       });
 
       it('should reflect 3 dynamic columns (1-RowMove, 2-RowSelection, 3-RowDetail) when all associated extension flags are enabled', () => {
@@ -1797,7 +1797,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
           { ...mockCol, editorClass: undefined, hidden: false },
         ];
         vi.spyOn(gridStateServiceStub, 'getAssociatedGridColumns').mockReturnValue([mockCol]);
-        const changeColsSpy = vi.spyOn(gridStateServiceStub, 'changeColumnsArrangement');
+        const applyColumnLayoutSpy = vi.spyOn(gridStateServiceStub, 'applyColumnLayout');
 
         component.columns = mockCols;
         component.options = {
@@ -1810,7 +1810,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
         } as unknown as GridOption;
         component.initialization(slickEventHandler);
 
-        expect(changeColsSpy).toHaveBeenCalledWith(mockColsPresets, false);
+        expect(applyColumnLayoutSpy).toHaveBeenCalledWith(mockColsPresets, false);
       });
 
       it('should execute backend service "init" method when set', () => {

diff --git a/frameworks/angular-slickgrid/src/library/components/angular-slickgrid.component.ts b/frameworks/angular-slickgrid/src/library/components/angular-slickgrid.component.ts
@@ -1393,7 +1393,7 @@ export class AngularSlickgridComponent<TData = any> implements AfterViewInit, On
     if (Array.isArray(this.options.presets?.columns) && this.options.presets.columns.length > 0) {
       // delegate to GridStateService for centralized column arrangement logic
       // we pass `false` for triggerAutoSizeColumns to maintain original behavior on preset load
-      this.gridStateService.changeColumnsArrangement(this.options.presets.columns, false);
+      this.gridStateService.applyColumnLayout(this.options.presets.columns, false);
     }
   }
 

diff --git a/frameworks/aurelia-slickgrid/src/custom-elements/aurelia-slickgrid.ts b/frameworks/aurelia-slickgrid/src/custom-elements/aurelia-slickgrid.ts
@@ -1265,7 +1265,7 @@ export class AureliaSlickgridCustomElement {
     if (this.options.presets && Array.isArray(this.options.presets.columns) && this.options.presets.columns.length > 0) {
       // delegate to GridStateService for centralized column arrangement logic
       // we pass `false` for triggerAutoSizeColumns to maintain original behavior on preset load
-      this.gridStateService.changeColumnsArrangement(this.options.presets.columns, false);
+      this.gridStateService.applyColumnLayout(this.options.presets.columns, false);
     }
   }
 

diff --git a/frameworks/slickgrid-react/src/components/slickgrid-react.tsx b/frameworks/slickgrid-react/src/components/slickgrid-react.tsx
@@ -127,7 +127,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
     }
     if (this.sharedService?.gridOptions && this.grid?.setOptions) {
       this.sharedService.gridOptions = mergedOptions;
-      this.grid.setOptions(mergedOptions, false, true); // make sure to supressColumnCheck (3rd arg) to avoid problem with changeColumnsArrangement() and custom grid view
+      this.grid.setOptions(mergedOptions, false, true); // make sure to suppress column checks (3rd arg) when applying a column layout and using a custom grid view
       this.grid.reRenderColumns(true); // then call a re-render since we did supressColumnCheck on previous setOptions
     }
     this._options = mergedOptions;
@@ -1410,7 +1410,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
     if (this.grid && this.options.presets && Array.isArray(this.options.presets.columns) && this.options.presets.columns.length > 0) {
       // delegate to GridStateService for centralized column arrangement logic
       // we pass `false` for triggerAutoSizeColumns to maintain original behavior on preset load
-      this.gridStateService.changeColumnsArrangement(this.options.presets.columns, false);
+      this.gridStateService.applyColumnLayout(this.options.presets.columns, false);
     }
   }
 

diff --git a/frameworks/slickgrid-vue/src/components/SlickgridVue.vue b/frameworks/slickgrid-vue/src/components/SlickgridVue.vue
@@ -1282,7 +1282,7 @@ function loadColumnPresetsWhenDatasetInitialized() {
   if (_gridOptions.value.presets && Array.isArray(_gridOptions.value.presets.columns) && _gridOptions.value.presets.columns.length > 0) {
     // delegate to GridStateService for centralized column arrangement logic
     // we pass `false` for triggerAutoSizeColumns to maintain original behavior on preset load
-    gridStateService.changeColumnsArrangement(_gridOptions.value.presets.columns, false);
+    gridStateService.applyColumnLayout(_gridOptions.value.presets.columns, false);
   }
 }
 

diff --git a/packages/common/src/services/__tests__/gridState.service.spec.ts b/packages/common/src/services/__tests__/gridState.service.spec.ts
@@ -230,7 +230,7 @@ describe('GridStateService', () => {
       });
     });
 
-    describe('changeColumnsArrangement method', () => {
+    describe('applyColumnLayout method', () => {
       const rowCheckboxColumnMock: Column = { id: '_checkbox_selector', field: '_checkbox_selector', minWidth: 50 };
       const rowDetailColumnMock: Column = { id: '_detail_selector', field: '_detail_selector', minWidth: 50 };
       const rowMoveColumnMock: Column = { id: '_move', field: '_move', minWidth: 50 };
@@ -297,21 +297,29 @@ describe('GridStateService', () => {
         const autoSizeSpy = vi.spyOn(gridStub, 'autosizeColumns');
         const pubSubSpy = vi.spyOn(mockPubSub, 'publish');
 
-        service.changeColumnsArrangement(presetColumnsMock);
+        service.applyColumnLayout(presetColumnsMock);
 
         expect(setColsSpy).toHaveBeenCalledWith([...columnsWithoutCheckboxMock]);
         expect(autoSizeSpy).toHaveBeenCalled();
         expect(pubSubSpy).not.toHaveBeenCalledWith('onFullResizeByContentRequested');
       });
 
+      it('should delegate the deprecated "changeColumnsArrangement" method to "applyColumnLayout"', () => {
+        const applyColumnLayoutSpy = vi.spyOn(service, 'applyColumnLayout');
+
+        service.changeColumnsArrangement(presetColumnsMock, false, true);
+
+        expect(applyColumnLayoutSpy).toHaveBeenCalledWith(presetColumnsMock, false, true);
+      });
+
       it('should call the method and expect slickgrid "setColumns" and a pubsub event "onFullResizeByContentRequested" to be called with newest columns when "triggerAutoSizeColumns" is false and "enableAutoResizeColumnsByCellContent" is true', () => {
         gridOptionMock.enableAutoResizeColumnsByCellContent = true;
         vi.spyOn(SharedService.prototype, 'allColumns', 'get').mockReturnValueOnce(allColumnsMock);
         const setColsSpy = vi.spyOn(gridStub, 'setColumns');
         const autoSizeSpy = vi.spyOn(gridStub, 'autosizeColumns');
         const pubSubSpy = vi.spyOn(mockPubSub, 'publish');
 
-        service.changeColumnsArrangement(presetColumnsMock, false);
+        service.applyColumnLayout(presetColumnsMock, false);
 
         expect(setColsSpy).toHaveBeenCalledWith(columnsWithoutCheckboxMock);
         expect(autoSizeSpy).not.toHaveBeenCalled();
@@ -326,7 +334,7 @@ describe('GridStateService', () => {
         const autoSizeSpy = vi.spyOn(gridStub, 'autosizeColumns');
         const pubSubSpy = vi.spyOn(mockPubSub, 'publish');
 
-        service.changeColumnsArrangement(presetColumnsMock, false);
+        service.applyColumnLayout(presetColumnsMock, false);
 
         expect(setColsSpy).toHaveBeenCalledWith(columnsWithoutCheckboxMock);
         expect(autoSizeSpy).not.toHaveBeenCalled();
@@ -339,7 +347,7 @@ describe('GridStateService', () => {
         const autoSizeSpy = vi.spyOn(gridStub, 'autosizeColumns');
         const pubSubSpy = vi.spyOn(mockPubSub, 'publish');
 
-        service.changeColumnsArrangement(presetColumnsMock, false, true);
+        service.applyColumnLayout(presetColumnsMock, false, true);
 
         expect(setColsSpy).toHaveBeenCalledWith(columnsWithoutCheckboxMock);
         expect(autoSizeSpy).not.toHaveBeenCalled();
@@ -355,7 +363,7 @@ describe('GridStateService', () => {
           { columnId: 'field3' },
         ] as CurrentColumn[];
 
-        service.changeColumnsArrangement(presetColumnsMock, false);
+        service.applyColumnLayout(presetColumnsMock, false);
 
         expect(setColsSpy).toHaveBeenCalledWith(columnsWithoutCheckboxMock);
         expect(autoSizeSpy).not.toHaveBeenCalled();
@@ -377,7 +385,7 @@ describe('GridStateService', () => {
           { columnId: 'field3' },
         ] as CurrentColumn[];
 
-        service.changeColumnsArrangement(presetColumnsMock, false);
+        service.applyColumnLayout(presetColumnsMock, false);
 
         expect(setColsSpy).toHaveBeenCalledWith([
           {
@@ -419,7 +427,7 @@ describe('GridStateService', () => {
         vi.spyOn(gridStub, 'getColumns').mockReturnValue(allColumnsMock);
         const setColsSpy = vi.spyOn(gridStub, 'setColumns');
 
-        service.changeColumnsArrangement(presetColumnsMock, false);
+        service.applyColumnLayout(presetColumnsMock, false);
 
         const setColumnsArg = setColsSpy.mock.calls[0][0];
         expect(setColumnsArg).toEqual(expect.arrayContaining([expect.objectContaining({ id: '_checkbox_selector', field: '_checkbox_selector' })]));
@@ -436,7 +444,7 @@ describe('GridStateService', () => {
         vi.spyOn(gridStub, 'getColumns').mockReturnValue(allColumnsMock);
         const setColsSpy = vi.spyOn(gridStub, 'setColumns');
 
-        service.changeColumnsArrangement(presetColumnsMock, false);
+        service.applyColumnLayout(presetColumnsMock, false);
 
         const setColumnsArg = setColsSpy.mock.calls[0][0];
         expect(setColumnsArg).toEqual(expect.arrayContaining([expect.objectContaining({ id: '_detail_selector', field: '_detail_selector' })]));
@@ -453,7 +461,7 @@ describe('GridStateService', () => {
         vi.spyOn(gridStub, 'getColumns').mockReturnValue(allColumnsMock);
         const setColsSpy = vi.spyOn(gridStub, 'setColumns');
 
-        service.changeColumnsArrangement(presetColumnsMock, false);
+        service.applyColumnLayout(presetColumnsMock, false);
 
         const setColumnsArg = setColsSpy.mock.calls[0][0];
         expect(setColumnsArg).toEqual(expect.arrayContaining([expect.objectContaining({ id: '_move', field: '_move' })]));
@@ -472,7 +480,7 @@ describe('GridStateService', () => {
         vi.spyOn(gridStub, 'getColumns').mockReturnValue(allColumnsMock);
         const setColsSpy = vi.spyOn(gridStub, 'setColumns');
 
-        service.changeColumnsArrangement(presetColumnsMock, false);
+        service.applyColumnLayout(presetColumnsMock, false);
 
         const setColumnsArg = setColsSpy.mock.calls[0][0];
         expect(setColumnsArg).toEqual(
@@ -500,7 +508,7 @@ describe('GridStateService', () => {
         vi.spyOn(gridStub, 'getColumns').mockReturnValue(allColumnsMock);
         const setColsSpy = vi.spyOn(gridStub, 'setColumns');
 
-        service.changeColumnsArrangement(presetColumnsMock, false);
+        service.applyColumnLayout(presetColumnsMock, false);
 
         const setColumnsArg = setColsSpy.mock.calls[0][0];
         expect(setColumnsArg).toEqual(

diff --git a/packages/common/src/services/gridState.service.ts b/packages/common/src/services/gridState.service.ts
@@ -92,27 +92,29 @@ export class GridStateService {
   }
 
   /**
-   * Dynamically change the arrangement/distribution of the columns Positions/Visibilities and optionally Widths.
-   * For a column to have its visibly as hidden, it has to be part of the original list but excluded from the list provided as argument to be considered a hidden field.
+   * Apply a column layout, including column order, visibility, and optionally widths.
+   * For a column to be hidden, it must be part of the original list but excluded from the list provided as argument.
    * If you are passing columns Width, then you probably don't want to trigger the autosizeColumns (2nd argument to False).
    * We could also resize the columns by their content but be aware that you can only trigger 1 type of resize at a time (either the 2nd argument or the 3rd last argument but not both at same time)
    * The resize by content could be called by the 3rd argument OR simply by enabling `enableAutoResizeColumnsByCellContent` but again this will only get executed when the 2nd argument is set to false.
    * @param {Array<Column>} definedColumns - defined columns
    * @param {Boolean} triggerAutoSizeColumns - True by default, do we also want to call the "autosizeColumns()" method to make the columns fit in the grid?
    * @param {Boolean} triggerColumnsFullResizeByContent - False by default, do we also want to call full columns resize by their content?
    */
-  changeColumnsArrangement(
-    definedColumns: CurrentColumn[],
-    triggerAutoSizeColumns = true,
-    triggerColumnsFullResizeByContent = false
-  ): void {
+  applyColumnLayout(definedColumns: CurrentColumn[], triggerAutoSizeColumns = true, triggerColumnsFullResizeByContent = false): void {
     if (Array.isArray(definedColumns) && definedColumns.length > 0) {
       const newArrangedColumns: Column[] = this.getAssociatedGridColumns(this._grid, definedColumns);
 
       this.updateColumnDefinitionsList(newArrangedColumns, triggerAutoSizeColumns, triggerColumnsFullResizeByContent);
     }
   }
 
+  /** @deprecated @use `applyColumnLayout()` instead. This alias will be removed in v11. */
+  // prettier-ignore
+  changeColumnsArrangement(definedColumns: CurrentColumn[], triggerAutoSizeColumns = true, triggerColumnsFullResizeByContent = false): void {
+    this.applyColumnLayout(definedColumns, triggerAutoSizeColumns, triggerColumnsFullResizeByContent);
+  }
+
   /** Prepare and load all SlickGrid editors, if an async editor is found then we'll also execute it. */
   loadSlickGridEditors(columns: Column[]): Column[] {
     if (columns.some((col) => `${col.id}`.includes('.'))) {
@@ -597,7 +599,7 @@ export class GridStateService {
    * Add certain column(s), when the feature is/are enabled, to an output column definitions array (by reference).
    * Basically some features (for example: Row Selection, Row Detail, Row Move) will be added as column(s) dynamically and internally by the lib,
    * we just ask the developer to enable the feature, via flags, and internally the lib will create the necessary column.
-   * So specifically for these column(s) and feature(s), we need to re-add them internally when the user calls the `changeColumnsArrangement()` method.
+   * So specifically for these column(s) and feature(s), we need to re-add them internally when the user calls the `applyColumnLayout()` method.
    * @param {Array<Object>} dynamicAddonColumnByIndexPositionList - array of plugin columnId and columnIndexPosition that will be re-added (if it wasn't already found in the output array) dynamically
    * @param {Array<Column>} fullColumns - full column definitions array that includes every columns (including Row Selection, Row Detail, Row Move when enabled)
    * @param {Array<Column>} newArrangedColumns - output array that will be use to show in the UI (it could have less columns than fullColumnDefinitions array since user might hide some columns)