From ea2c1759fa78c47411ba65fda5a8d619d0d8f7e3 Mon Sep 17 00:00:00 2001
From: Ghislain B <gbeaulac@gmail.com>
Date: Wed, 19 Jun 2024 00:37:50 -0400
Subject: [PATCH] feat: add onPreHeaderContextMenu for Column Picker usage
 (#1030)

* feat: add onPreHeaderContextMenu for Column Picker usage
- adding new events `onPreHeaderContextMenu` and `onPreHeaderClick` which is mostly to be able to open the Column Picker from either the regular column headers OR the Column Group from the Pre-Header when defined
---
 .../example-draggable-header-grouping.cy.ts   |  37 +++
 ...mple-frozen-columns-and-column-group.cy.ts | 238 ++++++++++--------
 examples/example-column-group.html            |  72 +++---
 .../example-draggable-header-grouping.html    |  62 +++--
 ...n-columns-and-column-group-hidden-col.html |  62 ++---
 ...ample-frozen-columns-and-column-group.html |  65 +++--
 src/controls/slick.columnpicker.ts            |   8 +-
 src/models/gridEvents.interface.ts            |   2 +
 src/slick.core.ts                             |   6 +-
 src/slick.grid.ts                             |  34 ++-
 10 files changed, 368 insertions(+), 218 deletions(-)

diff --git a/cypress/e2e/example-draggable-header-grouping.cy.ts b/cypress/e2e/example-draggable-header-grouping.cy.ts
index 5ec925a0..691c867d 100644
--- a/cypress/e2e/example-draggable-header-grouping.cy.ts
+++ b/cypress/e2e/example-draggable-header-grouping.cy.ts
@@ -214,5 +214,42 @@ describe('Example - Draggable Grouping', { retries: 1 }, () => {
       // cy.get(`#myGrid [style="top: ${GRID_ROW_HEIGHT * 49999}px;"] > .slick-cell:nth(1)`).should('have.text', 'Task 49999');
       cy.get(`#myGrid [style="top: 1.24998e+06px;"] > .slick-cell:nth(1)`).should('have.text', 'Task 49999');
     });
+
+    it('should be able to call column picker from the pre-header', () => {
+      const preHeadersWithoutId = ['Common Factor', 'Period', 'Analysis', ''];
+      const titlesWithoutId = ['Title', 'Duration', 'Start', 'Finish', 'Cost', 'Effort-Driven'];
+
+      cy.get('#myGrid')
+        .find('.slick-preheader-panel .slick-header-column:nth(1)')
+        .trigger('mouseover')
+        .trigger('contextmenu')
+        .invoke('show');
+
+      cy.get('.slick-columnpicker')
+        .find('.slick-columnpicker-list')
+        .children()
+        .each(($child, index) => {
+          if (index <= 5) {
+            expect($child.text()).to.eq(fullTitles[index]);
+          }
+        });
+
+      cy.get('.slick-columnpicker')
+        .find('.slick-columnpicker-list')
+        .children('li:nth-child(1)')
+        .children('label')
+        .should('contain', '#')
+        .click();
+
+      cy.get('#myGrid')
+        .find('.slick-preheader-panel .slick-header-columns')
+        .children()
+        .each(($child, index) => expect($child.text()).to.eq(preHeadersWithoutId[index]));
+
+      cy.get('#myGrid')
+        .find('.slick-header:not(.slick-preheader-panel) .slick-header-columns')
+        .children()
+        .each(($child, index) => expect($child.text()).to.eq(titlesWithoutId[index]));
+    });
   });
 });
diff --git a/cypress/e2e/example-frozen-columns-and-column-group.cy.ts b/cypress/e2e/example-frozen-columns-and-column-group.cy.ts
index 5ebef9c4..986ff5e8 100644
--- a/cypress/e2e/example-frozen-columns-and-column-group.cy.ts
+++ b/cypress/e2e/example-frozen-columns-and-column-group.cy.ts
@@ -1,101 +1,141 @@
 describe('Example - Row Grouping Titles', () => {
-    const fullPreTitles = ['', 'Common Factor', 'Period', 'Analysis'];
-    const fullTitles = ['#', 'Title', 'Duration', 'Start', 'Finish', '% Complete', 'Effort Driven'];
-
-    it('should display Example Frozen Columns & Column Group', () => {
-        cy.visit(`${Cypress.config('baseUrl')}/examples/example-frozen-columns-and-column-group.html`);
-        cy.get('h2').should('contain', 'Demonstrates:');
-        cy.contains('Frozen columns with extra header row grouping columns into categories');
-    });
-
-    it('should have exact Column Pre-Header & Column Header Titles in the grid', () => {
-        cy.get('#myGrid')
-            .find('.slick-header-columns:nth(0)')
-            .children()
-            .each(($child, index) => expect($child.text()).to.eq(fullPreTitles[index]));
-
-        cy.get('#myGrid')
-            .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('[style="top: 0px;"]').should('have.length', 2);
-        cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 3);
-        cy.get('.grid-canvas-right > [style="top: 0px;"]').children().should('have.length', 4);
-
-        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(2)').should('contain', '5 days');
-
-        cy.get('.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '01/01/2009');
-        cy.get('.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('#myGrid')
-            .find('.slick-header-columns:nth(0)')
-            .children()
-            .each(($child, index) => expect($child.text()).to.eq(fullPreTitles[index]));
-
-        cy.get('#myGrid')
-            .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('[style="top: 0px;"]').should('have.length', 1);
-        cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 7);
-
-        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(2)').should('contain', '5 days');
-        cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(3)').should('contain', '01/01/2009');
-        cy.get('.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('#myGrid')
-            .find('.slick-header-columns:nth(0)')
-            .children()
-            .each(($child, index) => expect($child.text()).to.eq(fullPreTitles[index]));
-
-        cy.get('#myGrid')
-            .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('[style="top: 0px;"]').should('have.length', 2);
-        cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 3);
-        cy.get('.grid-canvas-right > [style="top: 0px;"]').children().should('have.length', 4);
-
-        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(2)').should('contain', '5 days');
-
-        cy.get('.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '01/01/2009');
-        cy.get('.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('#myGrid')
-            .find('.slick-header-columns:nth(0)')
-            .children()
-            .each(($child, index) => expect($child.text()).to.eq(fullPreTitles[index]));
-
-        cy.get('#myGrid')
-            .find('.slick-header-columns:nth(1)')
-            .children()
-            .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
-    });
+  const fullPreTitles = ['', 'Common Factor', 'Period', 'Analysis'];
+  const fullTitles = ['#', 'Title', 'Duration', 'Start', 'Finish', '% Complete', 'Effort Driven'];
+
+  it('should display Example Frozen Columns & Column Group', () => {
+    cy.visit(`${Cypress.config('baseUrl')}/examples/example-frozen-columns-and-column-group.html`);
+    cy.get('h2').should('contain', 'Demonstrates:');
+    cy.contains('Frozen columns with extra header row grouping columns into categories');
+  });
+
+  it('should have exact Column Pre-Header & Column Header Titles in the grid', () => {
+    cy.get('#myGrid')
+      .find('.slick-header-columns:nth(0)')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullPreTitles[index]));
+
+    cy.get('#myGrid')
+      .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('[style="top: 0px;"]').should('have.length', 2);
+    cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 3);
+    cy.get('.grid-canvas-right > [style="top: 0px;"]').children().should('have.length', 4);
+
+    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(2)').should('contain', '5 days');
+
+    cy.get('.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '01/01/2009');
+    cy.get('.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('#myGrid')
+      .find('.slick-header-columns:nth(0)')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullPreTitles[index]));
+
+    cy.get('#myGrid')
+      .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('[style="top: 0px;"]').should('have.length', 1);
+    cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 7);
+
+    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(2)').should('contain', '5 days');
+    cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(3)').should('contain', '01/01/2009');
+    cy.get('.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('#myGrid')
+      .find('.slick-header-columns:nth(0)')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullPreTitles[index]));
+
+    cy.get('#myGrid')
+      .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('[style="top: 0px;"]').should('have.length', 2);
+    cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 3);
+    cy.get('.grid-canvas-right > [style="top: 0px;"]').children().should('have.length', 4);
+
+    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(2)').should('contain', '5 days');
+
+    cy.get('.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '01/01/2009');
+    cy.get('.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('#myGrid')
+      .find('.slick-header-columns:nth(0)')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullPreTitles[index]));
+
+    cy.get('#myGrid')
+      .find('.slick-header-columns:nth(1)')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+  });
+
+  it('should be able to call column picker from the pre-header', () => {
+    const fullPreTitlesWithoutId = ['Common Factor', 'Period', 'Period', 'Analysis'];
+    const fullTitlesWithoutId = ['Title', 'Duration', 'Start', 'Finish', '% Complete', 'Effort Driven'];
+    const fullTitlesWithGroup = ['#', 'Common Factor - Title', 'Common Factor - Duration', 'Period - Start', 'Period - Finish', 'Analysis - % Complete', 'Analysis - Effort Driven'];
+
+    cy.get('#myGrid')
+      .find('.slick-preheader-panel .slick-header-column:nth(1)')
+      .trigger('mouseover')
+      .trigger('contextmenu')
+      .invoke('show');
+
+    cy.get('.slick-columnpicker')
+      .find('.slick-columnpicker-list')
+      .children()
+      .each(($child, index) => {
+        if (index <= 6) {
+          expect($child.text()).to.eq(fullTitlesWithGroup[index]);
+        }
+      });
+
+    cy.get('.slick-columnpicker')
+      .find('.slick-columnpicker-list')
+      .children('li:nth-child(1)')
+      .children('label')
+      .should('contain', '#')
+      .click();
+
+    cy.get('.slick-columnpicker > button.close > .close').click();
+
+    cy.get('#myGrid')
+      .find('.slick-preheader-panel .slick-header-columns')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullPreTitlesWithoutId[index]));
+
+    cy.get('#myGrid')
+      .find('.slick-header:not(.slick-preheader-panel) .slick-header-columns')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullTitlesWithoutId[index]));
+  });
 });
diff --git a/examples/example-column-group.html b/examples/example-column-group.html
index 21dff43c..8e4561dc 100644
--- a/examples/example-column-group.html
+++ b/examples/example-column-group.html
@@ -49,41 +49,45 @@ <h2>View Source:</h2>
 
 <script>
   function CreateAddlHeaderRow() {
-    var preHeaderPanelElm = grid.getPreHeaderPanel();
+    let preHeaderPanelElm = grid.getPreHeaderPanel();
     preHeaderPanelElm.innerHTML = '';
     preHeaderPanelElm.className = "slick-header-columns";
     preHeaderPanelElm.style.left = '-1000px';
     preHeaderPanelElm.style.width = `${grid.getHeadersWidth()}px`;
     preHeaderPanelElm.parentElement.classList.add("slick-header");
 
-    var headerColumnWidthDiff = grid.getHeaderColumnWidthDiff();
-    var m, headerElm, lastColumnGroup = '', widthTotal = 0;
+    let headerColumnWidthDiff = grid.getHeaderColumnWidthDiff();
+    let m, headerElm, lastColumnGroup = '', widthTotal = 0;
+    const columns = grid.getColumns();
 
-    for (var i = 0; i < columns.length; i++) {
+    for (let i = 0; i < columns.length; i++) {
       m = columns[i];
-      if (lastColumnGroup === m.columnGroup && i>0) {
-        widthTotal += m.width;
-        headerElm.style.width = `${widthTotal - headerColumnWidthDiff}px`;
-      } else {
-          widthTotal = m.width;
-          headerElm = document.createElement('div');
-          headerElm.className = 'ui-state-default slick-header-column';
-          headerElm.style.width = `${(m.width || 0) - headerColumnWidthDiff}px`;
-
-          const spanElm = document.createElement('span');
-          spanElm.className='slick-column-name';
-          spanElm.textContent = m.columnGroup || '';
-          headerElm.appendChild(spanElm);
-          preHeaderPanelElm.appendChild(headerElm);
+      if (m) {
+        if (lastColumnGroup === m.columnGroup && i>0) {
+          widthTotal += m.width;
+          headerElm.style.width = `${widthTotal - headerColumnWidthDiff}px`;
+        } else {
+            widthTotal = m.width;
+            headerElm = document.createElement('div');
+            headerElm.className = 'ui-state-default slick-header-column';
+            headerElm.style.width = `${(m.width || 0) - headerColumnWidthDiff}px`;
+            headerElm.dataset.group = m.columnGroup || '';
+
+            const spanElm = document.createElement('span');
+            spanElm.className = 'slick-column-name';
+            spanElm.textContent = m.columnGroup || '';
+            headerElm.appendChild(spanElm);
+            preHeaderPanelElm.appendChild(headerElm);
+        }
+        lastColumnGroup = m.columnGroup;
       }
-      lastColumnGroup = m.columnGroup;
     }
   }
 
-  var dataView;
-  var grid;
-  var data = [];
-  var options = {
+  let dataView;
+  let grid;
+  let data = [];
+  let options = {
     enableCellNavigation: true,
     enableColumnReorder: false,
     createPreHeaderPanel: true,
@@ -91,18 +95,18 @@ <h2>View Source:</h2>
     preHeaderPanelHeight: 23,
     explicitInitialization: true
   };
-  var columns = [
+  let columns = [
     {id: "sel", name: "#", field: "num", behavior: "select", cssClass: "cell-selection", width: 40, resizable: false, selectable: false },
-    {id: "title", name: "Title", field: "title", width: 120, minWidth: 120, cssClass: "cell-title", columnGroup:"Common Factor"},
-    {id: "duration", name: "Duration", field: "duration", columnGroup:"Common Factor"},
-    {id: "start", name: "Start", field: "start", minWidth: 60, columnGroup:"Period"},
-    {id: "finish", name: "Finish", field: "finish", minWidth: 60, columnGroup:"Period"},
-    {id: "%", defaultSortAsc: false, name: "% Complete", field: "percentComplete", width: 95, resizable: false, columnGroup:"Analysis"},
-    {id: "effort-driven", name: "Effort Driven", width: 90, minWidth: 20, maxWidth: 90, field: "effortDriven", columnGroup:"Analysis"}
+    {id: "title", name: "Title", field: "title", width: 120, minWidth: 120, cssClass: "cell-title", columnGroup: "Common Factor"},
+    {id: "duration", name: "Duration", field: "duration", columnGroup: "Common Factor"},
+    {id: "start", name: "Start", field: "start", minWidth: 60, columnGroup: "Period"},
+    {id: "finish", name: "Finish", field: "finish", minWidth: 60, columnGroup: "Period"},
+    {id: "%", defaultSortAsc: false, name: "% Complete", field: "percentComplete", width: 95, resizable: false, columnGroup: "Analysis"},
+    {id: "effort-driven", name: "Effort Driven", width: 90, minWidth: 20, maxWidth: 90, field: "effortDriven", columnGroup: "Analysis"}
   ];
 
-  for (var i = 0; i < 50000; i++) {
-    var d = (data[i] = {});
+  for (let i = 0; i < 50000; i++) {
+    let d = (data[i] = {});
 
     d["id"] = "id_" + i;
     d["num"] = i;
@@ -133,6 +137,10 @@ <h2>View Source:</h2>
     CreateAddlHeaderRow();
   });
 
+  grid.onColumnsReordered.subscribe(function (e, args) {
+    CreateAddlHeaderRow();
+  });
+
   CreateAddlHeaderRow();
 
   // Initialise data
diff --git a/examples/example-draggable-header-grouping.html b/examples/example-draggable-header-grouping.html
index a11879d0..7f01d3a0 100644
--- a/examples/example-draggable-header-grouping.html
+++ b/examples/example-draggable-header-grouping.html
@@ -150,34 +150,38 @@ <h2>View Source:</h2>
 
 <script>
   function CreateAddlHeaderRow() {
-    var preHeaderPanelElm = grid.getPreHeaderPanel();
-    preHeaderPanelElm.innerHTML = '';
+    const preHeaderPanelElm = grid.getPreHeaderPanel();
+    preHeaderPanelElm.textContent = '';
     preHeaderPanelElm.className = "slick-header-columns";
     preHeaderPanelElm.style.left = '-1000px';
     preHeaderPanelElm.style.width = `${grid.getHeadersWidth()}px`;
-    preHeaderPanelElm.parentElement.classList.add("slick-header");
+    preHeaderPanelElm.parentElement?.classList.add("slick-header");
 
-    var headerColumnWidthDiff = grid.getHeaderColumnWidthDiff();
-    var m, headerElm, lastColumnGroup = '', widthTotal = 0;
+    const headerColumnWidthDiff = grid.getHeaderColumnWidthDiff();
+    let m, headerElm, lastColumnGroup = '', widthTotal = 0;
+    const columns = grid.getColumns();
 
     for (var i = 0; i < columns.length; i++) {
       m = columns[i];
-      if (lastColumnGroup === m.columnGroup && i>0) {
-        widthTotal += m.width;
-        headerElm.style.width = `${widthTotal - headerColumnWidthDiff}px`;
-      } else {
-          widthTotal = m.width;
-          headerElm = document.createElement('div');
-          headerElm.className = 'ui-state-default slick-header-column';
-          headerElm.style.width = `${(m.width || 0) - headerColumnWidthDiff}px`;
-
-          const spanElm = document.createElement('span');
-          spanElm.className='slick-column-name';
-          spanElm.textContent = m.columnGroup || '';
-          headerElm.appendChild(spanElm);
-          preHeaderPanelElm.appendChild(headerElm);
+      if (m) {
+        if (lastColumnGroup === m.columnGroup && i > 0) {
+          widthTotal += m.width || 0;
+          headerElm.style.width = `${widthTotal - headerColumnWidthDiff}px`;
+        } else {
+            widthTotal = m.width || 0;
+            headerElm = document.createElement('div');
+            headerElm.className = 'ui-state-default slick-header-column';
+            headerElm.style.width = `${(m.width || 0) - headerColumnWidthDiff}px`;
+            headerElm.dataset.group = m.columnGroup || '';
+
+            const spanElm = document.createElement('span');
+            spanElm.className = 'slick-column-name';
+            spanElm.textContent = m.columnGroup || '';
+            headerElm.appendChild(spanElm);
+            preHeaderPanelElm.appendChild(headerElm);
+        }
+        lastColumnGroup = m.columnGroup;
       }
-      lastColumnGroup = m.columnGroup;
     }
   }
 
@@ -192,7 +196,7 @@ <h2>View Source:</h2>
   },
   {
     id: "title", name: "Title", field: "title", width: 90, minWidth: 50, cssClass: "cell-title", sortable: true, editor: Slick.Editors.Text,
-    columnGroup:"Common Factor", grouping: {
+    columnGroup: "Common Factor", grouping: {
       getter: "title",
       formatter: function (g) {
         return "Title:  " + g.value + "  <span style='color:green'>(" + g.count + " items)</span>";
@@ -206,7 +210,7 @@ <h2>View Source:</h2>
   },
   {
     id: "duration", name: "Duration", field: "duration", width: 110, sortable: true, groupTotalsFormatter: sumTotalsFormatter,
-    columnGroup:"Common Factor", grouping: {
+    columnGroup: "Common Factor", grouping: {
       getter: "duration",
       formatter: function (g) {
         return "Duration:  " + g.value + "  <span style='color:green'>(" + g.count + " items)</span>";
@@ -221,7 +225,7 @@ <h2>View Source:</h2>
   },
   {
     id: "start", name: "Start", field: "start", minWidth: 60, sortable: true,
-    columnGroup:"Period", grouping: {
+    columnGroup: "Period", grouping: {
       getter: "start",
       formatter: function (g) {
         return "Start:  " + g.value + "  <span style='color:green'>(" + g.count + " items)</span>";
@@ -235,7 +239,7 @@ <h2>View Source:</h2>
   },
   {
     id: "finish", name: "Finish", field: "finish", minWidth: 60, sortable: true,
-    columnGroup:"Period", grouping: {
+    columnGroup: "Period", grouping: {
       getter: "finish",
       formatter: function (g) {
         return "Finish:  " + g.value + "  <span style='color:green'>(" + g.count + " items)</span>";
@@ -249,7 +253,7 @@ <h2>View Source:</h2>
   },
   {
     id: "cost", name: "Cost", field: "cost", width: 90, sortable: true, groupTotalsFormatter: sumTotalsFormatter,
-    columnGroup:"Analysis", grouping: {
+    columnGroup: "Analysis", grouping: {
       getter: "cost",
       formatter: function (g) {
         return "Cost:  " + g.value + "  <span style='color:green'>(" + g.count + " items)</span>";
@@ -263,7 +267,7 @@ <h2>View Source:</h2>
   },
   {
     id: "effortDriven", name: "Effort-Driven",  width: 125, minWidth: 20, maxWidth: 125, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark, sortable: true,
-    columnGroup:"Analysis", grouping: {
+    columnGroup: "Analysis", grouping: {
       getter: "effortDriven",
       formatter :function (g) {
         return "Effort-Driven:  " + (g.value ? "True" : "False") + "  <span style='color:green'>(" + g.count + " items)</span>";
@@ -467,6 +471,9 @@ <h2>View Source:</h2>
   grid.registerPlugin(draggableGrouping);
   grid.setSelectionModel(new Slick.CellSelectionModel());
   columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);
+  columnpicker.onColumnsChanged.subscribe(function () {
+    CreateAddlHeaderRow();
+  });
 
   grid.onSort.subscribe(function (e, args) {
     sortdir = args.sortAsc ? 1 : -1;
@@ -536,6 +543,9 @@ <h2>View Source:</h2>
   grid.onColumnsResized.subscribe(function (e, args) {
     CreateAddlHeaderRow();
   });
+  grid.onColumnsReordered.subscribe(function (e, args) {
+    CreateAddlHeaderRow();
+  });
 
   CreateAddlHeaderRow();
 });
diff --git a/examples/example-frozen-columns-and-column-group-hidden-col.html b/examples/example-frozen-columns-and-column-group-hidden-col.html
index a6a8be83..e603102a 100644
--- a/examples/example-frozen-columns-and-column-group-hidden-col.html
+++ b/examples/example-frozen-columns-and-column-group-hidden-col.html
@@ -64,7 +64,7 @@ <h2>View Source:</h2>
     // when it's a frozen grid, we need to render both side (left/right)
     if (options.frozenColumn >=0) {
       // Add column groups to left panel
-      var preHeaderPanelElm = grid.getPreHeaderPanelLeft();
+      let preHeaderPanelElm = grid.getPreHeaderPanelLeft();
       renderHeaderGroups(preHeaderPanelElm, 0, options.frozenColumn + 1, columns.length);
 
       // Add column groups to right panel
@@ -72,7 +72,7 @@ <h2>View Source:</h2>
       renderHeaderGroups(preHeaderPanelElm, options.frozenColumn + 1, columns.length);
     } else {
       // when it's a regular grid (without frozen rows), after clearning frozen columns, we re-render everything on the left
-      var preHeaderPanelElm = grid.getPreHeaderPanelLeft();
+      let preHeaderPanelElm = grid.getPreHeaderPanelLeft();
       renderHeaderGroups(preHeaderPanelElm, 0, columns.length);
     }
 
@@ -83,25 +83,28 @@ <h2>View Source:</h2>
       preHeaderPanel.style.width = `${grid.getHeadersWidth()}px`;
       preHeaderPanel.parentElement.classList.add("slick-header");
 
-      var headerColumnWidthDiff = grid.getHeaderColumnWidthDiff();
-      var m, header, lastColumnGroup = '', widthTotal = 0;
+      let headerColumnWidthDiff = grid.getHeaderColumnWidthDiff();
+      let m, header, lastColumnGroup = '', widthTotal = 0;
+      const columns = grid.getColumns();
 
-      for (var i = start; i < end; i++) {
+      for (let i = start; i < end; i++) {
         m = columns[i];
         if (m.hidden) continue;
 
-        if (lastColumnGroup === m.columnGroup && i>start) {
-          widthTotal += m.width;
-          header.style.width = `${widthTotal - headerColumnWidthDiff}px`;
-        } else {
-            widthTotal = m.width;
-            header = document.createElement('div');
-            header.className = 'ui-state-default slick-header-column';
-            header.innerHTML = `<span class="slick-column-name">${(m.columnGroup || '')}</span>`;
-            header.style.width = `${m.width - headerColumnWidthDiff}px`;
-            preHeaderPanel.appendChild(header);
+        if (m) {
+          if (lastColumnGroup === m.columnGroup && i>start) {
+            widthTotal += m.width;
+            header.style.width = `${widthTotal - headerColumnWidthDiff}px`;
+          } else {
+              widthTotal = m.width;
+              header = document.createElement('div');
+              header.className = 'ui-state-default slick-header-column';
+              header.innerHTML = `<span class="slick-column-name">${(m.columnGroup || '')}</span>`;
+              header.style.width = `${m.width - headerColumnWidthDiff}px`;
+              preHeaderPanel.appendChild(header);
+          }
+          lastColumnGroup = m.columnGroup;
         }
-        lastColumnGroup = m.columnGroup;
       }
     }
   }
@@ -113,19 +116,19 @@ <h2>View Source:</h2>
   }
 
   function pickerHeaderColumnValueExtractor(column) {
-    var headerGroup = column.columnGroup || '';
+    let headerGroup = column.columnGroup || '';
     if (headerGroup) {
       return headerGroup + ' - ' + column.name;
     }
     return column.name;
   }
 
-  var dataView;
-  var grid;
-  var data = [];
-  var columnpicker;
-  var gridMenuControl;
-  var options = {
+  let dataView;
+  let grid;
+  let data = [];
+  let columnpicker;
+  let gridMenuControl;
+  let options = {
     enableCellNavigation: true,
     enableColumnReorder: false,
     createPreHeaderPanel: true,
@@ -156,7 +159,7 @@ <h2>View Source:</h2>
       ]
     },
   };
-  var columns = [
+  let columns = [
     {id: "sel", name: "#", field: "num", behavior: "select", cssClass: "cell-selection", width: 40, resizable: false, selectable: false },
     {id: "title", name: "Title", field: "title", width: 120, minWidth: 120, cssClass: "cell-title", columnGroup:"Common Factor"},
     {id: "duration", name: "Duration", field: "duration", columnGroup:"Common Factor"},
@@ -167,8 +170,8 @@ <h2>View Source:</h2>
   ];
 
   document.addEventListener("DOMContentLoaded", function() {
-    for (var i = 0; i < 50000; i++) {
-      var d = (data[i] = {});
+    for (let i = 0; i < 50000; i++) {
+      let d = (data[i] = {});
 
       d["id"] = "id_" + i;
       d["num"] = i;
@@ -200,6 +203,9 @@ <h2>View Source:</h2>
     grid.onColumnsResized.subscribe(function (e, args) {
       CreateAddlHeaderRow();
     });
+    grid.onColumnsReordered.subscribe(function (e, args) {
+      CreateAddlHeaderRow();
+    });
 
     // subscribe to Grid Menu event(s)
     gridMenuControl.onCommand.subscribe(function(e, args) {
@@ -209,14 +215,14 @@ <h2>View Source:</h2>
     });
 
   document.querySelector('#chkHideColumn1').addEventListener("change", function(e) {
-    var hideCol = document.querySelector('#chkHideColumn1').checked || false;
+    let hideCol = document.querySelector('#chkHideColumn1').checked || false;
     columns[2].hidden = hideCol;
     grid.updateColumns();
     CreateAddlHeaderRow();
  });
 
   document.querySelector('#chkHideColumn2').addEventListener("change", function(e) {
-    var hideCol = document.querySelector('#chkHideColumn2').checked || false;
+    let hideCol = document.querySelector('#chkHideColumn2').checked || false;
     columns[4].hidden = hideCol;
     grid.updateColumns();
     CreateAddlHeaderRow();
diff --git a/examples/example-frozen-columns-and-column-group.html b/examples/example-frozen-columns-and-column-group.html
index bb72c6d7..1a6273ed 100644
--- a/examples/example-frozen-columns-and-column-group.html
+++ b/examples/example-frozen-columns-and-column-group.html
@@ -60,7 +60,7 @@ <h2>View Source:</h2>
     // when it's a frozen grid, we need to render both side (left/right)
     if (options.frozenColumn >=0) {
       // Add column groups to left panel
-      var preHeaderPanelElm = grid.getPreHeaderPanelLeft();
+      let preHeaderPanelElm = grid.getPreHeaderPanelLeft();
       renderHeaderGroups(preHeaderPanelElm, 0, options.frozenColumn + 1, columns.length);
 
       // Add column groups to right panel
@@ -68,7 +68,7 @@ <h2>View Source:</h2>
       renderHeaderGroups(preHeaderPanelElm, options.frozenColumn + 1, columns.length);
     } else {
       // when it's a regular grid (without frozen rows), after clearning frozen columns, we re-render everything on the left
-      var preHeaderPanelElm = grid.getPreHeaderPanelLeft();
+      let preHeaderPanelElm = grid.getPreHeaderPanelLeft();
       renderHeaderGroups(preHeaderPanelElm, 0, columns.length);
     }
 
@@ -79,23 +79,26 @@ <h2>View Source:</h2>
       preHeaderPanel.style.width = `${grid.getHeadersWidth()}px`;
       preHeaderPanel.parentElement.classList.add("slick-header");
 
-      var headerColumnWidthDiff = grid.getHeaderColumnWidthDiff();
-      var m, header, lastColumnGroup = '', widthTotal = 0;
+      let headerColumnWidthDiff = grid.getHeaderColumnWidthDiff();
+      let m, header, lastColumnGroup = '', widthTotal = 0;
+      const columns = grid.getColumns();
 
-      for (var i = start; i < end; i++) {
+      for (let i = start; i < end; i++) {
         m = columns[i];
-        if (lastColumnGroup === m.columnGroup && i>start) {
-          widthTotal += m.width;
-          header.style.width = `${widthTotal - headerColumnWidthDiff}px`;
-        } else {
-            widthTotal = m.width;
-            header = document.createElement('div');
-            header.className = 'ui-state-default slick-header-column';
-            header.innerHTML = `<span class="slick-column-name">${(m.columnGroup || '')}</span>`;
-            header.style.width = `${m.width - headerColumnWidthDiff}px`;
-            preHeaderPanel.appendChild(header);
+        if (m) {
+          if (lastColumnGroup === m.columnGroup && i>start) {
+            widthTotal += m.width;
+            header.style.width = `${widthTotal - headerColumnWidthDiff}px`;
+          } else {
+              widthTotal = m.width;
+              header = document.createElement('div');
+              header.className = 'ui-state-default slick-header-column';
+              header.innerHTML = `<span class="slick-column-name">${(m.columnGroup || '')}</span>`;
+              header.style.width = `${m.width - headerColumnWidthDiff}px`;
+              preHeaderPanel.appendChild(header);
+          }
+          lastColumnGroup = m.columnGroup;
         }
-        lastColumnGroup = m.columnGroup;
       }
     }
   }
@@ -107,19 +110,19 @@ <h2>View Source:</h2>
   }
 
   function pickerHeaderColumnValueExtractor(column) {
-    var headerGroup = column.columnGroup || '';
+    let headerGroup = column.columnGroup || '';
     if (headerGroup) {
       return headerGroup + ' - ' + column.name;
     }
     return column.name;
   }
 
-  var dataView;
-  var grid;
-  var data = [];
-  var columnpicker;
-  var gridMenuControl;
-  var options = {
+  let dataView;
+  let grid;
+  let data = [];
+  let columnpicker;
+  let gridMenuControl;
+  let options = {
     enableCellNavigation: true,
     enableColumnReorder: false,
     createPreHeaderPanel: true,
@@ -150,7 +153,7 @@ <h2>View Source:</h2>
       ]
     },
   };
-  var columns = [
+  let columns = [
     {id: "sel", name: "#", field: "num", behavior: "select", cssClass: "cell-selection", width: 40, resizable: false, selectable: false },
     {id: "title", name: "Title", field: "title", width: 120, minWidth: 120, cssClass: "cell-title", columnGroup:"Common Factor"},
     {id: "duration", name: "Duration", field: "duration", columnGroup:"Common Factor"},
@@ -161,8 +164,8 @@ <h2>View Source:</h2>
   ];
 
   document.addEventListener("DOMContentLoaded", function() {
-    for (var i = 0; i < 50000; i++) {
-      var d = (data[i] = {});
+    for (let i = 0; i < 50000; i++) {
+      let d = (data[i] = {});
 
       d["id"] = "id_" + i;
       d["num"] = i;
@@ -177,7 +180,13 @@ <h2>View Source:</h2>
     dataView = new Slick.Data.DataView();
     grid = new Slick.Grid("#myGrid", dataView, columns, options);
     columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);
+    columnpicker.onColumnsChanged.subscribe(function () {
+      CreateAddlHeaderRow();
+    });
     gridMenuControl = new Slick.Controls.GridMenu(columns, grid, options);
+    gridMenuControl.onColumnsChanged.subscribe(function () {
+      CreateAddlHeaderRow();
+    });
 
     dataView.onRowCountChanged.subscribe(function (e, args) {
       grid.updateRowCount();
@@ -195,6 +204,10 @@ <h2>View Source:</h2>
       CreateAddlHeaderRow();
     });
 
+    grid.onColumnsReordered.subscribe(function (e, args) {
+      CreateAddlHeaderRow();
+    });
+
     // subscribe to Grid Menu event(s)
     gridMenuControl.onCommand.subscribe(function(e, args) {
       if(args.command === "clear-frozen-columns") {
diff --git a/src/controls/slick.columnpicker.ts b/src/controls/slick.columnpicker.ts
index 42da50a8..3d992732 100644
--- a/src/controls/slick.columnpicker.ts
+++ b/src/controls/slick.columnpicker.ts
@@ -66,8 +66,13 @@ export class SlickColumnPicker {
 
   init(grid: SlickGrid) {
     Utils.addSlickEventPubSubWhenDefined(grid.getPubSubService(), this);
-    grid.onHeaderContextMenu.subscribe(this.handleHeaderContextMenu.bind(this));
     grid.onColumnsReordered.subscribe(this.updateColumnOrder.bind(this));
+    grid.onHeaderContextMenu.subscribe(this.handleHeaderContextMenu.bind(this));
+    grid.onPreHeaderContextMenu.subscribe((e) => {
+      if (['slick-column-name', 'slick-header-column'].some(className => e.target?.classList.contains(className))) {
+        this.handleHeaderContextMenu(e); // open picker only when preheader has column groups
+      }
+    });
 
     this._menuElm = document.createElement('div');
     this._menuElm.className = `slick-columnpicker ${this._gridUid}`;
@@ -109,6 +114,7 @@ export class SlickColumnPicker {
   }
 
   destroy() {
+    this.grid.onPreHeaderContextMenu.unsubscribe(this.handleHeaderContextMenu.bind(this));
     this.grid.onHeaderContextMenu.unsubscribe(this.handleHeaderContextMenu.bind(this));
     this.grid.onColumnsReordered.unsubscribe(this.updateColumnOrder.bind(this));
     this._bindingEventService.unbindAll();
diff --git a/src/models/gridEvents.interface.ts b/src/models/gridEvents.interface.ts
index b9bbf48b..4f884122 100644
--- a/src/models/gridEvents.interface.ts
+++ b/src/models/gridEvents.interface.ts
@@ -31,6 +31,8 @@ export interface OnHeaderClickEventArgs extends SlickGridArg { column: Column; }
 export interface OnHeaderContextMenuEventArgs extends SlickGridArg { column: Column; }
 export interface OnHeaderMouseEventArgs extends SlickGridArg { column: Column; }
 export interface OnHeaderRowCellRenderedEventArgs extends SlickGridArg { node: HTMLDivElement; column: Column; }
+export interface OnPreHeaderClickEventArgs extends SlickGridArg { node: HTMLElement; }
+export interface OnPreHeaderContextMenuEventArgs extends SlickGridArg { node: HTMLElement; }
 export interface OnKeyDownEventArgs extends SlickGridArg { row: number; cell: number; }
 export interface OnValidationErrorEventArgs extends SlickGridArg { row: number; cell: number; validationResults: EditorValidationResult; column: Column; editor: Editor; cellNode: HTMLDivElement; }
 export interface OnRenderedEventArgs extends SlickGridArg { startRow: number; endRow: number; }
diff --git a/src/slick.core.ts b/src/slick.core.ts
index 84429f48..4cda673a 100644
--- a/src/slick.core.ts
+++ b/src/slick.core.ts
@@ -600,8 +600,10 @@ export class BindingEventService {
 
   /** Bind an event listener to any element */
   bind(element: Element | Window, eventName: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions, groupName = '') {
-    element.addEventListener(eventName, listener, options);
-    this._boundedEvents.push({ element, eventName, listener, groupName });
+    if (element) {
+      element.addEventListener(eventName, listener, options);
+      this._boundedEvents.push({ element, eventName, listener, groupName });
+    }
   }
 
   /** Unbind all will remove every every event handlers that were bounded earlier */
diff --git a/src/slick.grid.ts b/src/slick.grid.ts
index 8636a8a5..9ad0a30d 100644
--- a/src/slick.grid.ts
+++ b/src/slick.grid.ts
@@ -24,7 +24,9 @@ import type {
   GridOption as BaseGridOption,
   InteractionBase,
   ItemMetadata,
+  MenuCommandItemCallbackArgs,
   MultiColumnSort,
+  OnActivateChangedOptionsEventArgs,
   OnActiveCellChangedEventArgs,
   OnAddNewRowEventArgs,
   OnAutosizeColumnsEventArgs,
@@ -39,6 +41,7 @@ import type {
   OnBeforeSetColumnsEventArgs,
   OnCellChangeEventArgs,
   OnCellCssStylesChangedEventArgs,
+  OnClickEventArgs,
   OnColumnsDragEventArgs,
   OnColumnsReorderedEventArgs,
   OnColumnsResizedEventArgs,
@@ -54,20 +57,19 @@ import type {
   OnHeaderMouseEventArgs,
   OnHeaderRowCellRenderedEventArgs,
   OnKeyDownEventArgs,
-  OnValidationErrorEventArgs,
+  OnPreHeaderContextMenuEventArgs,
+  OnPreHeaderClickEventArgs,
   OnRenderedEventArgs,
   OnSelectedRowsChangedEventArgs,
   OnSetOptionsEventArgs,
-  OnActivateChangedOptionsEventArgs,
   OnScrollEventArgs,
+  OnValidationErrorEventArgs,
   PagingInfo,
   RowInfo,
   SelectionModel,
   SingleColumnSort,
   SlickGridModel,
   SlickPlugin,
-  MenuCommandItemCallbackArgs,
-  OnClickEventArgs,
 } from './models/index';
 import {
   type BasePubSub,
@@ -183,6 +185,8 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
   onHeaderRowCellRendered: SlickEvent_<OnHeaderRowCellRenderedEventArgs>;
   onHeaderRowMouseEnter: SlickEvent_<OnHeaderMouseEventArgs>;
   onHeaderRowMouseLeave: SlickEvent_<OnHeaderMouseEventArgs>;
+  onPreHeaderContextMenu: SlickEvent_<OnPreHeaderContextMenuEventArgs>;
+  onPreHeaderClick: SlickEvent_<OnPreHeaderClickEventArgs>;
   onKeyDown: SlickEvent_<OnKeyDownEventArgs>;
   onMouseEnter: SlickEvent_<OnHeaderMouseEventArgs>;
   onMouseLeave: SlickEvent_<OnHeaderMouseEventArgs>;
@@ -577,6 +581,8 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     this.onHeaderRowCellRendered = new SlickEvent<OnHeaderRowCellRenderedEventArgs>('onHeaderRowCellRendered', externalPubSub);
     this.onHeaderRowMouseEnter = new SlickEvent<OnHeaderMouseEventArgs>('onHeaderRowMouseEnter', externalPubSub);
     this.onHeaderRowMouseLeave = new SlickEvent<OnHeaderMouseEventArgs>('onHeaderRowMouseLeave', externalPubSub);
+    this.onPreHeaderClick = new SlickEvent<OnPreHeaderClickEventArgs>('onPreHeaderClick', externalPubSub);
+    this.onPreHeaderContextMenu = new SlickEvent<OnPreHeaderContextMenuEventArgs>('onPreHeaderContextMenu', externalPubSub);
     this.onKeyDown = new SlickEvent<OnKeyDownEventArgs>('onKeyDown', externalPubSub);
     this.onMouseEnter = new SlickEvent<OnHeaderMouseEventArgs>('onMouseEnter', externalPubSub);
     this.onMouseLeave = new SlickEvent<OnHeaderMouseEventArgs>('onMouseLeave', externalPubSub);
@@ -944,6 +950,10 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
 
       if (this._options.createPreHeaderPanel) {
         this._bindingEventService.bind(this._preHeaderPanelScroller, 'scroll', this.handlePreHeaderPanelScroll.bind(this) as EventListener);
+        this._bindingEventService.bind(this._preHeaderPanelScroller, 'contextmenu', this.handlePreHeaderContextMenu.bind(this) as EventListener);
+        this._bindingEventService.bind(this._preHeaderPanelScrollerR, 'contextmenu', this.handlePreHeaderContextMenu.bind(this) as EventListener);
+        this._bindingEventService.bind(this._preHeaderPanelScroller, 'click', this.handlePreHeaderClick.bind(this) as EventListener);
+        this._bindingEventService.bind(this._preHeaderPanelScrollerR, 'click', this.handlePreHeaderClick.bind(this) as EventListener);
       }
 
       this._bindingEventService.bind(this._focusSink, 'keydown', this.handleKeyDown.bind(this) as EventListener);
@@ -5611,6 +5621,22 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     }
   }
 
+  protected handlePreHeaderContextMenu(e: MouseEvent & { target: HTMLElement; }) {
+    const header = e.target.closest('.slick-header-column');
+    this.trigger(this.onPreHeaderContextMenu, { node: header }, e);
+  }
+
+  protected handlePreHeaderClick(e: MouseEvent & { target: HTMLElement; }) {
+    if (this.columnResizeDragging) {
+      return;
+    }
+
+    const header = e.target.closest('.slick-header-column');
+    if (header) {
+      this.trigger(this.onPreHeaderClick, { node: header }, e);
+    }
+  }
+
   protected handleFooterContextMenu(e: MouseEvent & { target: HTMLElement; }) {
     const footer = e.target.closest('.slick-footerrow-column');
     const column = footer && Utils.storage.get(footer, 'column');