From 4728f6a9e3fc0036437ef25ec778e893887f0f18 Mon Sep 17 00:00:00 2001
From: Ghislain Beaulac <ghislain.beaulac@se.com>
Date: Fri, 12 Jun 2020 12:29:36 -0400
Subject: [PATCH 1/3] feat(pinning): add "Frozen Columns" to header menu - this
 feature will basically allow the user to freeze all columns until the current
 position of the column header he opened. For example if user is opening
 column 4 header menu and click on "Frozen Columns", it will freeze all 4
 columns on the left.

---
 src/app/examples/grid-colspan.component.html  |  11 +-
 src/app/examples/grid-colspan.component.ts    |  21 ++-
 src/app/examples/grid-frozen.component.html   |  10 ++
 src/app/examples/grid-frozen.component.ts     |  32 +++--
 .../modules/angular-slickgrid/constants.ts    |   2 +
 .../__tests__/gridMenuExtension.spec.ts       |  54 ++++++--
 .../__tests__/headerMenuExtension.spec.ts     |  66 ++++++++-
 .../extensions/columnPickerExtension.ts       |   2 +-
 .../extensions/gridMenuExtension.ts           |  23 ++++
 .../extensions/headerMenuExtension.ts         |  31 +++++
 .../angular-slickgrid/global-grid-options.ts  |   4 +
 .../models/gridMenu.interface.ts              |   7 +-
 .../models/headerMenu.interface.ts            |  12 ++
 .../models/locale.interface.ts                |  12 +-
 .../models/slickGrid.interface.ts             |   1 +
 .../groupingAndColspan.service.spec.ts        |  18 +++
 .../services/groupingAndColspan.service.ts    |   9 +-
 .../styles/material-svg-icons.scss            |  12 ++
 src/assets/i18n/en.json                       |   2 +
 src/assets/i18n/fr.json                       |   2 +
 test/cypress/integration/example15.spec.js    | 125 ++++++++++++++++++
 test/cypress/integration/example20.spec.js    | 103 +++++++++++++++
 22 files changed, 519 insertions(+), 40 deletions(-)
 create mode 100644 test/cypress/integration/example15.spec.js
 create mode 100644 test/cypress/integration/example20.spec.js

diff --git a/src/app/examples/grid-colspan.component.html b/src/app/examples/grid-colspan.component.html
index e57c4519d..47842fa49 100644
--- a/src/app/examples/grid-colspan.component.html
+++ b/src/app/examples/grid-colspan.component.html
@@ -14,11 +14,20 @@ <h3>Grid 1 <small>(with Header Grouping &amp; Colspan)</small></h3>
   <hr />
 
   <h3>Grid 2 <small>(with Header Grouping &amp; Frozen/Pinned Columns)</small></h3>
+  <div class="col-sm 12">
+    <button class="btn btn-default btn-sm" (click)="setFrozenColumns2(-1)" data-test="remove-frozen-column-button">
+      <i class="fa fa-times fa-lg"></i> Remove Frozen Columns
+    </button>
+    <button class="btn btn-default btn-sm" (click)="setFrozenColumns2(2)" data-test="set-3frozen-columns">
+      <i class="fa fa-thumb-tack fa-lg"></i> Set 3 Frozen Columns
+    </button>
+  </div>
   <angular-slickgrid gridId="grid2"
                      [columnDefinitions]="columnDefinitions2"
                      [gridOptions]="gridOptions2"
                      [dataset]="dataset2"
                      gridHeight="275"
-                     gridWidth="800">
+                     gridWidth="800"
+                     (onAngularGridCreated)="angularGridReady2($event)">
   </angular-slickgrid>
 </div>
diff --git a/src/app/examples/grid-colspan.component.ts b/src/app/examples/grid-colspan.component.ts
index bc6c14203..99c594b25 100644
--- a/src/app/examples/grid-colspan.component.ts
+++ b/src/app/examples/grid-colspan.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { Column, FieldType, GridOption } from './../modules/angular-slickgrid';
+import { Column, FieldType, GridOption, AngularGridInstance } from './../modules/angular-slickgrid';
 
 @Component({
   templateUrl: './grid-colspan.component.html',
@@ -18,6 +18,8 @@ export class GridColspanComponent implements OnInit {
   </ul>
   `;
 
+  angularGrid2: AngularGridInstance;
+  gridObj2: any;
   columnDefinitions1: Column[];
   columnDefinitions2: Column[];
   gridOptions1: GridOption;
@@ -30,6 +32,11 @@ export class GridColspanComponent implements OnInit {
     this.prepareGrid2();
   }
 
+  angularGridReady2(angularGrid: AngularGridInstance) {
+    this.angularGrid2 = angularGrid;
+    this.gridObj2 = angularGrid.slickGrid;
+  }
+
   prepareGrid1() {
     this.columnDefinitions1 = [
       { id: 'title', name: 'Title', field: 'title', sortable: true, columnGroup: 'Common Factor' },
@@ -49,7 +56,7 @@ export class GridColspanComponent implements OnInit {
       showPreHeaderPanel: true,
       preHeaderPanelHeight: 28,
       explicitInitialization: true,
-      colspanCallback: this.renderDifferentColspan
+      colspanCallback: this.renderDifferentColspan,
     };
 
     this.dataset1 = this.getData(500);
@@ -57,6 +64,7 @@ export class GridColspanComponent implements OnInit {
 
   prepareGrid2() {
     this.columnDefinitions2 = [
+      { id: 'sel', name: '#', field: 'num', behavior: 'select', cssClass: 'cell-selection', width: 40, resizable: false, selectable: false },
       { id: 'title', name: 'Title', field: 'title', sortable: true, columnGroup: 'Common Factor' },
       { id: 'duration', name: 'Duration', field: 'duration', columnGroup: 'Common Factor' },
       { id: 'start', name: 'Start', field: 'start', columnGroup: 'Period' },
@@ -73,7 +81,9 @@ export class GridColspanComponent implements OnInit {
       showPreHeaderPanel: true,
       preHeaderPanelHeight: 25,
       explicitInitialization: true,
-      frozenColumn: 1,
+      frozenColumn: 2,
+      gridMenu: { hideClearFrozenColumnsCommand: false },
+      headerMenu: { hideFreezeColumnsCommand: false }
     };
 
     this.dataset2 = this.getData(500);
@@ -97,6 +107,11 @@ export class GridColspanComponent implements OnInit {
     return mockDataset;
   }
 
+  setFrozenColumns2(frozenCols: number) {
+    this.gridObj2.setOptions({ frozenColumn: frozenCols, alwaysShowVerticalScroll: false });
+    this.gridOptions2 = this.gridObj2.getOptions();
+  }
+
   /**
    * A callback to render different row column span
    * Your callback will always have the "item" argument which you can use to decide on the colspan
diff --git a/src/app/examples/grid-frozen.component.html b/src/app/examples/grid-frozen.component.html
index 83b8d3224..0c8bd8370 100644
--- a/src/app/examples/grid-frozen.component.html
+++ b/src/app/examples/grid-frozen.component.html
@@ -19,6 +19,16 @@ <h2>{{title}}</h2>
         Set
       </button>
     </span>
+  </div>
+
+  <div class="row col-sm-12">
+    <button class="btn btn-default btn-sm" (click)="setFrozenColumns(-1)" data-test="remove-frozen-column-button">
+      <i class="fa fa-times fa-lg"></i> Remove Frozen Columns
+    </button>
+    <button class="btn btn-default btn-sm" (click)="setFrozenColumns(2)" data-test="set-3frozen-columns">
+      <i class="fa fa-thumb-tack fa-lg"></i> Set 3 Frozen Columns
+    </button>
+
     <span style="margin-left: 15px">
       <button class="btn btn-default btn-sm" (click)="toggleFrozenBottomRows()">
         <i class="fa fa-random fa-lg"></i> Toggle Pinned Rows
diff --git a/src/app/examples/grid-frozen.component.ts b/src/app/examples/grid-frozen.component.ts
index 8d4c98136..7d763d96b 100644
--- a/src/app/examples/grid-frozen.component.ts
+++ b/src/app/examples/grid-frozen.component.ts
@@ -77,14 +77,14 @@ export class GridFrozenComponent implements OnInit {
       {
         id: 'start', name: 'Start', field: 'start',
         minWidth: 100, width: 120,
-        filterable: true,
-        sortable: true
+        filterable: true, sortable: true,
+        formatter: Formatters.dateIso
       },
       {
         id: 'finish', name: 'Finish', field: 'finish',
         minWidth: 100, width: 120,
-        filterable: true,
-        sortable: true
+        filterable: true, sortable: true,
+        formatter: Formatters.dateIso
       },
       {
         id: 'cost', name: 'Cost | Duration', field: 'cost',
@@ -170,25 +170,25 @@ export class GridFrozenComponent implements OnInit {
         sortable: true
       },
       {
-        id: 'title1', name: 'Title1', field: 'title1',
+        id: 'title1', name: 'Title 1', field: 'title1',
         minWidth: 100, width: 120,
         filterable: true,
         sortable: true
       },
       {
-        id: 'title2', name: 'Title2', field: 'title2',
+        id: 'title2', name: 'Title 2', field: 'title2',
         minWidth: 100, width: 120,
         filterable: true,
         sortable: true
       },
       {
-        id: 'title3', name: 'Title3', field: 'title3',
+        id: 'title3', name: 'Title 3', field: 'title3',
         minWidth: 100, width: 120,
         filterable: true,
         sortable: true
       },
       {
-        id: 'title4', name: 'Title4', field: 'title4',
+        id: 'title4', name: 'Title 4', field: 'title4',
         minWidth: 100, width: 120,
         filterable: true,
         sortable: true
@@ -209,6 +209,9 @@ export class GridFrozenComponent implements OnInit {
       frozenColumn: this.frozenColumnCount,
       frozenRow: this.frozenRowCount,
       // frozenBottom: true, // if you want to freeze the bottom instead of the top, you can enable this property
+
+      gridMenu: { hideClearFrozenColumnsCommand: false },
+      headerMenu: { hideFreezeColumnsCommand: false }
     };
 
     // mock a dataset
@@ -219,18 +222,14 @@ export class GridFrozenComponent implements OnInit {
     // Set up some test columns.
     const mockDataset = [];
     for (let i = 0; i < 500; i++) {
-      const randomYear = 2000 + Math.floor(Math.random() * 10);
-      const randomMonth = Math.floor(Math.random() * 11);
-      const randomDay = Math.floor((Math.random() * 29));
-
       mockDataset[i] = {
         id: i,
         title: 'Task ' + i,
         cost: (i % 33 === 0) ? null : Math.random() * 10000,
         duration: i % 8 ? (Math.round(Math.random() * 100) + '') : null,
         percentComplete: Math.round(Math.random() * 100),
-        start: new Date(randomYear, randomMonth, randomDay),
-        finish: new Date(randomYear, (randomMonth + 1), randomDay),
+        start: new Date(2009, 0, 1),
+        finish: new Date(2009, 4, 5),
         effortDriven: (i % 5 === 0),
         title1: `Some Text ${Math.round(Math.random() * 25)}`,
         title2: `Some Text ${Math.round(Math.random() * 25)}`,
@@ -276,6 +275,11 @@ export class GridFrozenComponent implements OnInit {
     alert(args.validationResults.msg);
   }
 
+  setFrozenColumns(frozenCols: number) {
+    this.gridObj.setOptions({ frozenColumn: frozenCols, alwaysShowVerticalScroll: false });
+    this.gridOptions = this.gridObj.getOptions();
+  }
+
   /** toggle dynamically, through slickgrid "setOptions()" the top/bottom pinned location */
   toggleFrozenBottomRows() {
     if (this.gridObj && this.gridObj.setOptions) {
diff --git a/src/app/modules/angular-slickgrid/constants.ts b/src/app/modules/angular-slickgrid/constants.ts
index 131b3d884..1d60f224f 100644
--- a/src/app/modules/angular-slickgrid/constants.ts
+++ b/src/app/modules/angular-slickgrid/constants.ts
@@ -7,6 +7,7 @@ export class Constants {
     TEXT_CLEAR_ALL_FILTERS: 'Clear all Filters',
     TEXT_CLEAR_ALL_GROUPING: 'Clear all Grouping',
     TEXT_CLEAR_ALL_SORTING: 'Clear all Sorting',
+    TEXT_CLEAR_FROZEN_COLUMNS: 'Clear Frozen Columns',
     TEXT_COLLAPSE_ALL_GROUPS: 'Collapse all Groups',
     TEXT_CONTAINS: 'Contains',
     TEXT_COLUMNS: 'Columns',
@@ -19,6 +20,7 @@ export class Constants {
     TEXT_EXPORT_TO_TEXT_FORMAT: 'Export in Text format (Tab delimited)',
     TEXT_EXPORT_TO_EXCEL: 'Export to Excel',
     TEXT_FORCE_FIT_COLUMNS: 'Force fit columns',
+    TEXT_FREEZE_COLUMNS: 'Freeze Columns',
     TEXT_GROUP_BY: 'Group By',
     TEXT_HIDE_COLUMN: 'Hide Column',
     TEXT_ITEMS: 'items',
diff --git a/src/app/modules/angular-slickgrid/extensions/__tests__/gridMenuExtension.spec.ts b/src/app/modules/angular-slickgrid/extensions/__tests__/gridMenuExtension.spec.ts
index 6c3b76b16..06c36d4cb 100644
--- a/src/app/modules/angular-slickgrid/extensions/__tests__/gridMenuExtension.spec.ts
+++ b/src/app/modules/angular-slickgrid/extensions/__tests__/gridMenuExtension.spec.ts
@@ -42,12 +42,13 @@ const gridStub = {
   getUID: () => gridUid,
   registerPlugin: jest.fn(),
   setColumns: jest.fn(),
+  setOptions: jest.fn(),
   setHeaderRowVisibility: jest.fn(),
   setTopPanelVisibility: jest.fn(),
   setPreHeaderPanelVisibility: jest.fn(),
 };
 
-const mockAddon = jest.fn().mockImplementation(() => ({
+const mockGridMenuAddon = {
   init: jest.fn(),
   destroy: jest.fn(),
   showGridMenu: jest.fn(),
@@ -57,7 +58,8 @@ const mockAddon = jest.fn().mockImplementation(() => ({
   onAfterMenuShow: new Slick.Event(),
   onBeforeMenuShow: new Slick.Event(),
   onMenuClose: new Slick.Event(),
-}));
+};
+const mockAddon = jest.fn().mockImplementation(() => mockGridMenuAddon);
 
 jest.mock('slickgrid/controls/slick.gridmenu', () => mockAddon);
 Slick.Controls = {
@@ -93,6 +95,7 @@ describe('gridMenuExtension', () => {
     gridMenu: {
       customItems: [],
       hideClearAllFiltersCommand: false,
+      hideClearFrozenColumnsCommand: true,
       hideForceFitButton: false,
       hideSyncResizeButton: true,
       onExtensionRegistered: jest.fn(),
@@ -135,6 +138,7 @@ describe('gridMenuExtension', () => {
         TITLE: 'Titre',
         CLEAR_ALL_FILTERS: 'Supprimer tous les filtres',
         CLEAR_ALL_SORTING: 'Supprimer tous les tris',
+        CLEAR_FROZEN_COLUMNS: 'Libérer les colonnes gelées',
         EXPORT_TO_CSV: 'Exporter en format CSV',
         EXPORT_TO_EXCEL: 'Exporter vers Excel',
         EXPORT_TO_TAB_DELIMITED: 'Exporter en format texte (délimité par tabulation)',
@@ -362,6 +366,16 @@ describe('gridMenuExtension', () => {
         expect(SharedService.prototype.gridOptions.gridMenu.customItems).toEqual([]);
       });
 
+      it('should expect menu related to "Clear Frozen Columns"', () => {
+        const copyGridOptionsMock = { ...gridOptionsMock, gridMenu: { hideClearFrozenColumnsCommand: false, } } as unknown as GridOption;
+        jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
+        extension.register();
+        extension.register(); // calling 2x register to make sure it doesn't duplicate commands
+        expect(SharedService.prototype.gridOptions.gridMenu.customItems).toEqual([
+          { iconCssClass: 'fa fa-times', title: 'Libérer les colonnes gelées', disabled: false, command: 'clear-frozen-columns', positionOrder: 49 },
+        ]);
+      });
+
       it('should expect all menu related to Filter when "enableFilering" is set', () => {
         const copyGridOptionsMock = { ...gridOptionsMock, enableFiltering: true, showHeaderRow: true, } as unknown as GridOption;
         jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
@@ -375,7 +389,7 @@ describe('gridMenuExtension', () => {
       });
 
       it('should have only 1 menu "clear-filter" when all other menus are defined as hidden & when "enableFilering" is set', () => {
-        const copyGridOptionsMock = { ...gridOptionsMock, enableFiltering: true, showHeaderRow: true, gridMenu: { hideToggleFilterCommand: true, hideRefreshDatasetCommand: true } } as unknown as GridOption;
+        const copyGridOptionsMock = { ...gridOptionsMock, enableFiltering: true, showHeaderRow: true, gridMenu: { hideClearFrozenColumnsCommand: true, hideToggleFilterCommand: true, hideRefreshDatasetCommand: true } } as unknown as GridOption;
         jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
         extension.register();
         extension.register(); // calling 2x register to make sure it doesn't duplicate commands
@@ -385,7 +399,7 @@ describe('gridMenuExtension', () => {
       });
 
       it('should have only 1 menu "toggle-filter" when all other menus are defined as hidden & when "enableFilering" is set', () => {
-        const copyGridOptionsMock = { ...gridOptionsMock, enableFiltering: true, showHeaderRow: true, gridMenu: { hideClearAllFiltersCommand: true, hideRefreshDatasetCommand: true } } as unknown as GridOption;
+        const copyGridOptionsMock = { ...gridOptionsMock, enableFiltering: true, showHeaderRow: true, gridMenu: { hideClearFrozenColumnsCommand: true, hideClearAllFiltersCommand: true, hideRefreshDatasetCommand: true } } as unknown as GridOption;
         jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
         extension.register();
         extension.register(); // calling 2x register to make sure it doesn't duplicate commands
@@ -395,7 +409,7 @@ describe('gridMenuExtension', () => {
       });
 
       it('should have only 1 menu "refresh-dataset" when all other menus are defined as hidden & when "enableFilering" is set', () => {
-        const copyGridOptionsMock = { ...gridOptionsMock, enableFiltering: true, showHeaderRow: true, gridMenu: { hideClearAllFiltersCommand: true, hideToggleFilterCommand: true } } as unknown as GridOption;
+        const copyGridOptionsMock = { ...gridOptionsMock, enableFiltering: true, showHeaderRow: true, gridMenu: { hideClearFrozenColumnsCommand: true, hideClearAllFiltersCommand: true, hideToggleFilterCommand: true } } as unknown as GridOption;
         jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
         extension.register();
         extension.register(); // calling 2x register to make sure it doesn't duplicate commands
@@ -415,7 +429,7 @@ describe('gridMenuExtension', () => {
       });
 
       it('should not have the "toggle-preheader" menu command when "showPreHeaderPanel" and "hideTogglePreHeaderCommand" are set', () => {
-        const copyGridOptionsMock = { ...gridOptionsMock, showPreHeaderPanel: true, gridMenu: { hideTogglePreHeaderCommand: true } } as unknown as GridOption;
+        const copyGridOptionsMock = { ...gridOptionsMock, showPreHeaderPanel: true, gridMenu: { hideClearFrozenColumnsCommand: true, hideTogglePreHeaderCommand: true } } as unknown as GridOption;
         jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
         extension.register();
         expect(SharedService.prototype.gridOptions.gridMenu.customItems).toEqual([]);
@@ -432,14 +446,14 @@ describe('gridMenuExtension', () => {
       });
 
       it('should not have the "clear-sorting" menu command when "enableSorting" and "hideClearAllSortingCommand" are set', () => {
-        const copyGridOptionsMock = { ...gridOptionsMock, enableSorting: true, gridMenu: { hideClearAllSortingCommand: true } } as unknown as GridOption;
+        const copyGridOptionsMock = { ...gridOptionsMock, enableSorting: true, gridMenu: { hideClearFrozenColumnsCommand: true, hideClearAllSortingCommand: true } } as unknown as GridOption;
         jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
         extension.register();
         expect(SharedService.prototype.gridOptions.gridMenu.customItems).toEqual([]);
       });
 
       it('should have the "export-csv" menu command when "enableExport" is set', () => {
-        const copyGridOptionsMock = { ...gridOptionsMock, enableExport: true, gridMenu: { hideExportExcelCommand: true, hideExportTextDelimitedCommand: true } } as unknown as GridOption;
+        const copyGridOptionsMock = { ...gridOptionsMock, enableExport: true, gridMenu: { hideClearFrozenColumnsCommand: true, hideExportExcelCommand: true, hideExportTextDelimitedCommand: true } } as unknown as GridOption;
         jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
         extension.register();
         extension.register(); // calling 2x register to make sure it doesn't duplicate commands
@@ -449,14 +463,14 @@ describe('gridMenuExtension', () => {
       });
 
       it('should not have the "export-csv" menu command when "enableExport" and "hideExportCsvCommand" are set', () => {
-        const copyGridOptionsMock = { ...gridOptionsMock, enableExport: true, gridMenu: { hideExportExcelCommand: true, hideExportCsvCommand: true, hideExportTextDelimitedCommand: true } } as unknown as GridOption;
+        const copyGridOptionsMock = { ...gridOptionsMock, enableExport: true, gridMenu: { hideClearFrozenColumnsCommand: true, hideExportExcelCommand: true, hideExportCsvCommand: true, hideExportTextDelimitedCommand: true } } as unknown as GridOption;
         jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
         extension.register();
         expect(SharedService.prototype.gridOptions.gridMenu.customItems).toEqual([]);
       });
 
       it('should have the "export-excel" menu command when "enableExport" is set', () => {
-        const copyGridOptionsMock = { ...gridOptionsMock, enableExcelExport: true, enableExport: false, gridMenu: { hideExportCsvCommand: true, hideExportExcelCommand: false } } as unknown as GridOption;
+        const copyGridOptionsMock = { ...gridOptionsMock, enableExcelExport: true, enableExport: false, gridMenu: { hideClearFrozenColumnsCommand: true, hideExportCsvCommand: true, hideExportExcelCommand: false } } as unknown as GridOption;
         jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
         extension.register();
         extension.register(); // calling 2x register to make sure it doesn't duplicate commands
@@ -466,7 +480,7 @@ describe('gridMenuExtension', () => {
       });
 
       it('should have the "export-text-delimited" menu command when "enableExport" is set', () => {
-        const copyGridOptionsMock = { ...gridOptionsMock, enableExport: true, gridMenu: { hideExportCsvCommand: true, hideExportExcelCommand: true } } as unknown as GridOption;
+        const copyGridOptionsMock = { ...gridOptionsMock, enableExport: true, gridMenu: { hideClearFrozenColumnsCommand: true, hideExportCsvCommand: true, hideExportExcelCommand: true } } as unknown as GridOption;
         jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
         extension.register();
         extension.register(); // calling 2x register to make sure it doesn't duplicate commands
@@ -476,7 +490,7 @@ describe('gridMenuExtension', () => {
       });
 
       it('should not have the "export-text-delimited" menu command when "enableExport" and "hideExportCsvCommand" are set', () => {
-        const copyGridOptionsMock = { ...gridOptionsMock, enableExport: true, gridMenu: { hideExportExcelCommand: true, hideExportCsvCommand: true, hideExportTextDelimitedCommand: true } } as unknown as GridOption;
+        const copyGridOptionsMock = { ...gridOptionsMock, enableExport: true, gridMenu: { hideClearFrozenColumnsCommand: true, hideExportExcelCommand: true, hideExportCsvCommand: true, hideExportTextDelimitedCommand: true } } as unknown as GridOption;
         jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
         extension.register();
         expect(SharedService.prototype.gridOptions.gridMenu.customItems).toEqual([]);
@@ -498,6 +512,7 @@ describe('gridMenuExtension', () => {
           enableExport: true,
           gridMenu: {
             customItems: customItemsMock,
+            hideClearFrozenColumnsCommand: true,
             hideExportCsvCommand: false,
             hideExportExcelCommand: false,
             hideExportTextDelimitedCommand: true,
@@ -574,6 +589,21 @@ describe('gridMenuExtension', () => {
     });
 
     describe('executeGridMenuInternalCustomCommands method', () => {
+      it('should call "clearFrozenColumns" when the command triggered is "clear-frozen-columns"', () => {
+        const setOptionsSpy = jest.spyOn(gridStub, 'setOptions');
+        const setColumnsSpy = jest.spyOn(gridStub, 'setColumns');
+        const onCommandSpy = jest.spyOn(SharedService.prototype.gridOptions.gridMenu, 'onCommand');
+        jest.spyOn(SharedService.prototype, 'allColumns', 'get').mockReturnValue(columnsMock);
+        jest.spyOn(SharedService.prototype, 'visibleColumns', 'get').mockReturnValue(columnsMock.slice(0, 1));
+
+        const instance = extension.register();
+        instance.onCommand.notify({ grid: gridStub, command: 'clear-frozen-columns' }, new Slick.EventData(), gridStub);
+
+        expect(onCommandSpy).toHaveBeenCalled();
+        expect(setColumnsSpy).toHaveBeenCalled();
+        expect(setOptionsSpy).toHaveBeenCalledWith({ frozenColumn: -1 });
+      });
+
       it('should call "clearFilters" and dataview refresh when the command triggered is "clear-filter"', () => {
         const filterSpy = jest.spyOn(filterServiceStub, 'clearFilters');
         const refreshSpy = jest.spyOn(SharedService.prototype.dataView, 'refresh');
diff --git a/src/app/modules/angular-slickgrid/extensions/__tests__/headerMenuExtension.spec.ts b/src/app/modules/angular-slickgrid/extensions/__tests__/headerMenuExtension.spec.ts
index cfb3bcf79..87e598a70 100644
--- a/src/app/modules/angular-slickgrid/extensions/__tests__/headerMenuExtension.spec.ts
+++ b/src/app/modules/angular-slickgrid/extensions/__tests__/headerMenuExtension.spec.ts
@@ -32,6 +32,7 @@ const gridStub = {
   getOptions: jest.fn(),
   registerPlugin: jest.fn(),
   setColumns: jest.fn(),
+  setOptions: jest.fn(),
   setHeaderRowVisibility: jest.fn(),
   setTopPanelVisibility: jest.fn(),
   setPreHeaderPanelVisibility: jest.fn(),
@@ -72,6 +73,7 @@ describe('headerMenuExtension', () => {
       postProcess: jest.fn(),
     },
     headerMenu: {
+      hideFreezeColumnsCommand: false,
       hideForceFitButton: false,
       hideSyncResizeButton: true,
       onExtensionRegistered: jest.fn(),
@@ -108,6 +110,7 @@ describe('headerMenuExtension', () => {
         COMMANDS: 'Commandes',
         COLUMNS: 'Colonnes',
         FORCE_FIT_COLUMNS: 'Ajustement forcé des colonnes',
+        FREEZE_COLUMNS: 'Geler les colonnes',
         SYNCHRONOUS_RESIZE: 'Redimension synchrone',
         HIDE_COLUMN: 'Cacher la colonne',
         REMOVE_FILTER: 'Supprimer le filtre',
@@ -120,6 +123,7 @@ describe('headerMenuExtension', () => {
         COMMANDS: 'Commands',
         COLUMNS: 'Columns',
         FORCE_FIT_COLUMNS: 'Force fit columns',
+        FREEZE_COLUMNS: 'Freeze Columns',
         SYNCHRONOUS_RESIZE: 'Synchronous resize',
         HIDE_COLUMN: 'Hide Column',
         REMOVE_FILTER: 'Remove Filter',
@@ -163,6 +167,7 @@ describe('headerMenuExtension', () => {
           minWidth: 140,
           hideColumnHideCommand: false,
           hideForceFitButton: false,
+          hideFreezeColumnsCommand: false,
           hideSyncResizeButton: true,
           hideSortCommands: false,
           title: '',
@@ -253,8 +258,21 @@ describe('headerMenuExtension', () => {
         jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(gridOptionsMock);
       });
 
+      it('should have the commands "frozen-columns" and "hide" in the header menu list', () => {
+        const copyGridOptionsMock = { ...gridOptionsMock, headerMenu: { hideFreezeColumnsCommand: false } } as unknown as GridOption;
+        jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
+        extension.register();
+
+        expect(mockColumn.header.menu.items).not.toBeNull();
+        expect(mockColumn.header.menu.items).toEqual([
+          { iconCssClass: 'fa fa-thumb-tack', title: 'Geler les colonnes', command: 'freeze-columns', positionOrder: 48 },
+          { divider: true, command: '', positionOrder: 49 },
+          { iconCssClass: 'fa fa-times', title: 'Cacher la colonne', command: 'hide', positionOrder: 55 }
+        ]);
+      });
+
       it('should have the command "hide-column" in the header menu list', () => {
-        const copyGridOptionsMock = { ...gridOptionsMock, headerMenu: { hideColumnHideCommand: false } } as unknown as GridOption;
+        const copyGridOptionsMock = { ...gridOptionsMock, headerMenu: { hideFreezeColumnsCommand: true, hideColumnHideCommand: false } } as unknown as GridOption;
         jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
         extension.register();
 
@@ -265,7 +283,7 @@ describe('headerMenuExtension', () => {
       });
 
       it('should expect all menu related to Sorting when "enableSorting" is set', () => {
-        const copyGridOptionsMock = { ...gridOptionsMock, enableSorting: true, headerMenu: { hideColumnHideCommand: true } } as unknown as GridOption;
+        const copyGridOptionsMock = { ...gridOptionsMock, enableSorting: true, headerMenu: { hideFreezeColumnsCommand: true, hideColumnHideCommand: true } } as unknown as GridOption;
         jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
 
         extension.register();
@@ -294,12 +312,14 @@ describe('headerMenuExtension', () => {
 
         expect(mockColumn.header.menu.items).not.toBeNull();
         expect(mockColumn.header.menu.items).toEqual([
+          { iconCssClass: 'fa fa-thumb-tack', title: 'Geler les colonnes', command: 'freeze-columns', positionOrder: 48 },
+          { divider: true, command: '', positionOrder: 49 },
           { iconCssClass: 'fa fa-times', title: 'Cacher la colonne', command: 'hide', positionOrder: 55 }
         ]);
       });
 
       it('should expect all menu related to Filtering when "enableFiltering" is set', () => {
-        const copyGridOptionsMock = { ...gridOptionsMock, enableFiltering: true, headerMenu: { hideColumnHideCommand: true } } as unknown as GridOption;
+        const copyGridOptionsMock = { ...gridOptionsMock, enableFiltering: true, headerMenu: { hideFreezeColumnsCommand: true, hideColumnHideCommand: true } } as unknown as GridOption;
         jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
 
         extension.register();
@@ -323,7 +343,15 @@ describe('headerMenuExtension', () => {
         const visibleSpy = jest.spyOn(SharedService.prototype, 'visibleColumns', 'set');
         const updatedColumnsMock = [{
           id: 'field1', field: 'field1', nameKey: 'TITLE', width: 100,
-          header: { menu: { items: [{ command: 'hide', iconCssClass: 'fa fa-times', positionOrder: 55, title: 'Cacher la colonne' }] } }
+          header: {
+            menu: {
+              items: [
+                { iconCssClass: 'fa fa-thumb-tack', title: 'Geler les colonnes', command: 'freeze-columns', positionOrder: 48 },
+                { divider: true, command: '', positionOrder: 49 },
+                { command: 'hide', iconCssClass: 'fa fa-times', positionOrder: 55, title: 'Cacher la colonne' }
+              ]
+            }
+          }
         }] as Column[];
 
         extension.hideColumn(columnsMock[1]);
@@ -340,6 +368,8 @@ describe('headerMenuExtension', () => {
           header: {
             menu: {
               items: [
+                { iconCssClass: 'fa fa-thumb-tack', title: 'Geler les colonnes', command: 'freeze-columns', positionOrder: 48 },
+                { divider: true, command: '', positionOrder: 49 },
                 { iconCssClass: 'fa fa-sort-asc', title: 'Trier par ordre croissant', command: 'sort-asc', positionOrder: 50 },
                 { iconCssClass: 'fa fa-sort-desc', title: 'Trier par ordre décroissant', command: 'sort-desc', positionOrder: 51 },
                 { divider: true, command: '', positionOrder: 52 },
@@ -360,6 +390,8 @@ describe('headerMenuExtension', () => {
           header: {
             menu: {
               items: [
+                { iconCssClass: 'fa fa-thumb-tack', title: 'Freeze Columns', command: 'freeze-columns', positionOrder: 48 },
+                { divider: true, command: '', positionOrder: 49 },
                 { iconCssClass: 'fa fa-sort-asc', title: 'Sort Ascending', command: 'sort-asc', positionOrder: 50 },
                 { iconCssClass: 'fa fa-sort-desc', title: 'Sort Descending', command: 'sort-desc', positionOrder: 51 },
                 { divider: true, command: '', positionOrder: 52 },
@@ -374,6 +406,32 @@ describe('headerMenuExtension', () => {
     });
 
     describe('executeHeaderMenuInternalCommands method', () => {
+      it('should trigger the command "freeze-columns" and grid "setOptions" method to be called with current column position', () => {
+        const setOptionsSpy = jest.spyOn(gridStub, 'setOptions');
+        const setColumnsSpy = jest.spyOn(gridStub, 'setColumns');
+        const onCommandSpy = jest.spyOn(SharedService.prototype.gridOptions.headerMenu, 'onCommand');
+
+        const instance = extension.register();
+        instance.onCommand.notify({ column: columnsMock[0], grid: gridStub, command: 'freeze-columns' }, new Slick.EventData(), gridStub);
+
+        expect(onCommandSpy).toHaveBeenCalled();
+        expect(setOptionsSpy).toHaveBeenCalledWith({ frozenColumn: 0, alwaysShowVerticalScroll: false });
+        expect(setColumnsSpy).toHaveBeenCalled();
+      });
+
+      it('should trigger the command "freeze-columns" and grid "setOptions" method to be called with frozen column of -1 because the column found is not visible', () => {
+        const setOptionsSpy = jest.spyOn(gridStub, 'setOptions');
+        const setColumnsSpy = jest.spyOn(gridStub, 'setColumns');
+        const onCommandSpy = jest.spyOn(SharedService.prototype.gridOptions.headerMenu, 'onCommand');
+
+        const instance = extension.register();
+        instance.onCommand.notify({ column: columnsMock[1], grid: gridStub, command: 'freeze-columns' }, new Slick.EventData(), gridStub);
+
+        expect(onCommandSpy).toHaveBeenCalled();
+        expect(setOptionsSpy).toHaveBeenCalledWith({ frozenColumn: -1, alwaysShowVerticalScroll: false });
+        expect(setColumnsSpy).toHaveBeenCalled();
+      });
+
       it('should trigger the command "hide" and expect the grid "autosizeColumns" method being called', () => {
         const onCommandSpy = jest.spyOn(SharedService.prototype.gridOptions.headerMenu, 'onCommand');
         const autosizeSpy = jest.spyOn(SharedService.prototype.grid, 'autosizeColumns');
diff --git a/src/app/modules/angular-slickgrid/extensions/columnPickerExtension.ts b/src/app/modules/angular-slickgrid/extensions/columnPickerExtension.ts
index b15e78536..b15b4f1af 100644
--- a/src/app/modules/angular-slickgrid/extensions/columnPickerExtension.ts
+++ b/src/app/modules/angular-slickgrid/extensions/columnPickerExtension.ts
@@ -56,7 +56,7 @@ export class ColumnPickerExtension implements Extension {
           if (this.sharedService.gridOptions.columnPicker && typeof this.sharedService.gridOptions.columnPicker.onColumnsChanged === 'function') {
             this.sharedService.gridOptions.columnPicker.onColumnsChanged(e, args);
           }
-          if (args && Array.isArray(args.columns) && args.columns.length > this.sharedService.visibleColumns.length) {
+          if (args && Array.isArray(args.columns) && args.columns.length !== this.sharedService.visibleColumns.length) {
             this.sharedService.visibleColumns = args.columns;
           }
         });
diff --git a/src/app/modules/angular-slickgrid/extensions/gridMenuExtension.ts b/src/app/modules/angular-slickgrid/extensions/gridMenuExtension.ts
index f3442586c..169c264a4 100644
--- a/src/app/modules/angular-slickgrid/extensions/gridMenuExtension.ts
+++ b/src/app/modules/angular-slickgrid/extensions/gridMenuExtension.ts
@@ -201,6 +201,22 @@ export class GridMenuExtension implements Extension {
     const gridOptions = this.sharedService.gridOptions;
     const translationPrefix = getTranslationPrefix(gridOptions);
 
+    // show grid menu: Clear Frozen Columns
+    if (this.sharedService.gridOptions && this.sharedService.gridOptions.gridMenu && !this.sharedService.gridOptions.gridMenu.hideClearFrozenColumnsCommand) {
+      const commandName = 'clear-frozen-columns';
+      if (!originalCustomItems.find((item: GridMenuItem) => item.hasOwnProperty('command') && item.command === commandName)) {
+        gridMenuCustomItems.push(
+          {
+            iconCssClass: this.sharedService.gridOptions.gridMenu.iconClearFrozenColumnsCommand || 'fa fa-times',
+            title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant(`${translationPrefix}CLEAR_FROZEN_COLUMNS`) : this._locales && this._locales.TEXT_CLEAR_FROZEN_COLUMNS,
+            disabled: false,
+            command: commandName,
+            positionOrder: 49
+          }
+        );
+      }
+    }
+
     if (this.sharedService.gridOptions && (this.sharedService.gridOptions.enableFiltering && !this.sharedService.hideHeaderRowAfterPageLoad)) {
       // show grid menu: Clear all Filters
       if (this.sharedService.gridOptions && this.sharedService.gridOptions.gridMenu && !this.sharedService.gridOptions.gridMenu.hideClearAllFiltersCommand) {
@@ -352,6 +368,13 @@ export class GridMenuExtension implements Extension {
   private executeGridMenuInternalCustomCommands(e: Event, args: GridMenuItem) {
     if (args && args.command) {
       switch (args.command) {
+        case 'clear-frozen-columns':
+          const visibleColumns = [...this.sharedService.visibleColumns];
+          this.sharedService.grid.setOptions({ frozenColumn: -1 });
+          if (Array.isArray(visibleColumns) && Array.isArray(this.sharedService.allColumns) && visibleColumns.length !== this.sharedService.allColumns.length) {
+            this.sharedService.grid.setColumns(visibleColumns);
+          }
+          break;
         case 'clear-filter':
           this.filterService.clearFilters();
           this.sharedService.dataView.refresh();
diff --git a/src/app/modules/angular-slickgrid/extensions/headerMenuExtension.ts b/src/app/modules/angular-slickgrid/extensions/headerMenuExtension.ts
index 167bad542..5f6a891c3 100644
--- a/src/app/modules/angular-slickgrid/extensions/headerMenuExtension.ts
+++ b/src/app/modules/angular-slickgrid/extensions/headerMenuExtension.ts
@@ -133,6 +133,23 @@ export class HeaderMenuExtension implements Extension {
 
           const columnHeaderMenuItems: Array<MenuCommandItem | 'divider'> = columnDef && columnDef.header && columnDef.header.menu && columnDef.header.menu.items || [];
 
+          // Freeze Column (pinning)
+          if (headerMenuOptions && !headerMenuOptions.hideFreezeColumnsCommand) {
+            if (columnHeaderMenuItems.filter((item: MenuCommandItem) => item.hasOwnProperty('command') && item.command === 'freeze-columns').length === 0) {
+              columnHeaderMenuItems.push({
+                iconCssClass: headerMenuOptions.iconFreezeColumns || 'fa fa-thumb-tack',
+                title: options.enableTranslate ? this.translate.instant(`${translationPrefix}FREEZE_COLUMNS`) : this._locales && this._locales.TEXT_FREEZE_COLUMNS,
+                command: 'freeze-columns',
+                positionOrder: 48
+              });
+            }
+
+            // add a divider (separator) between the top freeze columns commands and the rest of the commands
+            if (columnHeaderMenuItems.filter((item: MenuCommandItem) => item.positionOrder === 49).length === 0) {
+              columnHeaderMenuItems.push({ divider: true, command: '', positionOrder: 49 });
+            }
+          }
+
           // Sorting Commands
           if (options.enableSorting && columnDef.sortable && headerMenuOptions && !headerMenuOptions.hideSortCommands) {
             if (columnHeaderMenuItems.filter((item: MenuCommandItem) => item.hasOwnProperty('command') && item.command === 'sort-asc').length === 0) {
@@ -254,6 +271,9 @@ export class HeaderMenuExtension implements Extension {
                 case 'clear-sort':
                   item.title = this.translate.instant(`${translationPrefix}REMOVE_SORT`) || this._locales && this._locales.TEXT_REMOVE_SORT;
                   break;
+                case 'freeze-columns':
+                  item.title = this.translate.instant(`${translationPrefix}FREEZE_COLUMNS`) || this._locales && this._locales.TEXT_FREEZE_COLUMNS;
+                  break;
                 case 'sort-asc':
                   item.title = this.translate.instant(`${translationPrefix}SORT_ASCENDING`) || this._locales && this._locales.TEXT_SORT_ASCENDING;
                   break;
@@ -331,6 +351,17 @@ export class HeaderMenuExtension implements Extension {
         case 'clear-sort':
           this.clearColumnSort(event, args);
           break;
+        case 'freeze-columns':
+          const visibleColumns = [...this.sharedService.visibleColumns];
+          const columnPosition = visibleColumns.findIndex((col) => col.id === args.column.id);
+          this.sharedService.grid.setOptions({ frozenColumn: columnPosition, alwaysShowVerticalScroll: false });
+
+          // to freeze columns, we need to take only the visible columns and we also need to use setColumns() when some of them are hidden
+          // to make sure that we only use the visible columns, not doing this would show back some of the hidden columns
+          if (Array.isArray(visibleColumns) && Array.isArray(this.sharedService.allColumns) && visibleColumns.length !== this.sharedService.allColumns.length) {
+            this.sharedService.grid.setColumns(visibleColumns);
+          }
+          break;
         case 'sort-asc':
         case 'sort-desc':
           const isSortingAsc = (args.command === 'sort-asc');
diff --git a/src/app/modules/angular-slickgrid/global-grid-options.ts b/src/app/modules/angular-slickgrid/global-grid-options.ts
index 0872d9029..1060f7469 100644
--- a/src/app/modules/angular-slickgrid/global-grid-options.ts
+++ b/src/app/modules/angular-slickgrid/global-grid-options.ts
@@ -115,6 +115,7 @@ export const GlobalGridOptions: Partial<GridOption> = {
   gridMenu: {
     hideClearAllFiltersCommand: false,
     hideClearAllSortingCommand: false,
+    hideClearFrozenColumnsCommand: true, // opt-in command
     hideExportCsvCommand: false,
     hideExportExcelCommand: false,
     hideExportTextDelimitedCommand: true,
@@ -126,6 +127,7 @@ export const GlobalGridOptions: Partial<GridOption> = {
     iconCssClass: 'fa fa-bars',
     iconClearAllFiltersCommand: 'fa fa-filter text-danger',
     iconClearAllSortingCommand: 'fa fa-unsorted text-danger',
+    iconClearFrozenColumnsCommand: 'fa fa-times',
     iconExportCsvCommand: 'fa fa-download',
     iconExportExcelCommand: 'fa fa-file-excel-o text-success',
     iconExportTextDelimitedCommand: 'fa fa-download',
@@ -150,12 +152,14 @@ export const GlobalGridOptions: Partial<GridOption> = {
     minWidth: 140,
     iconClearFilterCommand: 'fa fa-filter text-danger',
     iconClearSortCommand: 'fa fa-unsorted',
+    iconFreezeColumns: 'fa fa-thumb-tack',
     iconSortAscCommand: 'fa fa-sort-amount-asc',
     iconSortDescCommand: 'fa fa-sort-amount-desc',
     iconColumnHideCommand: 'fa fa-times',
     hideColumnHideCommand: false,
     hideClearFilterCommand: false,
     hideClearSortCommand: false,
+    hideFreezeColumnsCommand: true, // opt-in command
     hideSortCommands: false
   },
   headerRowHeight: 35,
diff --git a/src/app/modules/angular-slickgrid/models/gridMenu.interface.ts b/src/app/modules/angular-slickgrid/models/gridMenu.interface.ts
index bff81413c..2768c69d3 100644
--- a/src/app/modules/angular-slickgrid/models/gridMenu.interface.ts
+++ b/src/app/modules/angular-slickgrid/models/gridMenu.interface.ts
@@ -37,6 +37,9 @@ export interface GridMenu {
   /** Defaults to false, which will hide the "Clear all Sorting" command in the Grid Menu (Grid Option "enableSorting: true" has to be enabled) */
   hideClearAllSortingCommand?: boolean;
 
+  /** Defaults to true, which will hide the "Clear Frozen Columns" command in the Grid Menu */
+  hideClearFrozenColumnsCommand?: boolean;
+
   /** Defaults to false, which will hide the "Export to CSV" command in the Grid Menu (Grid Option "enableExport: true" has to be enabled) */
   hideExportCsvCommand?: boolean;
 
@@ -70,6 +73,9 @@ export interface GridMenu {
   /** icon for the "Clear all Sorting" command */
   iconClearAllSortingCommand?: string;
 
+  /** icon for the "Clear Frozen Columns" command */
+  iconClearFrozenColumnsCommand?: string;
+
   /** icon for the "Export to CSV" command */
   iconExportCsvCommand?: string;
 
@@ -121,7 +127,6 @@ export interface GridMenu {
   /** Callback method that user can override the default behavior of enabling/disabling an item from the list. */
   menuUsabilityOverride?: (args: MenuCallbackArgs) => boolean;
 
-
   // --
   // Events
 
diff --git a/src/app/modules/angular-slickgrid/models/headerMenu.interface.ts b/src/app/modules/angular-slickgrid/models/headerMenu.interface.ts
index dd2ef0011..e8663b9b2 100644
--- a/src/app/modules/angular-slickgrid/models/headerMenu.interface.ts
+++ b/src/app/modules/angular-slickgrid/models/headerMenu.interface.ts
@@ -29,9 +29,18 @@ export interface HeaderMenu {
   /** Defaults to false, which will hide the Clear Filter command in the Header Menu (Grid Option "enableHeaderMenu: true" has to be enabled) */
   hideFilterCommands?: boolean;
 
+  /** Defaults to true (opt-in feature), which will hide the "Freeze Columns" command in the Header Menu */
+  hideFreezeColumnsCommand?: boolean;
+
   /** Defaults to false, which will hide Sort (Asc/Desc & Clear Sort) commands in the Header Menu (Grid Option "enableHeaderMenu: true" has to be enabled) */
   hideSortCommands?: boolean;
 
+  /**
+   * Defaults to false, which will hide the Divider (separator) between the top sort commands and the other clear commands
+   * (Grid Option "enableHeaderMenu" and "enableSorting" have to be enabled)
+   */
+  hideSortCommandsDivider?: boolean;
+
   /** Defaults to false, which will hide the "Hide Column" command in the Header Menu (Grid Option "enableHeaderMenu: true" has to be enabled) */
   hideColumnHideCommand?: boolean;
 
@@ -50,6 +59,9 @@ export interface HeaderMenu {
   /** icon for the "Hide Column" command */
   iconColumnHideCommand?: string;
 
+  /** icon for the "Freeze Columns" command */
+  iconFreezeColumns?: string;
+
   /** icon for the "Sort Ascending" command */
   iconSortAscCommand?: string;
 
diff --git a/src/app/modules/angular-slickgrid/models/locale.interface.ts b/src/app/modules/angular-slickgrid/models/locale.interface.ts
index 1a20506d0..0d6703cf1 100644
--- a/src/app/modules/angular-slickgrid/models/locale.interface.ts
+++ b/src/app/modules/angular-slickgrid/models/locale.interface.ts
@@ -17,6 +17,9 @@ export interface Locale {
   /** Text "Clear all Sorting" shown in Header Menu */
   TEXT_CLEAR_ALL_SORTING: string;
 
+  /** Text "Clear Frozen Columns" shown in Grid Menu */
+  TEXT_CLEAR_FROZEN_COLUMNS: string;
+
   /** Text "Columns" title displayed in the Column Picker & Grid Menu (when enabled) */
   TEXT_COLUMNS: string;
 
@@ -53,6 +56,9 @@ export interface Locale {
   /** Text "Force fit Columns" displayed in the Column Picker & Grid Menu (when enabled) */
   TEXT_FORCE_FIT_COLUMNS: string;
 
+  /** Text "Freeze Columns" shown in Header Menu (when enabled) */
+  TEXT_FREEZE_COLUMNS?: string;
+
   /** Text "Group by" shown in Export when using Grouping (when enabled) */
   TEXT_GROUP_BY: string;
 
@@ -65,12 +71,12 @@ export interface Locale {
   /** Text "items per page" displayed in the Pagination (when enabled) */
   TEXT_ITEMS_PER_PAGE?: string;
 
-  /** Text "of" displayed in the Pagination (when enabled) */
-  TEXT_OF?: string;
-
   /** Text "Last Update" displayed in the Footer (when enabled) */
   TEXT_LAST_UPDATE?: string;
 
+  /** Text "of" displayed in the Pagination (when enabled) */
+  TEXT_OF?: string;
+
   /** Text "OK" displayed in the Multiple Select Editor/Filter */
   TEXT_OK: string;
 
diff --git a/src/app/modules/angular-slickgrid/models/slickGrid.interface.ts b/src/app/modules/angular-slickgrid/models/slickGrid.interface.ts
index 3dcdc22e9..cec1e45a6 100644
--- a/src/app/modules/angular-slickgrid/models/slickGrid.interface.ts
+++ b/src/app/modules/angular-slickgrid/models/slickGrid.interface.ts
@@ -479,6 +479,7 @@ export interface SlickGrid {
   onViewportChanged: SlickEvent;
   onRendered: SlickEvent;
   onSelectedRowsChanged: SlickEvent;
+  onSetOptions: SlickEvent;
   onScroll: SlickEvent;
   onSort: SlickEvent;
 }
diff --git a/src/app/modules/angular-slickgrid/services/__tests__/groupingAndColspan.service.spec.ts b/src/app/modules/angular-slickgrid/services/__tests__/groupingAndColspan.service.spec.ts
index 9f1654cb0..f03c49b43 100644
--- a/src/app/modules/angular-slickgrid/services/__tests__/groupingAndColspan.service.spec.ts
+++ b/src/app/modules/angular-slickgrid/services/__tests__/groupingAndColspan.service.spec.ts
@@ -44,9 +44,11 @@ const gridStub = {
   invalidate: jest.fn(),
   onColumnsResized: new Slick.Event(),
   onColumnsReordered: new Slick.Event(),
+  onSetOptions: new Slick.Event(),
   onSort: new Slick.Event(),
   render: jest.fn(),
   setColumns: jest.fn(),
+  setOptions: jest.fn(),
   setSortColumns: jest.fn(),
 };
 
@@ -278,5 +280,21 @@ describe('GroupingAndColspanService', () => {
       expect(divHeaderColumns.length).toBeGreaterThan(2);
       expect(divHeaderColumns[0].outerHTML).toEqual(`<div style="width: 2815px; left: -1000px;" class="slick-header-columns">All your colums div here</div>`);
     });
+
+    it('should render the pre-header row grouping title after changing "frozenColumn" with grid "setOptions"', () => {
+      const divHeaderColumns = document.getElementsByClassName('slick-header-columns');
+      jest.spyOn(gridStub, 'getColumns').mockReturnValue(mockColumns);
+      const spy = jest.spyOn(service, 'renderPreHeaderRowGroupingTitles');
+
+      service.init(gridStub, dataViewStub);
+      gridStub.onSetOptions.notify({ optionsBefore: { frozenColumn: -1 }, optionsAfter: { frozenColumn: 1 } }, new Slick.EventData(), gridStub);
+      jest.runAllTimers(); // fast-forward timer
+
+      expect(spy).toHaveBeenCalledTimes(2);
+      expect(setTimeout).toHaveBeenCalledTimes(2);
+      expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 0);
+      expect(divHeaderColumns.length).toBeGreaterThan(2);
+      expect(divHeaderColumns[0].outerHTML).toEqual(`<div style="width: 2815px; left: -1000px;" class="slick-header-columns">All your colums div here</div>`);
+    });
   });
 });
diff --git a/src/app/modules/angular-slickgrid/services/groupingAndColspan.service.ts b/src/app/modules/angular-slickgrid/services/groupingAndColspan.service.ts
index 306d254db..b79140d5e 100644
--- a/src/app/modules/angular-slickgrid/services/groupingAndColspan.service.ts
+++ b/src/app/modules/angular-slickgrid/services/groupingAndColspan.service.ts
@@ -49,8 +49,15 @@ export class GroupingAndColspanService {
         this._eventHandler.subscribe(dataView.onRowCountChanged, () => this.renderPreHeaderRowGroupingTitles());
         this.resizerService.onGridAfterResize.subscribe(() => this.renderPreHeaderRowGroupingTitles());
 
+        this._eventHandler.subscribe(grid.onSetOptions, (_e, args) => {
+          // when user changes frozen columns dynamically (e.g. from header menu), we need to re-render the pre-header of the grouping titles
+          if (args && args.optionsBefore && args.optionsAfter && args.optionsBefore.frozenColumn !== args.optionsAfter.frozenColumn) {
+            setTimeout(() => this.renderPreHeaderRowGroupingTitles(), 0);
+          }
+        });
+
         // also not sure why at this point, but it seems that I need to call the 1st create in a delayed execution
-        // probably some kind of timing issues and delaying it until the grid is fully ready does help
+        // probably some kind of timing issues and delaying it until the grid is fully ready fixes this problem
         setTimeout(() => this.renderPreHeaderRowGroupingTitles(), 50);
       }
     }
diff --git a/src/app/modules/angular-slickgrid/styles/material-svg-icons.scss b/src/app/modules/angular-slickgrid/styles/material-svg-icons.scss
index 49276e73c..87e29bd3f 100644
--- a/src/app/modules/angular-slickgrid/styles/material-svg-icons.scss
+++ b/src/app/modules/angular-slickgrid/styles/material-svg-icons.scss
@@ -20,6 +20,8 @@ $icon-color-mdi-help-circle: $icon-color !default;
 $icon-color-mdi-help-circle-outline: $icon-color !default;
 $icon-color-mdi-menu: $icon-color !default;
 $icon-color-mdi-microsoft-excel: $icon-color !default;
+$icon-color-mdi-pin-off-outline: $icon-color !default;
+$icon-color-mdi-pin-outline: $icon-color !default;
 $icon-color-mdi-plus: $icon-color !default;
 $icon-color-mdi-sort-ascending: $icon-color !default;
 $icon-color-mdi-sort-descending: $icon-color !default;
@@ -48,6 +50,8 @@ $icon-width-mdi-help-circle: $icon-width !default;
 $icon-width-mdi-help-circle-outline: $icon-width !default;
 $icon-width-mdi-menu: $icon-width !default;
 $icon-width-mdi-microsoft-excel: $icon-width !default;
+$icon-width-mdi-pin-off-outline: $icon-width !default;
+$icon-width-mdi-pin-outline: $icon-width !default;
 $icon-width-mdi-plus: $icon-width !default;
 $icon-width-mdi-sort-ascending: $icon-width !default;
 $icon-width-mdi-sort-descending: $icon-width !default;
@@ -146,6 +150,14 @@ $icon-width-mdi-sync: $icon-width !default;
     width: $icon-width-mdi-microsoft-excel;
     content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-microsoft-excel)}" viewBox="0 0 24 24"><path  d="M21.17 3.25Q21.5 3.25 21.76 3.5 22 3.74 22 4.08V19.92Q22 20.26 21.76 20.5 21.5 20.75 21.17 20.75H7.83Q7.5 20.75 7.24 20.5 7 20.26 7 19.92V17H2.83Q2.5 17 2.24 16.76 2 16.5 2 16.17V7.83Q2 7.5 2.24 7.24 2.5 7 2.83 7H7V4.08Q7 3.74 7.24 3.5 7.5 3.25 7.83 3.25M7 13.06L8.18 15.28H9.97L8 12.06L9.93 8.89H8.22L7.13 10.9L7.09 10.96L7.06 11.03Q6.8 10.5 6.5 9.96 6.25 9.43 5.97 8.89H4.16L6.05 12.08L4 15.28H5.78M13.88 19.5V17H8.25V19.5M13.88 15.75V12.63H12V15.75M13.88 11.38V8.25H12V11.38M13.88 7V4.5H8.25V7M20.75 19.5V17H15.13V19.5M20.75 15.75V12.63H15.13V15.75M20.75 11.38V8.25H15.13V11.38M20.75 7V4.5H15.13V7Z"></path></svg>');
   }
+  &.mdi-pin-off-outline:before {
+    width: $icon-width-mdi-pin-off-outline;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-pin-off-outline)}" viewBox="0 0 24 24"><path d="M8,6.2V4H7V2H17V4H16V12L18,14V16H17.8L14,12.2V4H10V8.2L8,6.2M20,20.7L18.7,22L12.8,16.1V22H11.2V16H6V14L8,12V11.3L2,5.3L3.3,4L20,20.7M8.8,14H10.6L9.7,13.1L8.8,14Z"></path></svg>');
+  }
+  &.mdi-pin-outline:before {
+    width: $icon-width-mdi-pin-outline;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-pin-outline)}" viewBox="0 0 24 24"><path d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12M8.8,14L10,12.8V4H14V12.8L15.2,14H8.8Z"></path></svg>');
+  }
   &.mdi-plus:before {
     width: $icon-width-mdi-plus;
     content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-plus)}" viewBox="0 0 24 24"><path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"></path></svg>');
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index b1b94d06c..ededaa3f1 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -4,6 +4,7 @@
   "CLEAR_ALL_FILTERS": "Clear all Filters",
   "CLEAR_ALL_GROUPING": "Clear all Grouping",
   "CLEAR_ALL_SORTING": "Clear all Sorting",
+  "CLEAR_FROZEN_COLUMNS": "Clear Frozen Columns",
   "COLLAPSE_ALL_GROUPS": "Collapse all Groups",
   "COLUMNS": "Columns",
   "COMMANDS": "Commands",
@@ -16,6 +17,7 @@
   "EXPORT_TO_EXCEL": "Export to Excel",
   "EXPORT_TO_TAB_DELIMITED": "Export in Text format (Tab delimited)",
   "EXPORT_TO_TEXT_FORMAT": "Export in Text format",
+  "FREEZE_COLUMNS": "Freeze Columns",
   "FROM_TO_OF_TOTAL_ITEMS": "{{from}}-{{to}} of {{totalItems}} items",
   "FORCE_FIT_COLUMNS": "Force fit columns",
   "INVALID_FLOAT": "The number must be valid and have a maximum of {{maxDecimal}} decimals.",
diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json
index 1550a13af..8ad64d275 100644
--- a/src/assets/i18n/fr.json
+++ b/src/assets/i18n/fr.json
@@ -4,6 +4,7 @@
   "CLEAR_ALL_FILTERS": "Supprimer tous les filtres",
   "CLEAR_ALL_GROUPING": "Supprimer tous les groupes",
   "CLEAR_ALL_SORTING": "Supprimer tous les tris",
+  "CLEAR_FROZEN_COLUMNS": "Libérer les colonnes gelées",
   "COLLAPSE_ALL_GROUPS": "Réduire tous les groupes",
   "COLUMNS": "Colonnes",
   "COMMANDS": "Commandes",
@@ -16,6 +17,7 @@
   "EXPORT_TO_EXCEL": "Exporter vers Excel",
   "EXPORT_TO_TAB_DELIMITED": "Exporter en format texte (délimité par tabulation)",
   "EXPORT_TO_TEXT_FORMAT": "Exporter en format texte",
+  "FREEZE_COLUMNS": "Geler les colonnes",
   "FROM_TO_OF_TOTAL_ITEMS": "{{from}}-{{to}} de {{totalItems}} éléments",
   "FORCE_FIT_COLUMNS": "Ajustement forcé des colonnes",
   "GROUP_BY": "Grouper par",
diff --git a/test/cypress/integration/example15.spec.js b/test/cypress/integration/example15.spec.js
new file mode 100644
index 000000000..c9e2cc083
--- /dev/null
+++ b/test/cypress/integration/example15.spec.js
@@ -0,0 +1,125 @@
+/// <reference types="cypress" />
+
+function removeExtraSpaces(textS) {
+  return `${textS}`.replace(/\s+/g, ' ').trim();
+}
+
+describe('Example 15 - Column Span & Header Grouping', () => {
+  // NOTE:  everywhere there's a * 2 is because we have a top+bottom (frozen rows) containers even after clear frozen columns
+  const fullPreTitles = ['', 'Common Factor', 'Period', 'Analysis'];
+  const fullTitles = ['#', 'Title', 'Duration', 'Start', 'Finish', '% Complete', 'Effort Driven'];
+
+  it('should display Example title', () => {
+    cy.visit(`${Cypress.config('baseExampleUrl')}/colspan`);
+    cy.get('h2').should('contain', 'Example 15: Column Span & Header Grouping');
+  });
+
+  it('should have exact Column Pre-Header & Column Header Titles in the grid', () => {
+    cy.get('#grid2')
+      .find('.slick-header-columns:nth(0)')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullPreTitles[index]));
+
+    cy.get('#grid2')
+      .find('.slick-header-columns:nth(1)')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+  });
+
+  it('should have a frozen grid on page load with 3 columns on the left and 4 columns on the right', () => {
+    cy.get('#grid2').find('[style="top:0px"]').should('have.length', 2);
+    cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 3);
+    cy.get('#grid2').find('.grid-canvas-right > [style="top:0px"]').children().should('have.length', 4);
+
+    cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '0');
+    cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0');
+    cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '5 days');
+
+    cy.get('#grid2').find('.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '01/01/2009');
+    cy.get('#grid2').find('.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '01/05/2009');
+  });
+
+  it('should have exact Column Pre-Header & Column Header Titles in the grid', () => {
+    cy.get('#grid2')
+      .find('.slick-header-columns:nth(0)')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullPreTitles[index]));
+
+    cy.get('#grid2')
+      .find('.slick-header-columns:nth(1)')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+  });
+
+  it('should click on the "Remove Frozen Columns" button to switch to a regular grid without frozen columns and expect 7 columns on the left container', () => {
+    cy.contains('Remove Frozen Columns')
+      .click({ force: true });
+
+    cy.get('#grid2').find('[style="top:0px"]').should('have.length', 1);
+    cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 7);
+
+    cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '0');
+    cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0');
+    cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '5 days');
+    cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(3)').should('contain', '01/01/2009');
+    cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '01/05/2009');
+  });
+
+  it('should have exact Column Pre-Header & Column Header Titles in the grid', () => {
+    cy.get('#grid2')
+      .find('.slick-header-columns:nth(0)')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullPreTitles[index]));
+
+    cy.get('#grid2')
+      .find('.slick-header-columns:nth(1)')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+  });
+
+  it('should click on the "Set 3 Frozen Columns" button to switch frozen columns grid and expect 3 frozen columns on the left and 4 columns on the right', () => {
+    cy.contains('Set 3 Frozen Columns')
+      .click({ force: true });
+
+    cy.get('#grid2').find('[style="top:0px"]').should('have.length', 2);
+    cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 3);
+    cy.get('#grid2').find('.grid-canvas-right > [style="top:0px"]').children().should('have.length', 4);
+
+    cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '0');
+    cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0');
+    cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '5 days');
+
+    cy.get('#grid2').find('.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '01/01/2009');
+    cy.get('#grid2').find('.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '01/05/2009');
+  });
+
+  it('should have exact Column Pre-Header & Column Header Titles in the grid', () => {
+    cy.get('#grid2')
+      .find('.slick-header-columns:nth(0)')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullPreTitles[index]));
+
+    cy.get('#grid2')
+      .find('.slick-header-columns:nth(1)')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+  });
+
+  it('should click on the Grid Menu command "Clear Frozen Columns" to switch to a regular grid without frozen columns and expect 7 columns on the left container', () => {
+    cy.get('#grid2')
+      .find('button.slick-gridmenu-button')
+      .click({ force: true });
+
+    cy.contains('Clear Frozen Columns')
+      .click({ force: true });
+
+    cy.get('#grid2').find('[style="top:0px"]').should('have.length', 1);
+    cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 7);
+
+    cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '0');
+    cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0');
+    cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '5 days');
+    cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(3)').should('contain', '01/01/2009');
+    cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '01/05/2009');
+  });
+});
diff --git a/test/cypress/integration/example20.spec.js b/test/cypress/integration/example20.spec.js
new file mode 100644
index 000000000..276b0a3d4
--- /dev/null
+++ b/test/cypress/integration/example20.spec.js
@@ -0,0 +1,103 @@
+/// <reference types="cypress" />
+
+function removeExtraSpaces(textS) {
+  return `${textS}`.replace(/\s+/g, ' ').trim();
+}
+
+describe('Example 20 - Frozen Grid', () => {
+  // NOTE:  everywhere there's a * 2 is because we have a top+bottom (frozen rows) containers even after clear frozen columns
+
+  const fullTitles = ['#', 'Title', '% Complete', 'Start', 'Finish', 'Cost | Duration', 'Effort Driven', 'Title 1', 'Title 2', 'Title 3', 'Title 4'];
+
+  it('should display Example title', () => {
+    cy.visit(`${Cypress.config('baseExampleUrl')}/frozen`);
+    cy.get('h2').should('contain', 'Example 20: Pinned (frozen) Columns/Rows');
+  });
+
+  it('should have exact column titles on 1st grid', () => {
+    cy.get('#grid20')
+      .find('.slick-header-columns')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+  });
+
+  it('should have exact Column Header Titles in the grid', () => {
+    cy.get('#grid20')
+      .find('.slick-header-columns:nth(0)')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+  });
+
+  it('should have a frozen grid with 4 containers on page load with 3 columns on the left and 4 columns on the right', () => {
+    cy.get('[style="top:0px"]').should('have.length', 2 * 2);
+    cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 3 * 2);
+    cy.get('.grid-canvas-right > [style="top:0px"]').children().should('have.length', 8 * 2);
+
+    cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '0');
+    cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0');
+
+    cy.get('.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '2009-01-01');
+    cy.get('.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '2009-05-05');
+  });
+
+  it('should click on the "Remove Frozen Columns" button to switch to a regular grid without frozen columns and expect 7 columns on the left container', () => {
+    cy.get('[data-test=remove-frozen-column-button]')
+      .click({ force: true });
+
+    cy.get('[style="top:0px"]').should('have.length', 1 * 2);
+    cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 11 * 2);
+
+    cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '0');
+    cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0');
+
+    cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(3)').should('contain', '2009-01-01');
+    cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '2009-05-05');
+  });
+
+  it('should have exact Column Header Titles in the grid', () => {
+    cy.get('#grid20')
+      .find('.slick-header-columns:nth(0)')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+  });
+
+  it('should click on the "Set 3 Frozen Columns" button to switch frozen columns grid and expect 3 frozen columns on the left and 4 columns on the right', () => {
+    cy.get('[data-test=set-3frozen-columns]')
+      .click({ force: true });
+
+    cy.get('[style="top:0px"]').should('have.length', 2 * 2);
+    cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 3 * 2);
+    cy.get('.grid-canvas-right > [style="top:0px"]').children().should('have.length', 8 * 2);
+
+    cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '0');
+    cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0');
+
+    cy.get('.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '2009-01-01');
+    cy.get('.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '2009-05-05');
+  });
+
+  it('should have exact Column Header Titles in the grid', () => {
+    cy.get('#grid20')
+      .find('.slick-header-columns:nth(0)')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+  });
+
+  it('should click on the Grid Menu command "Clear Frozen Columns" to switch to a regular grid without frozen columns and expect 7 columns on the left container', () => {
+    cy.get('#grid20')
+      .find('button.slick-gridmenu-button')
+      .click({ force: true });
+
+    cy.contains('Clear Frozen Columns')
+      .click({ force: true });
+
+    cy.get('[style="top:0px"]').should('have.length', 1 * 2);
+    cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 11 * 2);
+
+    cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '0');
+    cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0');
+
+    cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(3)').should('contain', '2009-01-01');
+    cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '2009-05-05');
+  });
+});

From 89f0e5a08225b2e9ea24665e7f560c6aaf9c7fe2 Mon Sep 17 00:00:00 2001
From: Ghislain Beaulac <ghislain.beaulac@se.com>
Date: Tue, 16 Jun 2020 09:57:07 -0400
Subject: [PATCH 2/3] refactor(colspan): add more detail to colspan example

---
 src/app/examples/grid-colspan.component.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/app/examples/grid-colspan.component.ts b/src/app/examples/grid-colspan.component.ts
index 99c594b25..b145b6270 100644
--- a/src/app/examples/grid-colspan.component.ts
+++ b/src/app/examples/grid-colspan.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { Column, FieldType, GridOption, AngularGridInstance } from './../modules/angular-slickgrid';
+import { AngularGridInstance, Column, FieldType, GridOption } from './../modules/angular-slickgrid';
 
 @Component({
   templateUrl: './grid-colspan.component.html',
@@ -15,6 +15,10 @@ export class GridColspanComponent implements OnInit {
       Header Grouping - (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Header-Title-Grouping" target="_blank">Wiki docs</a>)
     </li>
     <li>Note that you can add Sort but remember that it will sort by the data which the row contains, even if the data is visually hidden by colspan it will still sort it</li>
+    <li>
+      Header Grouping spanning accross multiple columns is working but has some UI issues on window resize.
+      If anyone can fix it, probably some CSS issues, please let us know.
+    </li>
   </ul>
   `;
 

From f73bdc19c7552617cfb7c48cf778ae8a9db571e4 Mon Sep 17 00:00:00 2001
From: Ghislain Beaulac <ghislain.beaulac@se.com>
Date: Mon, 29 Jun 2020 13:20:02 -0400
Subject: [PATCH 3/3] refactor(core): update to latest SlickGrid core version

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 6d84b77ab..997c8bf55 100644
--- a/package.json
+++ b/package.json
@@ -101,7 +101,7 @@
     "lodash.isequal": "^4.5.0",
     "moment-mini": "^2.22.1",
     "rxjs": "^6.3.3",
-    "slickgrid": "^2.4.24",
+    "slickgrid": "^2.4.25",
     "text-encoding-utf-8": "^1.0.2"
   },
   "devDependencies": {
@@ -165,4 +165,4 @@
     "yargs": "^15.1.0",
     "zone.js": "^0.8.29"
   }
-}
+}
\ No newline at end of file