fix: updateColumns() should be public use with column hidden

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

@@ -160,7 +160,7 @@ describe('SlickGrid core file', () => {
   });
 
   it('should be able to instantiate SlickGrid and invalidate some rows', () => {
-    const columns = [{ id: 'firstName', field: 'firstName', name: 'First Name' }] as Column[];
+    const columns = [{ id: 'firstName', field: 'firstName', name: 'First Name', cellAttrs: { 'cell-attr': 22 }, }] as Column[];
     const options = { enableCellNavigation: true, devMode: { ownerNodeIndex: 0 } } as GridOption;
     const data = [{ id: 0, firstName: 'John' }, { id: 1, firstName: 'Jane' }];
 
@@ -171,8 +171,9 @@ describe('SlickGrid core file', () => {
 
     grid.setData(data);
     grid.invalidate();
+    const cellElms = container.querySelectorAll('.slick-cell.l0.r0');
 
-    expect(grid).toBeTruthy();
+    expect(cellElms[0].getAttribute('cell-attr')).toBe('22');
     expect(invalidSpy).toHaveBeenCalled();
     expect(updateSpy).toHaveBeenCalled();
     expect(renderSpy).toHaveBeenCalled();
@@ -882,6 +883,29 @@ describe('SlickGrid core file', () => {
         expect(result).toBe(80 * 2);
       });
 
+      it('should return visible columns', () => {
+        const columns = [
+          { id: 'firstName', field: 'firstName', name: 'First Name', hidden: true },
+          { id: 'lastName', field: 'lastName', name: 'Last Name' },
+          { id: 'age', field: 'age', name: 'age' },
+        ] as Column[];
+        grid = new SlickGrid<any, Column>(container, [], columns, { ...options, frozenColumn: 1 });
+        const updateSpy = jest.spyOn(grid.onBeforeUpdateColumns, 'notify');
+        grid.updateColumns();
+        expect(grid.getVisibleColumns().length).toBe(2);
+
+        const newColumns = [
+          { id: 'firstName', field: 'firstName', name: 'First Name', hidden: false },
+          { id: 'lastName', field: 'lastName', name: 'Last Name', hidden: true },
+          { id: 'age', field: 'age', name: 'age', hidden: true },
+        ] as Column[];
+        grid.setColumns(newColumns);
+
+        expect(updateSpy).toHaveBeenCalled();
+        expect(grid.getHeader()[0]).toBeInstanceOf(HTMLDivElement);
+        expect(grid.getVisibleColumns().length).toBe(1);
+      });
+
       it('should return full grid width when fullWidthRows is enabled even with frozenColumn defined', () => {
         const columns = [
           { id: 'firstName', field: 'firstName', name: 'First Name', hidden: true },

packages/common/src/core/slickGrid.ts

@@ -2345,6 +2345,8 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     ];
 
     const sheet = this._style.sheet;
+
+    /* istanbul ignore else */
     if (sheet) {
       rules.forEach(rule => {
         sheet.insertRule(rule);
@@ -2356,7 +2358,6 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
         sheet.insertRule(`.${this.uid} .l${i} { }`);
         sheet.insertRule(`.${this.uid} .r${i} { }`);
       }
-      /* istanbul ignore else */
     } else {
       // fallback in case the 1st approach doesn't work, let's use our previous way of creating the css rules which is what works in Salesforce :(
       this.createCssRulesAlternative(rules);
@@ -2763,24 +2764,22 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
   }
 
   protected applyColumnHeaderWidths() {
-    if (!this.initialized) {
-      return;
-    }
-
-    let columnIndex = 0;
-    const vc = this.getVisibleColumns();
-    this._headers.forEach((header) => {
-      for (let i = 0; i < header.children.length; i++, columnIndex++) {
-        const h = header.children[i] as HTMLElement;
-        const col = vc[columnIndex] || {};
-        const width = (col.width || 0) - this.headerColumnWidthDiff;
-        if (Utils.width(h) !== width) {
-          Utils.width(h, width);
+    if (this.initialized) {
+      let columnIndex = 0;
+      const vc = this.getVisibleColumns();
+      this._headers.forEach((header) => {
+        for (let i = 0; i < header.children.length; i++, columnIndex++) {
+          const h = header.children[i] as HTMLElement;
+          const col = vc[columnIndex] || {};
+          const width = (col.width || 0) - this.headerColumnWidthDiff;
+          if (Utils.width(h) !== width) {
+            Utils.width(h, width);
+          }
         }
-      }
-    });
+      });
 
-    this.updateColumnCaches();
+      this.updateColumnCaches();
+    }
   }
 
   protected applyColumnWidths() {
@@ -2991,7 +2990,8 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     this.updateColumnsInternal();
   }
 
-  protected updateColumns() {
+  /** Update columns for when a hidden property has changed but the column list itself has not changed. */
+  updateColumns() {
     this.trigger(this.onBeforeUpdateColumns, { columns: this.columns, grid: this });
     this.updateColumnsInternal();
   }
@@ -3003,7 +3003,6 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     if (this.initialized) {
       this.setPaneVisibility();
       this.setOverflow();
-
       this.invalidateAllRows();
       this.createColumnHeaders();
       this.createColumnFooter();
@@ -3342,7 +3341,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
       (row % 2 === 1 ? ' odd' : ' even');
 
     if (!d) {
-      rowCss += ' ' + this._options.addNewRowCssClass;
+      rowCss += ` ${this._options.addNewRowCssClass}`;
     }
 
     const metadata = (this.data as CustomDataView<TData>)?.getItemMetadata?.(row);