neo.mjs 10.4.0 → 10.5.0

package/.github/RELEASE_NOTES/v10.4.1.md

@@ -0,0 +1,16 @@
+# Neo.mjs v10.4.1 Release Notes
+
+## Highlights
+
+This patch release polishes the "instant preview" feature for grids introduced in v10.4.0, ensuring the grid's scrollbar and accessibility properties are correctly sized from the very first paint when loading large datasets. The non-buffered `table.Body` also receives a major performance boost for clearing data.
+
+## Enhancements & Bug Fixes
+
+### 1. Polished "Instant Preview" for Large Datasets in Grids
+The chunked loading mechanism for stores and grids has been refined. When adding a large dataset, the initial `load` event now carries the final total record count. The `grid.Container` uses this information immediately to set the correct `aria-rowcount` and to size the vertical scrollbar accurately, preventing layout shifts and providing a more stable and accessible user experience from the very first render.
+
+### 2. Standardized Internal Store `load` Event
+To support the "instant preview" refinements, the `data.Store` `load` event payload has been standardized internally. It now consistently uses an object containing an `items` property (e.g., `{items: [...]}`). Framework components have been updated to use this new signature.
+
+### 3. Performance Fast Path for `table.Body`
+The non-buffered `table.Body` is now significantly faster when clearing its data. It uses the same "fast path" optimization as `grid.Body`, directly clearing the DOM instead of processing a large and unnecessary VDOM diff when an empty dataset is loaded. This aligns the performance of the two components.

package/.github/RELEASE_NOTES/v10.5.0.md

@@ -0,0 +1,51 @@
+# Neo.mjs v10.5.0 Release Notes
+
+## Major Performance Enhancements for Grids and Data Handling
+
+This release introduces a groundbreaking set of performance optimizations for `Neo.data.Store` and `Neo.grid.Container`, fundamentally transforming how large datasets are handled within Neo.mjs applications. These enhancements dramatically reduce initial load times, improve UI responsiveness, and resolve critical VDom reconciliation issues, making it feasible to work with millions of data points with unprecedented fluidity.
+
+### Key Highlights:
+
+*   **Lazy Record Instantiation (GET-driven approach):**
+    *   `Neo.data.Store` now defers the creation of `Neo.data.Record` instances. Raw data objects are stored directly, and `Record` instances are only created on-demand when an item is explicitly accessed (e.g., via `store.get()`, `store.getAt()`, or during VDom rendering of visible rows).
+    *   **Impact:** This eliminates the massive upfront cost of instantiating millions of `Record` objects, leading to **up to 97% reduction in initial data processing time** for large datasets.
+
+*   **Configurable Data Chunking for UI Responsiveness:**
+    *   Introduced an `initialChunkSize` config in `Neo.data.Store` (default `0`). When enabled, `Store.add()` processes data in chunks, significantly mitigating UI freezes during synchronous loading of extremely large datasets (e.g., 1,000,000+ rows).
+    *   **Impact:** Provides a smoother perceived user experience during initial data loads, even for datasets that would otherwise cause multi-second UI blocks.
+
+*   **Robust Component ID Management for VDom Stability:**
+    *   Resolved critical VDom reconciliation errors (e.g., `RangeError`, infinite loops) that could occur with component columns when chunking was active. `Neo.grid.column.Component` now intelligently generates unique IDs based on the store's chunking state, ensuring VDom stability.
+    *   **Impact:** Eliminates a major source of instability and crashes when using component columns with large, dynamically loaded datasets.
+
+*   **Automated Component Instance Cleanup:**
+    *   Enhanced `Neo.grid.Body` with sophisticated component instance management. Components are now automatically destroyed when the grid body is destroyed, the store is cleared, the store changes, or when they scroll out of view after a chunked load.
+    *   **Impact:** Reduces memory overhead and improves long-term performance by preventing the accumulation of unused component instances.
+
+*   **GPU-Accelerated Vertical Scrolling (`translate3d`):**
+    *   Grid rows now utilize `transform: translate3d(0px, Ypx, 0px)` for vertical positioning. This hints to the browser to promote rows to their own composite layers, offloading rendering to the GPU.
+    *   **Impact:** Leads to noticeably smoother and more fluid vertical scrolling, especially during rapid movements through large grids.
+
+### Other Enhancements:
+
+*   **ComboBox Initial Display Fix:** Resolved an issue where `Neo.form.field.ComboBox` instances would appear blank on initial load when backed by lazily instantiated stores. The `updateInputValueFromValue` method now correctly displays values from raw data or `Record` instances.
+*   **Enhanced BigData Grid Example:** The `examples/grid/bigData` demo has been updated to include control options for up to 200 columns, allowing for testing with up to 20,000,000 cells. This provides a more extreme and comprehensive benchmark for grid performance.
+
+These collective improvements mark a significant leap forward in Neo.mjs's capability to handle and display massive amounts of data with high performance and a superior user experience.
+
+---
+
+### Performance Benchmarks (from `examples/grid/bigData`):
+
+| Scenario                               | Before (Eager Instantiation) | After (Lazy Instantiation, with chunking) | After (Lazy Instantiation, no chunking) |
+| :------------------------------------- | :--------------------------- | :---------------------------------------- | :-------------------------------------- |
+| 1,000 rows, 50 columns                 | 49ms (Record creation)       | 2ms (Data gen + add)                      | 2ms (Data gen + add)                    |
+| 50,000 rows, 50 columns                | 2391ms (Record creation)     | 1252ms (Data gen + add)                   | 93ms (Data gen + add)                   |
+| 50,000 rows, 100 columns               | 4377ms (Record creation)     | 1289ms (Data gen + add)                   | 95ms (Data gen + add)                   |
+| 100,000 rows, 50 columns               | N/A (too slow)               | 1299ms (Data gen + add)                   | 156ms (Data gen + add)                  |
+| 100,000 rows, 200 columns              | N/A (too slow)               | 1427ms (Data gen + add)                   | 174ms (Data gen + add)                  |
+
+*Note: "Record creation" refers to the time taken for `Neo.data.Record` instantiation. "Data gen + add" refers to the time taken to generate raw data and add it to the store's collection.*
+
+**Important Note on Chunking:**
+The introduction of lazy record instantiation significantly reduces the need for chunking in most common use cases, as the initial data loading is now extremely fast even for large datasets. However, Neo.mjs still optionally supports data chunking via the `initialChunkSize` config for scenarios involving truly massive synchronous data additions where mitigating UI freezes is paramount.

package/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='10.4.0'
+         * @member {String} version='10.5.0'
          */
-        version: '10.4.0'
+        version: '10.5.0'
     }
 
     /**

package/apps/finance/view/ViewportController.mjs

@@ -35,7 +35,7 @@ class ViewportController extends Controller {
             companiesStore = me.getStore('companies'),
             items          = [];
 
-        companiesStore.items.forEach(record => {
+        companiesStore.forEach(record => {
             items.push({
                 symbol: record.symbol,
                 value : Math.random() * 1000

package/apps/form/view/SideNavList.mjs

@@ -84,7 +84,7 @@ class SideNavList extends List {
     onStoreLoad() {
         let maxIndex = -1;
 
-        this.store.items.forEach(record => {
+        this.store.forEach(record => {
             if (!record.isHeader) {
                 maxIndex++
             }

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-08-11",
+      "datePublished": "2025-08-12",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/view/home/FooterContainer.mjs

@@ -108,7 +108,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                text  : 'v10.4.0'
+                text  : 'v10.5.0'
             }]
         }],
         /**

package/apps/realworld2/view/article/PreviewList.mjs

@@ -33,7 +33,7 @@ class PreviewList extends List {
 
         me.vdom.cn = [];
 
-        me.store.items.forEach(item => {
+        me.store.forEach(item => {
             listItem = Neo.create({
                 module  : PreviewComponent,
                 parentId: me.id,

package/docs/app/view/classdetails/MainContainerController.mjs

@@ -37,7 +37,7 @@ class MainContainerController extends Component {
             countProtecteds = 0,
             countStatics    = 0;
 
-        store.items.forEach(item => {
+        store.forEach(item => {
             if (item.kind === 'function') {
                 countMethods++
             } else if (item.kind === 'member') {

package/docs/app/view/classdetails/MembersList.mjs

@@ -128,7 +128,7 @@ class MembersList extends Base {
      * @returns {Object} vdom
      */
     applyConfigsHeader(store, vdom) {
-        if (store.items[0]?.kind === 'member') {
+        if (store.getAt(0)?.kind === 'member') {
             vdom.cn.push({
                 // scrolling placeholder
             }, {
@@ -152,7 +152,7 @@ class MembersList extends Base {
     applyEventsHeader(item, index, store, vdom) {
         if (
             item.kind === 'event' &&
-            store.items[index -1]?.kind !== 'event'
+            store.getAt(index -1)?.kind !== 'event'
         ) {
             vdom.cn.push({
                 // scrolling placeholder
@@ -179,8 +179,8 @@ class MembersList extends Base {
         if (
             item.kind === 'function' &&
             (
-                !store.items[index -1] || (
-                    store.items[index -1]?.kind !== 'function'
+                !store.getAt(index -1) || (
+                    store.getAt(index -1)?.kind !== 'function'
                 )
             )
         ) {
@@ -211,7 +211,7 @@ class MembersList extends Base {
         vdom.cn = [];
         vdom = me.applyConfigsHeader(me.store, vdom);
 
-        me.store.items.forEach((item, index) => {
+        me.store.forEach((item, index) => {
             vdom = me.applyEventsHeader( item, index, me.store, vdom);
             vdom = me.applyMethodsHeader(item, index, me.store, vdom);
 

package/examples/grid/bigData/ControlsContainer.mjs

@@ -17,10 +17,10 @@ class ControlsContainer extends Container {
      * @static
      */
     static delayable = {
-        onAmountColumnsChange    : {type: 'buffer', timer: 30},
-        onAmountRowsChange       : {type: 'buffer', timer: 30},
-        onBufferColumnRangeChange: {type: 'buffer', timer: 30},
-        onBufferRowRangeChange   : {type: 'buffer', timer: 30}
+        onAmountColumnsChange    : {type: 'buffer', timer: 15},
+        onAmountRowsChange       : {type: 'buffer', timer: 15},
+        onBufferColumnRangeChange: {type: 'buffer', timer: 15},
+        onBufferRowRangeChange   : {type: 'buffer', timer: 15}
     }
 
     static config = {
@@ -69,14 +69,14 @@ class ControlsContainer extends Container {
                     labelText : 'Amount Rows',
                     labelWidth: 120,
                     listeners : {change: 'up.onAmountRowsChange'},
-                    store     : ['1000', '5000', '10000', '20000', '50000'],
+                    store     : ['1000', '5000', '10000', '20000', '50000', '100000'],
                     value     : '1000',
                     width     : 200
                 }, {
                     labelText : 'Amount Columns',
                     labelWidth: 145,
                     listeners : {change: 'up.onAmountColumnsChange'},
-                    store     : ['10', '25', '50', '75', '100'],
+                    store     : ['10', '25', '50', '75', '100', '200'],
                     value     : '50',
                     width     : 200
                 }, {

package/examples/grid/bigData/MainStore.mjs

@@ -74,7 +74,7 @@ class MainStore extends Store {
 
             me.model.amountColumns = value;
 
-            console.log('Start creating records');
+            console.log('Start generating data and adding to collection');
 
             if (me.items?.length > 0) {
                 me.clear()
@@ -82,7 +82,7 @@ class MainStore extends Store {
 
             me.add(data);
 
-            console.log(`Record creation total time: ${Math.round(performance.now() - start)}ms`)
+            console.log(`Data generation and collection add total time: ${Math.round(performance.now() - start)}ms`)
         }
     }
 
@@ -97,7 +97,7 @@ class MainStore extends Store {
             data  = me.generateData(value, me.amountColumns),
             start = performance.now();
 
-        console.log('Start creating records');
+        console.log('Start generating data and adding to collection');
 
         if (me.items?.length > 0) {
             me.clear()
@@ -105,7 +105,7 @@ class MainStore extends Store {
 
         me.add(data);
 
-        console.log(`Record creation total time: ${Math.round(performance.now() - start)}ms`)
+        console.log(`Data generation and collection add total time: ${Math.round(performance.now() - start)}ms`)
     }
 
     /**

package/examples/grid/cellEditing/MainContainerStateProvider.mjs

@@ -47,7 +47,7 @@ class MainContainerStateProvider extends StateProvider {
 
         // if the main table store is already loaded, the country field renderer had no data
         if (mainStore.getCount() > 0) {
-            mainStore.items.forEach(record => {
+            mainStore.forEach(record => {
                 country = record.country;
 
                 // hack resetting the current value to get a new record change

package/examples/grid/nestedRecordFields/EditUserDialog.mjs

@@ -163,7 +163,7 @@ class EditUserDialog extends Dialog {
             me.record.set({annotations: {selected: false}})
         } else {
             // Assuming we want to support a single row selection
-            store.items.forEach(record => {
+            store.forEach(record => {
                 record.set({annotations: {
                     selected: record === me.record ? data.value : false
                 }})

package/examples/grid/nestedRecordFields/ViewportController.mjs

@@ -71,7 +71,7 @@ class ViewportController extends Component {
 
         // if the main table store is already loaded, the country field renderer had no data
         if (mainStore.getCount() > 0) {
-            mainStore.items.forEach(record => {
+            mainStore.forEach(record => {
                 country = record.country;
 
                 // hack resetting the current value to get a new record change

package/examples/table/cellEditing/MainContainerStateProvider.mjs

@@ -47,7 +47,7 @@ class MainContainerStateProvider extends StateProvider {
 
         // if the main table store is already loaded, the country field renderer had no data
         if (mainStore.getCount() > 0) {
-            mainStore.items.forEach(record => {
+            mainStore.forEach(record => {
                 country = record.country;
 
                 // hack resetting the current value to get a new record change

package/examples/table/nestedRecordFields/EditUserDialog.mjs

@@ -145,7 +145,7 @@ class EditUserDialog extends Dialog {
             me.record.set({annotations: {selected: false}})
         } else {
             // Assuming we want to support a single row selection
-            store.items.forEach(record => {
+            store.forEach(record => {
                 record.set({annotations: {
                     selected: record === me.record ? data.value : false
                 }})

package/examples/table/nestedRecordFields/ViewportStateProvider.mjs

@@ -47,7 +47,7 @@ class ViewportStateProvider extends StateProvider {
 
         // if the main table store is already loaded, the country field renderer had no data
         if (mainStore.getCount() > 0) {
-            mainStore.items.forEach(record => {
+            mainStore.forEach(record => {
                 country = record.country;
 
                 // hack resetting the current value to get a new record change

package/examples/tableStore/MainContainer.mjs

@@ -39,7 +39,7 @@ class MainContainer extends Viewport {
                 handler() {
                     let tabContainer = Neo.getComponent('myTableStoreContainer'),
                         store        = tabContainer.store,
-                        record       = store.items[0];
+                        record       = store.getAt(0);
 
                     record.firstname = record.firstname + '<span style="color:red;"> Foo</span>';
                 }
@@ -61,7 +61,7 @@ class MainContainer extends Viewport {
 
                     for (; j < repeats; j++) {
                         for (i=0; i < countRecords; i++) {
-                            record = store.items[i];
+                            record = store.getAt(i);
 
                             Object.entries(record.toJSON()).forEach(([field, value]) => {
                                 if (field !== 'githubId') {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "10.4.0",
+    "version": "10.5.0",
     "description": "Neo.mjs: The multi-threaded UI framework for building ultra-fast, desktop-like web applications with uncompromised responsiveness, inherent security, and a transpilation-free dev mode.",
     "type": "module",
     "repository": {

package/src/DefaultConfig.mjs

@@ -299,12 +299,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '10.4.0'
+     * @default '10.5.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '10.4.0'
+    version: '10.5.0'
 };
 
 Object.assign(DefaultConfig, {

package/src/collection/Base.mjs

@@ -849,7 +849,7 @@ class Collection extends Base {
      * @returns {Object}
      */
     first() {
-        return this._items[0]
+        return this.getAt(0)
     }
 
     /**
@@ -1041,7 +1041,7 @@ class Collection extends Base {
      * @returns {Object}
      */
     last() {
-        return this._items[this.count -1]
+        return this.getAt(this.count -1)
     }
 
     /**
@@ -1171,6 +1171,15 @@ class Collection extends Base {
         return this._items.some(...args)
     }
 
+    /**
+     * Executes a provided function once for each array element.
+     * @param {Function} fn The function to execute for each element.
+     * @param {Object} [scope] Value to use as `this` when executing `fn`.
+     */
+    forEach(fn, scope) {
+        this._items.forEach(fn, scope);
+    }
+
     /**
      * Removes items from and/or adds items to this collection
      * If the toRemoveArray is used, then the index is not used for removing, the entries are found by key and removed from where they are.
@@ -1214,10 +1223,19 @@ class Collection extends Base {
                 }
             }
         } else if (removeCountAtIndex && removeCountAtIndex > 0) {
-            removedItems.push(...items.splice(index, removeCountAtIndex));
-            removedItems.forEach(e => {
-                map.delete(e[keyProperty])
-            })
+            // Optimization: If this is a full clear operation, use map.clear()
+            if (index === 0 && removeCountAtIndex === me.count) {
+                removedItems = items;
+                me._items = [];
+                map.clear()
+            } else {
+                removedItems = items.splice(index, removeCountAtIndex);
+
+                // For partial removals, iterate and delete individual items from the map
+                removedItems.forEach(e => {
+                    map.delete(e[keyProperty])
+                })
+            }
         }
 
         if (toAddArray && (len = toAddArray.length) > 0) {

package/src/component/Gallery.mjs

@@ -307,7 +307,7 @@ class Gallery extends Component {
         if (Neo.isBoolean(oldValue)) {
             let me   = this,
                 i    = 0,
-                len  = Math.min(me.maxItems, me.store.items.length),
+                len  = Math.min(me.maxItems, me.store.count),
                 view = me.getItemsRoot();
 
             if (me.vnodeInitialized) {
@@ -424,7 +424,7 @@ class Gallery extends Component {
             vdom             = me.vdom,
             itemsRoot        = me.getItemsRoot(),
             i                = startIndex || 0,
-            len              = Math.min(me.maxItems, me.store.items.length),
+            len              = Math.min(me.maxItems, me.store.count),
             amountColumns, item, vdomItem;
 
         if (orderByRow) {
@@ -432,7 +432,7 @@ class Gallery extends Component {
         }
 
         for (; i < len; i++) {
-            item      = me.store.items[i];
+            item      = me.store.getAt(i);
             vdomItem  = me.createItem(me.itemTpl, item, i);
 
             vdomItem. style = vdomItem.style || {};

package/src/component/Helix.mjs

@@ -581,7 +581,7 @@ class Helix extends Component {
             {deltaY, itemAngle, matrix, radius, rotationAngle, translateX, translateY, translateZ, vdom} = me,
             group = me.getItemsRoot(),
             i     = startIndex || 0,
-            len   = Math.min(me.maxItems, me.store.items.length),
+            len   = Math.min(me.maxItems, me.store.count),
             angle, item, matrixItems, transformStyle, vdomItem, c, s, x, y, z;
 
         if (!me.mounted) {
@@ -592,7 +592,7 @@ class Helix extends Component {
             }, me, {once: true})
         } else {
             for (; i < len; i++) {
-                item = me.store.items[i];
+                item = me.store.getAt(i);
 
                 angle = -rotationAngle + i * itemAngle;
 
@@ -952,7 +952,7 @@ class Helix extends Component {
         }
 
         for (; index < len; index++) {
-            item     = me.store.items[index];
+            item     = me.store.getAt(index);
             vdomItem = vdom.cn[0].cn[0].cn[index];
 
             angle = -rotationAngle + index * itemAngle;
@@ -1024,7 +1024,7 @@ class Helix extends Component {
         for (; i < len; i++) {
             deltas.push({
                 action: 'moveNode',
-                id    : me.getItemVnodeId(me.store.items[i][me.keyProperty]),
+                id    : me.getItemVnodeId(me.store.getAt(i)[me.keyProperty]),
                 index : i,
                 parentId
             })

package/src/component/wrapper/GoogleMaps.mjs

@@ -287,7 +287,7 @@ class GoogleMaps extends Base {
             windowId
         });
 
-        this.markerStore.items.forEach(item => {
+        this.markerStore.forEach(item => {
             Neo.main.addon.GoogleMaps.addMarker({
                 appName,
                 mapId: id,

package/src/data/Store.mjs

@@ -65,6 +65,11 @@ class Store extends Base {
          * @reactive
          */
         initialData_: null,
+        /**
+         * The initial chunk size for adding large datasets. Set to 0 to disable chunking.
+         * @member {Number} initialChunkSize=0
+         */
+        initialChunkSize: 0,
         /**
          * @member {Boolean} isGrouped=false
          */
@@ -140,31 +145,37 @@ class Store extends Base {
      */
     add(item) {
         let items = Array.isArray(item) ? item : [item];
-        const threshold = 1000;
+        const threshold = this.initialChunkSize;
 
-        if (items.length > threshold) {
+        if (threshold > 0 && items.length > threshold) {
             const me    = this,
+                  total = me.count + items.length,
                   chunk = items.splice(0, threshold);
 
-            // 1. Add the first chunk. This fires 'mutate' -> 'load' and triggers the initial grid render.
-            super.add(me.createRecord(chunk));
+            me.chunkingTotal = total;
+
+            // 1. Add the first chunk. This fires 'mutate' -> 'load' (via onCollectionMutate)
+            //    and triggers the initial grid render. The 'load' event will contain the final total count.
+            super.add(chunk); // Pass raw chunk directly
 
             // 2. Suspend events to prevent the next 'add' from firing 'load'.
             me.suspendEvents = true;
 
             // 3. Add the rest of the items silently.
-            super.add(me.createRecord(items));
+            super.add(items); // Pass raw items directly
 
             // 4. Resume events.
             me.suspendEvents = false;
 
-            // 5. Manually fire a final 'load' event to update the grid's scrollbar.
-            me.fire('load', me.items);
+            // 5. Manually fire a final 'load' event to update the grid's scrollbar and notify other listeners.
+            me.fire('load', {items: me.items, postChunkLoad: true, total: me.chunkingTotal});
+
+            delete me.chunkingTotal;
 
-            return me.count
+            return me.count;
         }
 
-        return super.add(this.createRecord(item))
+        return super.add(item); // Pass raw item directly
     }
 
     /**
@@ -294,7 +305,7 @@ class Store extends Base {
         if (value) {
             this.isLoading = true;
 
-            value = this.createRecord(value)
+            // value = this.createRecord(value)
         }
 
         return value
@@ -357,6 +368,88 @@ class Store extends Base {
         return isArray ? config : config[0]
     }
 
+    /**
+     * Overrides collection.Base:find() to ensure the returned item(s) are Record instances.
+     * @param {Object|String} property
+     * @param {String|Number} [value] Only required in case the first param is a string
+     * @param {Boolean} returnFirstMatch=false
+     * @returns {Object|Object[]|null}
+     */
+    find(property, value, returnFirstMatch=false) {
+        const result = super.find(property, value, returnFirstMatch);
+
+        if (returnFirstMatch) {
+            return result ? this.get(result[this.keyProperty]) : null;
+        } else {
+            return result.map(item => this.get(item[this.keyProperty]));
+        }
+    }
+
+    /**
+     * Overrides collection.Base:findBy() to ensure the returned item(s) are Record instances.
+     * @param {function} fn The function to run for each item inside the start-end range. Return true for a match.
+     * @param {Object} scope=this The scope in which the passed function gets executed
+     * @param {Number} start=0 The start index
+     * @param {Number} end=this.count The end index (up to, last value excluded)
+     * @returns {Array}
+     */
+    findBy(fn, scope=this, start=0, end=this.count) {
+        const result = super.findBy(fn, scope, start, end);
+        return result.map(item => this.get(item[this.keyProperty]));
+    }
+
+    /**
+     * Overrides collection.Base:forEach() to ensure the iterated item is a Record instance.
+     * @param {Function} fn The function to execute for each record.
+     * @param {Object} [scope] Value to use as `this` when executing `fn`.
+     */
+    forEach(fn, scope) {
+        const me = this;
+        for (let i = 0; i < me.count; i++) {
+            fn.call(scope || me, me.getAt(i), i, me.items);
+        }
+    }
+
+    /**
+     * Overrides collection.Base:get() to ensure the returned item is a Record instance.
+     * @param {Number|String} key
+     * @returns {Object|null}
+     */
+    get(key) {
+        let item = super.get(key); // Get item from Collection.Base (could be raw data)
+
+        if (item && !RecordFactory.isRecord(item)) {
+            const record = RecordFactory.createRecord(this.model, item);
+            // Replace the raw data with the record instance in the collection
+            this.map.set(key, record);
+            const index = this._items.indexOf(item); // Find the index of the raw item
+            if (index !== -1) {
+                this._items[index] = record; // Replace it with the record
+            }
+            return record;
+        }
+        return item; // Already a record or null
+    }
+
+    /**
+     * Overrides collection.Base:getAt() to ensure the returned item is a Record instance.
+     * @param {Number} index
+     * @returns {Object|undefined}
+     */
+    getAt(index) {
+        let item = super.getAt(index); // Get item from Collection.Base (could be raw data)
+
+        if (item && !RecordFactory.isRecord(item)) {
+            const record = RecordFactory.createRecord(this.model, item);
+            // Replace the raw data with the record instance in the collection
+            this._items[index] = record;
+            // Also update the map, as the key might be derived from the item
+            this.map.set(record[this.keyProperty], record);
+            return record;
+        }
+        return item; // Already a record or undefined
+    }
+
     /**
      * @returns {String}
      */
@@ -447,7 +540,7 @@ class Store extends Base {
         let me = this;
 
         if (me.isConstructed && !me.isLoading) {
-            me.fire('load', me.items)
+            me.fire('load', {items: me.items, total: me.chunkingTotal});
         }
     }
 
@@ -478,7 +571,7 @@ class Store extends Base {
         // => break the sync flow to ensure potential listeners got applied
         Promise.resolve().then(() => {
             if (me.isLoaded) {
-                me.fire('load', me.items)
+                me.fire('load', {items: me.items})
             } else if (me.autoLoad) {
                 me.load()
             }

package/src/draggable/list/DragZone.mjs

@@ -62,7 +62,7 @@ class DragZone extends BaseDragZone {
             {store} = owner,
             node;
 
-        store.items.forEach((record, index) => {
+        store.forEach((record, index) => {
             node = me.getItemVdom(record, index);
 
             if (node) {

package/src/draggable/tree/DragZone.mjs

@@ -45,7 +45,7 @@ class DragZone extends BaseDragZone {
                 {store} = owner,
                 node;
 
-            store.items.forEach(record => {
+            store.forEach(record => {
                 if (!record.isLeaf) {
                     node = owner.getVdomChild(owner.getItemId(record.id), owner.vdom);
                     node.cls = node.cls || [];

package/src/form/field/ComboBox.mjs

@@ -695,7 +695,7 @@ class ComboBox extends Picker {
     updateInputValueFromValue(value) {
         let inputValue = null;
 
-        if (Neo.isRecord(value)) {
+        if (Neo.isObject(value) || Neo.isRecord(value)) {
             inputValue = value[this.displayField]
         }
 
@@ -745,7 +745,15 @@ class ComboBox extends Picker {
         if (me.typeAhead) {
             if (!me.value && value?.length > 0) {
                 const search = value.toLocaleLowerCase();
-                match = store.items.find(r => r[displayField]?.toLowerCase?.()?.startsWith(search));
+                let match = null;
+
+                for (let i = 0; i < store.count; i++) {
+                    const r = store.getAt(i);
+                    if (r[displayField]?.toLowerCase?.()?.startsWith(search)) {
+                        match = r;
+                        break;
+                    }
+                }
 
                 if (match && inputHintEl) {
                     inputHintEl.value = value + match[displayField].substr(value.length);

package/src/grid/Body.mjs

@@ -181,6 +181,17 @@ class GridBody extends Component {
         ]}
     }
 
+    /**
+     * Internal flag to adopt to store.add() passing an initial chunk.
+     * @member {Number} #initialChunkSize=0
+     */
+    #initialChunkSize = 0
+    /**
+     * Internal flag to adopt to store.add() passing an initial chunk.
+     * @member {Number} #initialChunkSize=0
+     */
+    #initialTotalSize = 0
+
     /**
      * @member {String[]} selectedCells
      */
@@ -427,6 +438,11 @@ class GridBody extends Component {
 
         oldValue?.un(listeners);
         value   ?.on(listeners);
+
+        // Clear component instances when the store changes or is replaced
+        if (oldValue) {
+            me.clearComponentColumnMaps();
+        }
     }
 
     /**
@@ -580,6 +596,46 @@ class GridBody extends Component {
         return ClassSystemUtil.beforeSetInstance(value, RowModel)
     }
 
+    /**
+     * Destroys all component instances created by component columns.
+     * @protected
+     */
+    clearComponentColumnMaps() {
+        let me      = this,
+            columns = me.parent.columns.items;
+
+        columns.forEach(column => {
+            if (column instanceof Neo.grid.column.Component) {
+                column.map.forEach(component => {
+                    component.destroy()
+                });
+                column.map.clear()
+            }
+        });
+    }
+
+    /**
+     * Cleans up component instances that are no longer visible or needed.
+     * @protected
+     */
+    cleanupComponentInstances() {
+        let me = this;
+
+        me.parent.columns.items.forEach(column => {
+            if (column instanceof Neo.grid.column.Component) {
+                column.map.forEach((component, id) => {
+                    // Extract rowIndex from component ID (e.g., "grid-body-1-component-950")
+                    const componentRowIndex = parseInt(id.split('-').pop());
+
+                    if (componentRowIndex < me.mountedRows[0] || componentRowIndex > me.mountedRows[1]) {
+                        component.destroy();
+                        column.map.delete(id)
+                    }
+                });
+            }
+        });
+    }
+
     /**
      * @param {Object} opts
      * @param {Object} opts.record
@@ -618,7 +674,7 @@ class GridBody extends Component {
 
             style: {
                 height   : me.rowHeight + 'px',
-                transform: `translate(0px, ${rowIndex * me.rowHeight}px)`
+                transform: `translate3d(0px, ${rowIndex * me.rowHeight}px, 0px)`
             }
         };
 
@@ -662,7 +718,7 @@ class GridBody extends Component {
         let me                   = this,
             {mountedRows, store} = me,
             rows                 = [],
-            i;
+            endIndex, i, range;
 
         if (
             store.isLoading                   ||
@@ -674,18 +730,24 @@ class GridBody extends Component {
             return
         }
 
-        // Creates the new start & end indexes
-        me.updateMountedAndVisibleRows();
+        if (me.#initialChunkSize > 0) {
+            endIndex = me.#initialChunkSize;
+            range    = endIndex;
+        } else {
+            // Creates the new start & end indexes
+            me.updateMountedAndVisibleRows();
+            endIndex = mountedRows[1]
+        }
 
-        for (i=mountedRows[0]; i < mountedRows[1]; i++) {
-            rows.push(me.createRow({record: store.items[i], rowIndex: i}))
+        for (i=mountedRows[0]; i < endIndex; i++) {
+            rows.push(me.createRow({record: store.getAt(i), rowIndex: i}))
         }
 
         me.getVdomRoot().cn = rows;
 
         me.parent.isLoading = false;
 
-        me.updateScrollHeight(true); // silent
+        me.updateScrollHeight(true, range); // silent
         !silent && me.update()
     }
 
@@ -694,6 +756,7 @@ class GridBody extends Component {
      */
     destroy(...args) {
         this.store = null; // remove the listeners
+        this.clearComponentColumnMaps(); // Destroy component instances
 
         super.destroy(...args)
     }
@@ -862,7 +925,11 @@ class GridBody extends Component {
     getRowId(rowIndex) {
         let me = this;
 
-        return `${me.id}__row-${rowIndex % (me.availableRows + 2 * me.bufferRowRange)}`
+        if (me.#initialChunkSize > 0) {
+            return `${me.id}__row-${rowIndex}`
+        } else {
+            return `${me.id}__row-${rowIndex % (me.availableRows + 2 * me.bufferRowRange)}`
+        }
     }
 
     /**
@@ -932,10 +999,13 @@ class GridBody extends Component {
     }
 
     /**
-     * @param {Object[]} data
+     * @param {Object}   data
+     * @param {Object[]} data.items
+     * @param {Boolean}  [data.postChunkLoad]
+     * @param {Number}   [data.total]
      * @protected
      */
-    onStoreLoad(data) {
+    onStoreLoad({items, postChunkLoad, total}) {
         let me = this;
 
         /*
@@ -944,7 +1014,7 @@ class GridBody extends Component {
          * This logic bypasses the standard update() cycle by directly clearing the vdom,
          * vnode cache and the real DOM via textContent.
          */
-        if (data?.length < 1) {
+        if (items?.length < 1) {
             const vdomRoot = me.getVdomRoot();
 
             // No change, opt out
@@ -963,9 +1033,19 @@ class GridBody extends Component {
             return
         }
 
-        me.createViewData();
+        // If it's the first chunked load (data.total exists and data.items is a subset of total)
+        // Render the entire chunk for immediate scrollability
+        if (total && items.length < total) {
+            me.#initialChunkSize = items.length;
+            me.#initialTotalSize = total;
+            me.createViewData();
+            me.#initialChunkSize = 0
+            me.#initialTotalSize = 0
+        } else {
+            me.createViewData()
+        }
 
-        if (me.mounted) {
+        if (me.mounted && !postChunkLoad) {
             me.timeout(50).then(() => {
                 Neo.main.DomAccess.scrollTo({
                     direction: 'top',
@@ -974,6 +1054,11 @@ class GridBody extends Component {
                 })
             })
         }
+
+        // Cleanup component instances after chunked load
+        if (postChunkLoad) {
+            me.cleanupComponentInstances()
+        }
     }
 
     /**
@@ -1172,7 +1257,7 @@ class GridBody extends Component {
      */
     updateScrollHeight(silent=false) {
         let me           = this,
-            countRecords = me.store?.getCount() || 0,
+            countRecords = me.#initialTotalSize || me.store?.count || 0,
             {rowHeight}  = me;
 
         if (countRecords > 0 && rowHeight > 0) {

package/src/grid/Container.mjs

@@ -565,13 +565,16 @@ class GridContainer extends BaseContainer {
     }
 
     /**
-     * @param {Object[]} data
+     * @param {Object}   data
+     * @param {Object[]} data.items
+     * @param {Number}   [data.total]
      * @protected
      */
     onStoreLoad(data) {
-        let me = this;
+        let me         = this,
+            totalCount = data.total ? data.total : this.store.count;
 
-        me.updateRowCount();
+        me.updateRowCount(totalCount);
 
         if (me.store.sorters?.length < 1) {
             me.removeSortingCss()
@@ -664,13 +667,15 @@ class GridContainer extends BaseContainer {
     }
 
     /**
-     * @param {Boolean} silent=false
+     * @param {Number} [count] The total number of rows in the store. Optional, will use store.count if not provided.
+     * @param {Boolean} [silent=false]
      */
-    updateRowCount(silent=false) {
-        let me = this;
+    updateRowCount(count, silent=false) {
+        let me         = this,
+            finalCount = count ? count : me.store.count;
 
-        this.getVdomRoot()['aria-rowcount'] = me.store.getCount() + 2; // 1 based & the header row counts as well
-        !silent && this.update()
+        me.getVdomRoot()['aria-rowcount'] = finalCount + 2;
+        !silent && me.update()
     }
 }
 

package/src/grid/VerticalScrollbar.mjs

@@ -100,18 +100,19 @@ class VerticalScrollbar extends Component {
                 filter: me.updateScrollHeight,
                 load  : me.updateScrollHeight,
                 scope : me
-            });
-
-            value.getCount() > 0 && me.updateScrollHeight()
+            })
         }
     }
 
     /**
-     *
+     * @param {Object}   data
+     * @param {Object[]} data.items
+     * @param {Number}   [data.total]
+     * @protected
      */
-    updateScrollHeight() {
+    updateScrollHeight(data) {
         let me           = this,
-            countRecords = me.store.getCount(),
+            countRecords = data?.total ? data.total : me.store.count,
             {rowHeight}  = me;
 
         if (countRecords > 0 && rowHeight > 0) {

package/src/grid/column/Component.mjs

@@ -132,9 +132,14 @@ class Component extends Column {
      */
     getComponentId(rowIndex) {
         let me     = this,
-            {body} = me.parent;
+            {body} = me.parent,
+            store  = body.store; // Access the store from the body
 
-        return `${me.id}-component-${rowIndex % (body.availableRows + 2 * body.bufferRowRange)}`
+        if (store.chunkingTotal) { // Check if chunking is active
+            return `${me.id}-component-${rowIndex}`; // Use rowIndex directly
+        } else {
+            return `${me.id}-component-${rowIndex % (body.availableRows + 2 * body.bufferRowRange)}`
+        }
     }
 }
 

package/src/list/Base.mjs

@@ -609,7 +609,7 @@ class List extends Component {
         if (!(me.animate && !me.getPlugin('list-animate'))) {
             vdom.cn = [];
 
-            me.store.items.forEach((item, index) => {
+            me.store.forEach((item, index) => {
                 listItem = me.createItem(item, index);
                 listItem && vdom.cn.push(listItem)
             });

package/src/selection/TreeAccordionModel.mjs

@@ -29,7 +29,9 @@ class TreeAccordionModel extends TreeModel {
             recordId    = record[view.getKeyProperty()],
             childRecord = null;
 
-        for (const item of view.store.items) {
+        for (let i = 0; i < view.store.count; i++) {
+            const item = view.store.getAt(i);
+
             if (item.parentId === recordId) {
                 childRecord = item;
                 break
@@ -66,7 +68,9 @@ class TreeAccordionModel extends TreeModel {
             nextItemRecord = null,
             previousItemRecord;
 
-        for (let item of store.items) {
+        for (let i = 0; i < store.count; i++) {
+            const item = store.getAt(i);
+
             if (hasFoundNext && item.parentId === parentRecordId) {
                 nextItemRecord = item;
                 break
@@ -255,7 +259,9 @@ class TreeAccordionModel extends TreeModel {
             {store} = view,
             record, rootItemId;
 
-        for (record of store.items) {
+        for (let i = 0; i < store.count; i++) {
+            const record = store.getAt(i);
+
             if (!record.parentId) {
                 rootItemId = view.getItemId(record[view.getKeyProperty()]);
                 break

package/src/table/Body.mjs

@@ -357,7 +357,7 @@ class TableBody extends Component {
             rows                  = [];
 
         for (; i < countRecords; i++) {
-            rows.push(me.createRow({record: store.items[i], rowIndex: i}))
+            rows.push(me.createRow({record: store.getAt(i), rowIndex: i}))
         }
 
         me.vdom.cn = rows;
@@ -558,12 +558,39 @@ class TableBody extends Component {
     }
 
     /**
-     * @param {Object[]} data
+     * @param {Object}   data
+     * @param {Object[]} data.items
+     * @param {Number}   [data.total]
      * @protected
      */
     onStoreLoad(data) {
         let me = this;
 
+        /*
+         * Fast path to handle clearing all rows (e.g., store.removeAll()).
+         * A full vdom diff against all existing rows is a performance bottleneck.
+         * This logic bypasses the standard update() cycle by directly clearing the vdom,
+         * vnode cache and the real DOM via textContent.
+         */
+        if (data?.items.length < 1) {
+            const vdomRoot = me.getVdomRoot();
+
+            // No change, opt out
+            if (vdomRoot.cn.length < 1) {
+                return
+            }
+
+            vdomRoot.cn = [];
+            me.getVnodeRoot().childNodes = [];
+
+            Neo.applyDeltas(me.appName, {
+                id         : vdomRoot.id,
+                textContent: ''
+            });
+
+            return
+        }
+
         me.createViewData();
 
         if (me.mounted) {

package/src/tree/Accordion.mjs

@@ -133,7 +133,7 @@ class AccordionTree extends TreeList {
         if (me.vnodeInitialized && value === false) {
             let {store} = me;
 
-            store.items.forEach(record => {
+            store.forEach(record => {
                 if (record.parentId === null && !record.isLeaf) {
                     me.expandItem(record)
                 }
@@ -153,7 +153,7 @@ class AccordionTree extends TreeList {
               {store} = me,
               hide    = !value;
 
-        store.items.forEach((record) => {
+        store.forEach(record => {
             const itemId   = me.getItemId(record[me.getKeyProperty()]),
                   vdom     = me.getVdomChild(itemId),
                   itemVdom = VDomUtil.getByFlag(vdom, 'iconCls');

package/src/tree/List.mjs

@@ -162,7 +162,7 @@ class Tree extends Base {
             hasMatch = false,
             node;
 
-        me.store.items.forEach(item => {
+        me.store.forEach(item => {
             if (!item.isLeaf) {
                 node = me.getVdomChild(me.getItemId(item.id), me.vdom);
 
@@ -303,7 +303,7 @@ class Tree extends Base {
             hasMatch = false,
             node;
 
-        me.store.items.forEach(item => {
+        me.store.forEach(item => {
             if (!item.isLeaf) {
                 node = me.getVdomChild(me.getItemId(item.id), me.vdom);
 
@@ -337,7 +337,7 @@ class Tree extends Base {
             value = ''
         }
 
-        me.store.items.forEach(item => {
+        me.store.forEach(item => {
             if (item.parentId === parentId) {
                 directMatch = false;
                 node        = me.getVdomChild(me.getItemId(item.id), me.vdom);