feat: Implement hybrid cell pooling for Grid Rows (#8992)

Author: tobiu

src/grid/Body.mjs

@@ -77,6 +77,14 @@ class GridBody extends Container {
          * @reactive
          */
         bufferRowRange_: 3,
+        /**
+         * The pool size for recyclable cells.
+         * Auto-calculated based on mounted columns range.
+         * @member {Number} cellPoolSize_=20
+         * @protected
+         * @reactive
+         */
+        cellPoolSize_: 20,
         /**
          * Define which model field contains the value of colspan definitions
          * @member {String} colspanField='colspan'
@@ -671,7 +679,16 @@ class GridBody extends Container {
      * @returns {String}
      */
     getCellId(rowIndex, dataField) {
-        return this.getRowId(rowIndex) + '__' + dataField
+        let me          = this,
+            column      = me.getColumn(dataField),
+            columnIndex = me.getColumn(dataField, true),
+            rowId       = me.getRowId(rowIndex);
+
+        if (column.hideMode === 'removeDom') {
+            return `${rowId}__cell-${columnIndex % me.cellPoolSize}`
+        }
+
+        return `${rowId}__${dataField}`
     }
 
     /**
@@ -1051,12 +1068,12 @@ class GridBody extends Container {
      */
     updateMountedAndVisibleColumns() {
         let me       = this,
-            {bufferColumnRange, columnPositions, mountedColumns, visibleColumns} = me,
+            {bufferColumnRange, cellPoolSize, columnPositions, mountedColumns, visibleColumns} = me,
             i            = 0,
             countColumns = columnPositions.getCount(),
             endIndex     = countColumns - 1,
             x            = me.scrollLeft,
-            column, startIndex;
+            column, newPoolSize, startIndex;
 
         if (countColumns < 1) {
             return
@@ -1082,7 +1099,14 @@ class GridBody extends Container {
             startIndex = Math.max(0, visibleColumns[0] - bufferColumnRange);
             endIndex   = Math.min(countColumns - 1, visibleColumns[1] + bufferColumnRange);
 
-            me.mountedColumns = [startIndex, endIndex]
+            if (endIndex - startIndex >= cellPoolSize) {
+                newPoolSize = endIndex - startIndex + 5;
+            }
+
+            me.set({
+                cellPoolSize  : newPoolSize || cellPoolSize,
+                mountedColumns: [startIndex, endIndex]
+            })
         }
     }
 

src/grid/Row.mjs

@@ -239,46 +239,99 @@ class Row extends Component {
 
         vdom.cls = rowCls;
 
-        for (i=0; i < countColumns; i++) {
-            isMounted = i >= mountedColumns[0] && i <= mountedColumns[1];
-            column    = columns.getAt(i);
+        // Pass 1: Render Pooled Cells (hideMode === 'removeDom')
+        // We only render these if they are within the mounted range.
+        // This loop is O(Viewport) - highly efficient.
+        for (i=mountedColumns[0]; i <= mountedColumns[1]; i++) {
+            column = columns.getAt(i);
+
+            // Sanity check for bounds (e.g. if column count changed)
+            if (!column) continue;
+
+            if (column.hideMode === 'removeDom') {
+                cellConfig = me.applyRendererOutput({
+                    cellId     : `${me.id}__cell-${i % gridBody.cellPoolSize}`,
+                    column,
+                    columnIndex: i,
+                    record,
+                    rowIndex,
+                    silent
+                });
+
+                if (column.dock) {
+                    cellConfig.cls = ['neo-locked', ...cellConfig.cls || []]
+                }
 
-            if (!isMounted && column.hideMode === 'removeDom') {
-                continue
-            }
+                columnPosition = gridBody.columnPositions.get(column.dataField);
 
-            cellConfig = me.applyRendererOutput({column, columnIndex: i, record, rowIndex, silent});
+                if (!columnPosition) {
+                    continue
+                }
 
-            if (column.dock) {
-                cellConfig.cls = ['neo-locked', ...cellConfig.cls || []]
-            }
+                cellConfig.style = {
+                    ...cellConfig.style,
+                    left : columnPosition.x     + 'px',
+                    width: columnPosition.width + 'px'
+                };
 
-            columnPosition = gridBody.columnPositions.get(column.dataField);
+                // Happens during a column header drag OP, when leaving the painted range
+                if (columnPosition.hidden) {
+                    cellConfig.style.visibility = 'hidden'
+                }
 
-            if (!columnPosition) {
-                continue
+                vdom.cn.push(cellConfig)
             }
+        }
 
-            cellConfig.style = {
-                ...cellConfig.style,
-                left : columnPosition.x     + 'px',
-                width: columnPosition.width + 'px'
-            };
+        // Pass 2: Render Permanent Cells (hideMode !== 'removeDom')
+        // We MUST render these even if they are off-screen to preserve their DOM state (e.g. Canvas context).
+        // This loop is O(TotalColumns), but typically few columns use this mode.
+        for (i=0; i < countColumns; i++) {
+            column = columns.getAt(i);
+
+            if (column.hideMode !== 'removeDom') {
+                isMounted = i >= mountedColumns[0] && i <= mountedColumns[1];
+
+                cellConfig = me.applyRendererOutput({
+                    cellId     : `${me.id}__${column.dataField}`,
+                    column,
+                    columnIndex: i,
+                    record,
+                    rowIndex,
+                    silent
+                });
+
+                if (column.dock) {
+                    cellConfig.cls = ['neo-locked', ...cellConfig.cls || []]
+                }
 
-            // Happens during a column header drag OP, when leaving the painted range
-            if (isMounted) {
-                if (columnPosition.hidden) {
-                    cellConfig.style.visibility = 'hidden'
+                columnPosition = gridBody.columnPositions.get(column.dataField);
+
+                if (!columnPosition) {
+                    continue
                 }
-            } else {
-                if (column.hideMode === 'visibility') {
-                    cellConfig.style.visibility = 'hidden'
-                } else if (column.hideMode === 'display') {
-                    cellConfig.style.display = 'none'
+
+                cellConfig.style = {
+                    ...cellConfig.style,
+                    left : columnPosition.x     + 'px',
+                    width: columnPosition.width + 'px'
+                };
+
+                // Visibility Logic
+                if (isMounted) {
+                    if (columnPosition.hidden) {
+                        cellConfig.style.visibility = 'hidden'
+                    }
+                } else {
+                    if (column.hideMode === 'visibility') {
+                        cellConfig.style.visibility = 'hidden'
+                    } else if (column.hideMode === 'display') {
+                        cellConfig.style.display = 'none'
+                    }
                 }
-            }
 
-            vdom.cn.push(cellConfig)
+                vdom.cn.push(cellConfig)
+            }
         }
 
         !silent && me.update()