fix(common): resolve getHeaderColumn with hidden leading columns

Author: ghiscoding

packages/common/src/core/__tests__/slickGrid.spec.ts

@@ -2122,6 +2122,23 @@ describe('SlickGrid core file', () => {
       expect(slickRowElms[0].classList.contains('highlight-animate')).toBeFalsy();
       expect(slickRowElms[1].classList.contains('highlight-animate')).toBeFalsy();
     });
+
+    it('should return the correct header column by id when a hidden column precedes it', () => {
+      const columns = [
+        { id: 'a', field: 'a', name: 'A', hidden: true },
+        { id: 'b', field: 'b', name: 'B' },
+        { id: 'c', field: 'c', name: 'C' },
+      ] as Column[];
+      const rows = [{ id: 0, a: 'x', b: 'y', c: 'z' }];
+
+      grid = new SlickGrid<any, Column>(container, rows, columns, defaultOptions);
+      grid.init();
+
+      const headerElm = grid.getHeaderColumn('b');
+
+      expect(headerElm).toBeInstanceOf(HTMLDivElement);
+      expect(headerElm.dataset.id).toBe('b');
+    });
   });
 
   describe('flashCell() method', () => {

packages/common/src/core/slickGrid.ts

@@ -1640,12 +1640,19 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
    */
   getHeaderColumn(columnIdOrIdx: number | string): HTMLDivElement {
     const idx = typeof columnIdOrIdx === 'number' ? columnIdOrIdx : this.getColumnIndex(columnIdOrIdx);
-    // prettier-ignore
-    const targetHeader = this.hasFrozenColumns() ? ((idx <= this._options.frozenColumn!) ? this._headerL : this._headerR) : this._headerL;
-    // prettier-ignore
-    const targetIndex = this.hasFrozenColumns() ? ((idx <= this._options.frozenColumn!) ? idx : idx - this._options.frozenColumn! - 1) : idx;
+    const targetHeader = this.hasFrozenColumns() ? (idx <= this._options.frozenColumn! ? this._headerL : this._headerR) : this._headerL;
+    const targetIndex = this.hasFrozenColumns() ? (idx <= this._options.frozenColumn! ? idx : idx - this._options.frozenColumn! - 1) : idx;
+    const directMatch = targetHeader.children[targetIndex] as HTMLDivElement | undefined;
+    const targetColumnId = String(this.columns[idx]?.id ?? columnIdOrIdx);
+    const directMatchColumn = Utils.storage.get(directMatch, 'column') as C | undefined;
+    if (directMatch && (directMatch.dataset?.id === targetColumnId || String(directMatchColumn?.id) === targetColumnId)) {
+      return directMatch;
+    }
 
-    return targetHeader.children[targetIndex] as HTMLDivElement;
+    return (
+      (Array.from(targetHeader.children).find((child) => (child as HTMLDivElement).dataset?.id === targetColumnId) as HTMLDivElement) ||
+      (undefined as any)
+    );
   }
 
   /** Get the Header Row DOM element */