feat: build the footer row lazily when createFooterRow is enabled at runtime

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

@@ -1694,6 +1694,49 @@ describe('SlickGrid core file', () => {
       expect(grid.getFooterRowColumn('firstName')).toBeUndefined();
     });
 
+    it('should lazily create footer row when "createFooterRow" is enabled at runtime', () => {
+      const columns = [
+        { id: 'firstName', field: 'firstName', name: 'First Name' },
+        { id: 'lastName', field: 'lastName', name: 'Last Name' },
+      ] as Column[];
+      grid = new SlickGrid<any, Column>(container, [], columns, {
+        ...defaultOptions,
+        createFooterRow: false,
+        showFooterRow: true,
+      });
+      grid.init();
+
+      const onFooterRowCellRenderedSpy = vi.spyOn(grid.onFooterRowCellRendered, 'notify');
+
+      expect(grid.getFooterRow()).toBeFalsy();
+      expect(container.querySelector('.slick-footerrow')).toBeFalsy();
+
+      expect(() => grid.setOptions({ createFooterRow: true, showFooterRow: true })).not.toThrow();
+
+      let footerElms = container.querySelectorAll<HTMLDivElement>('.slick-footerrow');
+      expect(footerElms).toBeTruthy();
+      expect(footerElms.length).toBe(2);
+      expect(footerElms[0].style.display).not.toBe('none');
+      expect(footerElms[1].style.display).not.toBe('none');
+      expect(grid.getFooterRow()).toBeTruthy();
+      expect(grid.getFooterRowColumn('firstName')).toEqual(footerElms[0].querySelector('.slick-footerrow-column'));
+      expect(onFooterRowCellRenderedSpy).toHaveBeenCalledTimes(2);
+
+      grid.setFooterRowVisibility(false);
+      footerElms = container.querySelectorAll<HTMLDivElement>('.slick-footerrow');
+      expect(footerElms[0].style.display).toBe('none');
+      expect(footerElms[1].style.display).toBe('none');
+
+      grid.setOptions({ createFooterRow: false });
+      expect(footerElms[0].style.display).toBe('none');
+      expect(footerElms[1].style.display).toBe('none');
+
+      grid.setOptions({ createFooterRow: true, showFooterRow: true });
+      footerElms = container.querySelectorAll<HTMLDivElement>('.slick-footerrow');
+      expect(footerElms[0].style.display).not.toBe('none');
+      expect(footerElms[1].style.display).not.toBe('none');
+    });
+
     it('should show footer when "showFooterRow" is enabled but not return any row when columns to the right are outside the range', () => {
       const columns = [
         { id: 'firstName', field: 'firstName', name: 'First Name' },

packages/common/src/core/slickGrid.ts

@@ -925,42 +925,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
 
     // footer Row
     if (this._options.createFooterRow) {
-      this._footerRowScrollerR = createDomElement('div', { className: 'slick-footerrow slick-state-default' }, this._paneTopR);
-      this._footerRowScrollerL = createDomElement('div', { className: 'slick-footerrow slick-state-default' }, this._paneTopL);
-
-      this._footerRowScroller = [this._footerRowScrollerL, this._footerRowScrollerR];
-
-      this._footerRowSpacerL = createDomElement(
-        'div',
-        { style: { display: 'block', height: '1px', position: 'absolute', top: '0px', left: '0px' } },
-        this._footerRowScrollerL
-      );
-      Utils.width(this._footerRowSpacerL, canvasWithScrollbarWidth);
-      this._footerRowSpacerR = createDomElement(
-        'div',
-        { style: { display: 'block', height: '1px', position: 'absolute', top: '0px', left: '0px' } },
-        this._footerRowScrollerR
-      );
-      Utils.width(this._footerRowSpacerR, canvasWithScrollbarWidth);
-
-      this._footerRowL = createDomElement(
-        'div',
-        { className: 'slick-footerrow-columns slick-footerrow-columns-left' },
-        this._footerRowScrollerL
-      );
-      this._footerRowR = createDomElement(
-        'div',
-        { className: 'slick-footerrow-columns slick-footerrow-columns-right' },
-        this._footerRowScrollerR
-      );
-
-      this._footerRow = [this._footerRowL, this._footerRowR];
-
-      if (!this._options.showFooterRow) {
-        this._footerRowScroller.forEach((scroller) => {
-          Utils.hide(scroller);
-        });
-      }
+      this.materializeFooterRow();
     }
 
     this._focusSink2 = this._focusSink.cloneNode(true) as HTMLDivElement;
@@ -1800,6 +1765,56 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     }
   }
 
+  /**
+   * Build footer row DOM lazily when footer row creation is enabled at runtime.
+   */
+  protected materializeFooterRow(): void {
+    const canvasWithScrollbarWidth = this.getCanvasWidth() + (this.scrollbarDimensions?.width || 0);
+
+    this._footerRowScrollerR = createDomElement('div', { className: 'slick-footerrow slick-state-default' }, this._paneTopR);
+    this._footerRowScrollerL = createDomElement('div', { className: 'slick-footerrow slick-state-default' }, this._paneTopL);
+    this._footerRowScroller = [this._footerRowScrollerL, this._footerRowScrollerR];
+
+    this._footerRowSpacerL = createDomElement(
+      'div',
+      { style: { display: 'block', height: '1px', position: 'absolute', top: '0px', left: '0px' } },
+      this._footerRowScrollerL
+    );
+    Utils.width(this._footerRowSpacerL, canvasWithScrollbarWidth);
+
+    this._footerRowSpacerR = createDomElement(
+      'div',
+      { style: { display: 'block', height: '1px', position: 'absolute', top: '0px', left: '0px' } },
+      this._footerRowScrollerR
+    );
+    Utils.width(this._footerRowSpacerR, canvasWithScrollbarWidth);
+
+    this._footerRowL = createDomElement(
+      'div',
+      { className: 'slick-footerrow-columns slick-footerrow-columns-left' },
+      this._footerRowScrollerL
+    );
+    this._footerRowR = createDomElement(
+      'div',
+      { className: 'slick-footerrow-columns slick-footerrow-columns-right' },
+      this._footerRowScrollerR
+    );
+    this._footerRow = [this._footerRowL, this._footerRowR];
+
+    if (!this._options.showFooterRow) {
+      this._footerRowScroller.forEach((scroller) => {
+        Utils.hide(scroller);
+      });
+    }
+
+    // Bind footer events only when footer row is created after init.
+    if (this.initialized) {
+      this._bindingEventService.bind(this._footerRow, 'contextmenu', this.handleFooterContextMenu.bind(this) as EventListener);
+      this._bindingEventService.bind(this._footerRow, 'click', this.handleFooterClick.bind(this) as EventListener);
+      this._bindingEventService.bind(this._footerRowScroller, 'scroll', this.handleFooterRowScroll.bind(this) as EventListener);
+    }
+  }
+
   protected handleHeaderMouseHoverOn(e: Event | SlickEventData): void {
     (e as any)?.target.classList.add('slick-state-hover');
   }
@@ -3732,6 +3747,21 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     this.validateAndEnforceOptions();
     this.setFrozenOptions();
 
+    if (this._options.createFooterRow) {
+      if (!this._footerRow) {
+        this.materializeFooterRow();
+      }
+      if (this._options.showFooterRow) {
+        Utils.show(this._footerRowScroller);
+      } else {
+        Utils.hide(this._footerRowScroller);
+      }
+    } else if (this._footerRowScroller) {
+      this._footerRowScroller.forEach((scroller) => {
+        Utils.hide(scroller);
+      });
+    }
+
     // when user changed frozen row option, we need to force a recalculation of each viewport heights
     if (this._options.frozenBottom !== undefined) {
       this.enforceFrozenRowHeightRecalc = true;