neo.mjs 8.28.1 → 8.30.0

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-03-02",
+      "datePublished": "2025-03-07",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

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

@@ -107,7 +107,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v8.28.1'
+                html  : 'v8.30.0'
             }]
         }],
         /**

package/examples/ServiceWorker.mjs

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

package/examples/grid/bigData/GridContainer.mjs

@@ -1,4 +1,5 @@
 import BaseGridContainer from '../../../src/grid/Container.mjs';
+import Button            from '../../../src/button/Base.mjs';
 import MainStore         from './MainStore.mjs';
 
 /**
@@ -45,11 +46,19 @@ class GridContainer extends BaseGridContainer {
      * @protected
      */
     afterSetAmountColumns(value, oldValue) {
-        let i       = 4,
+        let i       = 7,
             columns = [
-                {dataField: 'id', text: '#', width: 60, renderer({record, store}) {return store.indexOf(record) + 1}},
+                {type: 'index', dataField: 'id', text: '#', width: 60},
                 {cellAlign: 'left', dataField: 'firstname', defaultSortDirection: 'ASC', text: 'Firstname', width: 150},
-                {cellAlign: 'left', dataField: 'lastname',  defaultSortDirection: 'ASC', text: 'Lastname',  width: 150}
+                {cellAlign: 'left', dataField: 'lastname',  defaultSortDirection: 'ASC', text: 'Lastname',  width: 150},
+                {cellAlign: 'left', dataField: 'countAction', text: 'Increase Counter', width: 150,  component: ({record}) => ({
+                    module: Button,
+                    handler() {record.counter++},
+                    text  : record.firstname + ' ++',
+                    width : 130
+                })},
+                {type: 'animatedChange', dataField: 'counter', text: 'Counter'},
+                {type: 'progress',       dataField: 'progress', text: 'Progress', width: 150}
             ];
 
         for (; i <= value; i++) {

package/examples/grid/bigData/MainModel.mjs

@@ -24,11 +24,14 @@ class MainModel extends Model {
      * @protected
      */
     afterSetAmountColumns(value, oldValue) {
-        let i      = 4,
+        let i      = 7,
             fields = [
                 {name: 'id',        type: 'Int'},
+                {name: 'countAction'},
+                {name: 'counter',   type: 'Int'},
                 {name: 'firstname', type: 'String'},
-                {name: 'lastname',  type: 'String'}
+                {name: 'lastname',  type: 'String'},
+                {name: 'progress',  type: 'Int'}
             ];
 
         for (; i <= value; i++) {

package/examples/grid/bigData/MainStore.mjs

@@ -113,11 +113,13 @@ class MainStore extends Store {
             column, record;
 
         for (; row < amountRows; row++) {
-            column = 4;
+            column = 7;
             record = {
                 id       : row + 1,
+                counter  : Math.round(Math.random() * 100),
                 firstname: me.firstnames[Math.floor(Math.random() * amountFirstnames)],
-                lastname : me.lastnames[ Math.floor(Math.random() * amountLastnames)]
+                lastname : me.lastnames[ Math.floor(Math.random() * amountLastnames)],
+                progress : Math.round(Math.random() * 100)
             };
 
             for (; column <= amountColumns; column++) {

package/examples/grid/nestedRecordFields/Viewport.mjs

@@ -43,7 +43,7 @@ class Viewport extends BaseViewport {
             }]
         }, {
             module   : GridContainer,
-            bind     : {store : 'stores.mainStore'},
+            bind     : {store: 'stores.mainStore'},
             reference: 'grid',
 
             columnDefaults: {
@@ -55,7 +55,11 @@ class Viewport extends BaseViewport {
                 {dataField: 'user.lastname',  text: 'Lastname'},
                 {dataField: 'githubId',       text: 'Github Id'},
                 {dataField: 'country',        text: 'Country',     renderer: 'up.countryRenderer'},
-                {dataField: 'edit',           text: 'Edit Action', renderer: 'up.editRenderer'}
+                {dataField: 'edit',           text: 'Edit Action', component: {
+                    module : Button,
+                    handler: 'up.editButtonHandler',
+                    text   : 'Edit'
+                }}
             ],
 
             viewConfig: {
@@ -72,8 +76,8 @@ class Viewport extends BaseViewport {
     /**
      * @param {Object} data
      */
-    countryRenderer({record}) {
-        let countryStore = this.getStateProvider().getStore('countries');
+    countryRenderer({gridContainer, record}) {
+        let countryStore = gridContainer.getStateProvider().getStore('countries');
 
         if (countryStore.getCount() > 0) {
             return countryStore.get(record.country).name
@@ -111,28 +115,6 @@ class Viewport extends BaseViewport {
         }
     }
 
-    /**
-     * @param {Object} data
-     */
-    editRenderer({column, gridContainer, record, rowIndex}) {
-        let me                  = this,
-            {appName, windowId} = me,
-            widgetId            = `${column.id}-widget-${rowIndex}`,
-            button              = (column.widgetMap || (column.widgetMap = {}))[widgetId] || (column.widgetMap[widgetId] = Neo.create({
-                module  : Button,
-                appName,
-                handler : 'up.editButtonHandler',
-                parentId: gridContainer.id,
-                record,
-                text    : 'Edit',
-                windowId
-            }));
-
-        me.view.updateDepth = -1;
-
-        return button.createVdomReference()
-    }
-
     /**
      * @param {Object} data
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.28.1",
+    "version": "8.30.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/scss/src/component/Progress.scss

@@ -1,3 +1,3 @@
-.neo-progress {
+.neo-progress-wrapper {
     color: var(--progress-label-color);
 }

package/resources/scss/src/grid/column/AnimatedChange.scss

@@ -0,0 +1,15 @@
+@keyframes grid-animated-cell {
+    50%  {background-color:var(--button-ripple-background-color);}
+}
+
+.neo-grid-container {
+    .neo-grid-row, .neo-grid-row.neo-even {
+        .neo-grid-cell {
+            &.neo-animated {
+                animation-name           : grid-animated-cell;
+                animation-duration       : .4s;
+                animation-timing-function: ease-in-out;
+            }
+        }
+    }
+}

package/resources/scss/src/grid/column/Progress.scss

@@ -0,0 +1,34 @@
+.neo-grid-cell {
+    .neo-progress-wrapper {
+        progress[value] {
+            appearance: none;
+            border    : none;
+            display   : flex;
+            height    : var(--grid-cell-progress-height);
+
+            @-moz-document url-prefix() {
+                background-color: var(--grid-cell-progress-track-color);
+                border-radius   : var(--grid-cell-progress-border-radius);
+                box-shadow      : 0 2px 5px rgba(0, 0, 0, 0.25) inset;
+            }
+
+            // for webkit the progress-bar is the track
+            &::-webkit-progress-bar {
+                background-color: var(--grid-cell-progress-track-color);
+                border-radius   : var(--grid-cell-progress-border-radius);
+                box-shadow      : 0 2px 5px rgba(0, 0, 0, 0.25) inset;
+            }
+
+            // for mozilla the progress-bar is the active range
+            &::-moz-progress-bar {
+                background-color: var(--grid-cell-progress-active-color);
+                border-radius   : var(--grid-cell-progress-border-radius);
+            }
+
+            &::-webkit-progress-value {
+                background-color: var(--grid-cell-progress-active-color);
+                border-radius   : var(--grid-cell-progress-border-radius);
+            }
+        }
+    }
+}

package/resources/scss/theme-dark/grid/column/Progress.scss

@@ -0,0 +1,6 @@
+:root .neo-theme-dark { // .neo-grid-cell
+    --grid-cell-progress-active-color : #5d83a7;
+    --grid-cell-progress-border-radius: 2px;
+    --grid-cell-progress-height       : 10px;
+    --grid-cell-progress-track-color  : #333;
+}

package/resources/scss/theme-light/grid/column/Progress.scss

@@ -0,0 +1,6 @@
+:root .neo-theme-light { // .neo-grid-cell
+    --grid-cell-progress-active-color : #5d83a7;
+    --grid-cell-progress-border-radius: 2px;
+    --grid-cell-progress-height       : 10px;
+    --grid-cell-progress-track-color  : #eee;
+}

package/resources/scss/theme-neo-light/grid/column/Progress.scss

@@ -0,0 +1,6 @@
+:root .neo-theme-neo-light { // .neo-grid-cell
+    --grid-cell-progress-active-color : #5d83a7;
+    --grid-cell-progress-border-radius: 2px;
+    --grid-cell-progress-height       : 10px;
+    --grid-cell-progress-track-color  : #eee;
+}

package/src/DefaultConfig.mjs

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

package/src/component/Base.mjs

@@ -451,7 +451,7 @@ class Component extends Base {
     get parent() {
         let me = this;
 
-        return me.parentComponent || me.parentId === 'document.body' ? null : Neo.getComponent(me.parentId)
+        return me.parentComponent || (me.parentId === 'document.body' ? null : Neo.getComponent(me.parentId))
     }
 
     /**

package/src/component/Progress.mjs

@@ -37,12 +37,25 @@ class Progress extends Base {
          * @member {Object} _vdom
          */
         _vdom:
-        {tag: 'div', cls: ['neo-progress'], cn: [
+        {tag: 'div', cls: ['neo-progress-wrapper'], cn: [
             {tag: 'label'},
             {tag: 'progress'}
         ]}
     }
 
+    /**
+     * @member {Object} label
+     */
+    get label() {
+        return this.vdom.cn[0]
+    }
+    /**
+     * @member {Object} progress
+     */
+    get progress() {
+        return this.vdom.cn[1]
+    }
+
     /**
      * Triggered after the id config got changed
      * @param {String} value
@@ -52,7 +65,7 @@ class Progress extends Base {
     afterSetId(value, oldValue) {
         super.afterSetId(value, oldValue);
 
-        this.vdom.cn[0].for = value;
+        this.label.for = value;
         this.update()
     }
 
@@ -63,7 +76,15 @@ class Progress extends Base {
      * @protected
      */
     afterSetLabelText(value, oldValue) {
-        this.vdom.cn[0].html = value;
+        let {label} = this;
+
+        if (!value) {
+            label.removeDom = true
+        } else {
+            delete label.removeDom
+        }
+
+        label.html = value;
         this.update()
     }
 
@@ -74,7 +95,7 @@ class Progress extends Base {
      * @protected
      */
     afterSetMax(value, oldValue) {
-        this.vdom.cn[1].max = value;
+        this.progress.max = value;
         this.update()
     }
 
@@ -85,7 +106,7 @@ class Progress extends Base {
      * @protected
      */
     afterSetValue(value, oldValue) {
-        this.vdom.cn[1].value = value;
+        this.progress.value = value;
         this.update()
     }
 

package/src/core/Observable.mjs

@@ -67,6 +67,11 @@ class Observable extends Base {
                 delete name.once
             }
 
+            if (name.hasOwnProperty('order')) {
+                order = name.order;
+                delete name.order
+            }
+
             if (name.hasOwnProperty('scope')) {
                 scope = name.scope;
                 delete name.scope
@@ -74,9 +79,9 @@ class Observable extends Base {
 
             Object.entries(name).forEach(([key, value]) => {
                 if (Neo.isObject(value)) {
-                    me.addListener(key, {delay, once, scope, ...value})
+                    me.addListener(key, {delay, once, order, scope, ...value})
                 } else {
-                    me.addListener(key, {delay, fn: value, once, scope})
+                    me.addListener(key, {delay, fn: value, once, order, scope})
                 }
             })
         } else if (optsType === 'object') {

package/src/draggable/grid/header/toolbar/SortZone.mjs

@@ -115,9 +115,7 @@ class SortZone extends BaseSortZone {
      */
     moveTo(fromIndex, toIndex) {
         super.moveTo(fromIndex, toIndex);
-
-        // It is crucial to use _columns to not get a shallow copy
-        NeoArray.move(this.owner.parent._columns, fromIndex, toIndex);
+        this.owner.parent.columns.move(fromIndex, toIndex)
     }
 
     /**

package/src/grid/Container.mjs

@@ -1,9 +1,11 @@
 import BaseContainer     from '../container/Base.mjs';
 import ClassSystemUtil   from '../util/ClassSystem.mjs';
+import Collection        from '../collection/Base.mjs';
 import GridView          from './View.mjs';
 import ScrollManager     from './ScrollManager.mjs';
 import Store             from '../data/Store.mjs';
 import VerticalScrollbar from './VerticalScrollbar.mjs';
+import * as column       from './column/_export.mjs';
 import * as header       from './header/_export.mjs';
 
 /**
@@ -11,6 +13,18 @@ import * as header       from './header/_export.mjs';
  * @extends Neo.container.Base
  */
 class GridContainer extends BaseContainer {
+    /**
+     * @member {Object} columnTypes
+     * @protected
+     * @static
+     */
+    static columnTypes = {
+        animatedChange: column.AnimatedChange,
+        column        : column.Base,
+        component     : column.Component,
+        index         : column.Index,
+        progress      : column.Progress
+    }
     /**
      * @member {Object} delayable
      * @protected
@@ -182,7 +196,7 @@ class GridContainer extends BaseContainer {
 
         me.vdom.id = me.getWrapperId();
 
-        me.createColumns(me.columns);
+        me._columns = me.createColumns(me.columns);
 
         me.addDomListeners({
             resize: me.onResize,
@@ -235,19 +249,15 @@ class GridContainer extends BaseContainer {
 
     /**
      * Triggered after the columns config got changed
-     * @param {Object[]|null} value
-     * @param {Object[]|null} oldValue
+     * @param {Neo.collection.Base|null}          value
+     * @param {Object[]|Neo.collection.Base|null} oldValue
      * @protected
      */
     async afterSetColumns(value, oldValue) {
-        if (oldValue?.length > 0) {
-            let me              = this,
-                {headerToolbar} = me;
+        if (oldValue?.getCount?.() > 0) {
+            let me = this;
 
-            if (headerToolbar) {
-                headerToolbar.items = value;
-                headerToolbar.createItems()
-            }
+            me.headerToolbar?.createItems()
 
             await me.timeout(50);
 
@@ -413,41 +423,57 @@ class GridContainer extends BaseContainer {
     createColumns(columns) {
         let me               = this,
             {columnDefaults} = me,
+            headerButtons    = [],
             sorters          = me.store?.sorters,
-            renderer;
-
-        if (!columns || !columns.length) {
-            Neo.logError('Attempting to create a grid.Container without defined columns', me.id);
-        }
+            columnClass, renderer;
 
-        columns.forEach(column => {
+        columns?.forEach((column, index) => {
             renderer = column.renderer;
 
             columnDefaults && Neo.assignDefaults(column, columnDefaults);
 
-            if (column.dock && !column.width) {
-                Neo.logError('Attempting to create a docked column without a defined width', column, me.id);
-            }
-
             if (renderer && Neo.isString(renderer) && me[renderer]) {
                 column.renderer = me[renderer]
             }
 
-            if (sorters?.[0]) {
-                if (column.dataField === sorters[0].property) {
-                    column.isSorted = sorters[0].direction
-                }
+            if (sorters?.[0] && column.dataField === sorters[0].property) {
+                column.isSorted = sorters[0].direction
             }
 
             column.listeners = {
                 sort : me.onSortColumn,
                 scope: me
+            };
+
+            headerButtons.push(column);
+
+            if (column.component && !column.type) {
+                column.type = 'component'
             }
+
+            columnClass = me.constructor.columnTypes[column.type || 'column'];
+            delete column.type;
+
+            columns[index] = Neo.create(columnClass, {
+                parent  : me,
+                windowId: me.windowId,
+                ...column
+            })
         });
 
-        me.items[0].items = columns;
+        me.items[0].items = headerButtons;
 
-        return columns
+        if (Neo.typeOf(me._columns) === 'NeoInstance') {
+            me._columns.clear();
+            me._columns.add(columns);
+
+            return me._columns
+        }
+
+        return Neo.create(Collection, {
+            keyProperty: 'dataField',
+            items      : columns
+        })
     }
 
     /**

package/src/grid/ScrollManager.mjs

@@ -151,7 +151,7 @@ class ScrollManager extends Base {
 
         me.scrollTimeoutId = setTimeout(() => {
             view.isScrolling = false
-        }, 30);
+        }, 100);
 
         view.set({isScrolling: true, scrollTop});
 

package/src/grid/View.mjs

@@ -388,7 +388,7 @@ class GridView extends Component {
             fieldValue = ''
         }
 
-        rendererOutput = column.renderer.call(column.rendererScope || gridContainer, {
+        rendererOutput = column.renderer.call(column.rendererScope || column, {
             column,
             columnIndex,
             dataField,
@@ -512,7 +512,7 @@ class GridView extends Component {
         let me            = this,
             {mountedColumns, selectedRows} = me,
             gridContainer = me.parent,
-            columns       = gridContainer.headerToolbar.items,
+            {columns}     = gridContainer,
             id            = me.getRowId(record, rowIndex),
             rowCls        = me.getRowClass(record, rowIndex),
             config, column, columnPosition,  gridRow, i;
@@ -544,7 +544,7 @@ class GridView extends Component {
         };
 
         for (i=mountedColumns[0]; i <= mountedColumns[1]; i++) {
-            column = columns[i];
+            column = columns.getAt(i);
             config = me.applyRendererOutput({column, columnIndex: i, record, rowIndex});
 
             if (column.dock) {
@@ -661,17 +661,11 @@ class GridView extends Component {
      * @returns {Object|Number|null}
      */
     getColumn(field, returnIndex=false) {
-        let columns = this.parent.headerToolbar.items,
-            i       = 0,
-            len     = columns.length,
-            column;
+        let {columns} = this.parent,
+            column    = columns.get(field);
 
-        for (; i < len; i++) {
-            column = columns[i];
-
-            if (column.dataField === field) {
-                return returnIndex ? i : column
-            }
+        if (column) {
+            return returnIndex ? columns.indexOf(column) : column
         }
 
         return null
@@ -856,51 +850,42 @@ class GridView extends Component {
     }
 
     /**
-     * Gets triggered after changing the value of a record field.
-     * E.g. myRecord.foo = 'bar';
-     * @param {Object} opts
-     * @param {Object[]} opts.fields Each field object contains the keys: name, oldValue, value
-     * @param {Neo.data.Model} opts.model The model instance of the changed record
-     * @param {Object} opts.record
+     * @param {Object}         data
+     * @param {Object[]}       data.fields Each field object contains the keys: name, oldValue, value
+     * @param {Neo.data.Model} data.model The model instance of the changed record
+     * @param {Object}         data.record
      */
     onStoreRecordChange({fields, record}) {
-        let me                     = this,
-            fieldNames             = fields.map(field => field.name),
-            needsUpdate            = false,
-            rowIndex               = me.store.indexOf(record),
-            {selectionModel, vdom} = me,
-            cellId, cellNode, cellStyle, cellVdom, column, columnIndex;
+        let me               = this,
+            fieldNames       = fields.map(field => field.name),
+            needsUpdate      = false,
+            rowIndex         = me.store.indexOf(record),
+            {selectionModel} = me,
+            column, needsCellUpdate;
 
         if (fieldNames.includes(me.colspanField)) {
             me.vdom.cn[rowIndex] = me.createRow({record, rowIndex});
             me.update()
         } else {
+            for (column of me.parent.columns.items) {
+                if (
+                    column instanceof Neo.grid.column.Component &&
+                    Neo.typeOf(column.component === 'Function') &&
+                    !fieldNames.includes(column.dataField)
+                ) {
+                    needsCellUpdate = me.updateCellNode(record, column.dataField);
+                    needsUpdate     = needsUpdate || needsCellUpdate
+                }
+            }
+
             fields.forEach(field => {
                 if (field.name === me.selectedRecordField) {
                     if (selectionModel.ntype === 'selection-grid-rowmodel') {
                         selectionModel[field.value ? 'select' : 'deselect'](me.getRowId(record))
                     }
                 } else {
-                    cellId   = me.getCellId(record, field.name);
-                    cellNode = VDomUtil.find(vdom, cellId);
-
-                    // The vdom might not exist yet => nothing to do in this case
-                    if (cellNode?.vdom) {
-                        cellStyle   = cellNode.vdom.style;
-                        column      = me.getColumn(field.name);
-                        columnIndex = cellNode.index;
-                        cellVdom    = me.applyRendererOutput({cellId, column, columnIndex, record, rowIndex});
-                        needsUpdate = true;
-
-                        // The cell-positioning logic happens outside applyRendererOutput()
-                        // We need to preserve these styles
-                        Object.assign(cellVdom.style, {
-                            left : cellStyle.left,
-                            width: cellStyle.width
-                        });
-
-                        cellNode.parentNode.cn[columnIndex] = cellVdom
-                    }
+                    needsCellUpdate = me.updateCellNode(record, field.name);
+                    needsUpdate     = needsUpdate || needsCellUpdate
                 }
             })
         }
@@ -957,6 +942,41 @@ class GridView extends Component {
         }
     }
 
+    /**
+     * Update the cell vdom silently
+     * @param {Record} record
+     * @param {String} dataField
+     * @returns {Boolean} true in case the view needs an update
+     */
+    updateCellNode(record, dataField) {
+        let me          = this,
+            cellId      = me.getCellId(record, dataField),
+            cellNode    = VDomUtil.find(me.vdom, cellId),
+            needsUpdate = false,
+            rowIndex    = me.store.indexOf(record),
+            cellStyle, cellVdom, column, columnIndex;
+
+        // The vdom might not exist yet => nothing to do in this case
+        if (cellNode?.vdom) {
+            cellStyle   = cellNode.vdom.style;
+            column      = me.getColumn(dataField);
+            columnIndex = cellNode.index;
+            cellVdom    = me.applyRendererOutput({cellId, column, columnIndex, record, rowIndex});
+            needsUpdate = true;
+
+            // The cell-positioning logic happens outside applyRendererOutput()
+            // We need to preserve these styles
+            Object.assign(cellVdom.style, {
+                left : cellStyle.left,
+                width: cellStyle.width
+            });
+
+            cellNode.parentNode.cn[columnIndex] = cellVdom
+        }
+
+        return needsUpdate
+    }
+
     /**
      *
      */
@@ -1013,7 +1033,7 @@ class GridView extends Component {
         endIndex   = Math.min(countRecords, endIndex + bufferRowRange);
 
         me.mountedRows[0] = startIndex; // update the array inline
-        me.mountedRows[1] = endIndex;
+        me.mountedRows[1] = endIndex
     }
 
     /**

package/src/grid/column/AnimatedChange.mjs

@@ -0,0 +1,78 @@
+import Column   from './Base.mjs';
+import NeoArray from '../../util/Array.mjs';
+import VdomUtil from '../../util/VDom.mjs';
+
+/**
+ * @class Neo.grid.column.AnimatedChange
+ * @extends Neo.grid.column.Base
+ */
+class AnimatedChange extends Column {
+    static config = {
+        /**
+         * @member {String} className='Neo.grid.column.AnimatedChange'
+         * @protected
+         */
+        className: 'Neo.grid.column.AnimatedChange',
+        /**
+         * @member {String} animationCls='neo-animated'
+         */
+        animationCls: 'neo-animated',
+        /**
+         * @member {String} type='animatedChange'
+         * @protected
+         */
+        type: 'animatedChange'
+    }
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        me.parent.store.on({
+            recordChange: me.onRecordChange,
+            scope       : me
+        })
+    }
+
+    /**
+     * Override as needed for dynamic record-based animation classes
+     * @param {Record} record
+     * @returns {String}
+     */
+    getAnimationCls(record) {
+        return this.animationCls
+    }
+
+    /**
+     * @param {Object}         data
+     * @param {Object[]}       data.fields Each field object contains the keys: name, oldValue, value
+     * @param {Neo.data.Model} data.model The model instance of the changed record
+     * @param {Object}         data.record
+     */
+    onRecordChange({fields, record}) {
+        let me     = this,
+            {view} = me.parent,
+            cellId, field, node;
+
+        for (field of fields) {
+            if (field.name === me.dataField) {
+                cellId = view.getCellId(record, me.dataField);
+                node   = VdomUtil.find(view.vdom, cellId)?.vdom;
+
+                NeoArray.add(node.cls, me.getAnimationCls(record));
+
+                // This will trigger a 2nd view update, after grid.View: onStoreRecordChange()
+                // It is crucial to restart the keyframe based animation
+                // => The previous update call will remove the last animationCls
+                view.update();
+                break
+            }
+        }
+    }
+}
+
+export default Neo.setupClass(AnimatedChange);

package/src/grid/column/Base.mjs

@@ -0,0 +1,81 @@
+import Base              from '../../core/Base.mjs';
+import {resolveCallback} from '../../util/Function.mjs';
+
+/**
+ * @class Neo.grid.column.Base
+ * @extends Neo.core.Base
+ */
+class Column extends Base {
+    static config = {
+        /**
+         * @member {String} className='Neo.grid.column.Base'
+         * @protected
+         */
+        className: 'Neo.grid.column.Base',
+        /**
+         * @member {String|null} dataField=null
+         */
+        dataField: null,
+        /**
+         * @member {Neo.grid.Container|null} parent=null
+         */
+        parent: null,
+        /**
+         * @member {Function|String|null} renderer_='cellRenderer'
+         */
+        renderer_: 'cellRenderer',
+        /**
+         * Scope to execute the column renderer.
+         * Defaults to the column instance
+         * @member {Neo.core.Base|null} rendererScope=null
+         */
+        rendererScope: null,
+        /**
+         * @member {String} type='column'
+         * @protected
+         */
+        type: 'column',
+        /**
+         * @member {Number|null} windowId_=null
+         */
+        windowId_: null
+    }
+
+    /**
+     * Triggered after the windowId config got changed
+     * @param {Number} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetWindowId(value, oldValue) {
+        value && Neo.currentWorker.insertThemeFiles(value, this.__proto__)
+    }
+
+    /**
+     * Triggered before the renderer config gets changed
+     * @param {Function|String|null} value
+     * @param {Function|String|null} oldValue
+     * @protected
+     */
+    beforeSetRenderer(value, oldValue) {
+        return resolveCallback(value, this).fn
+    }
+
+    /**
+     * @param {Object}             data
+     * @param {Neo.button.Base}    data.column
+     * @param {Number}             data.columnIndex
+     * @param {String}             data.dataField
+     * @param {Neo.grid.Container} data.gridContainer
+     * @param {Object}             data.record
+     * @param {Number}             data.rowIndex
+     * @param {Neo.data.Store}     data.store
+     * @param {Number|String}      data.value
+     * @returns {*}
+     */
+    cellRenderer(data) {
+        return data.value
+    }
+}
+
+export default Neo.setupClass(Column);

package/src/grid/column/Component.mjs

@@ -0,0 +1,122 @@
+import Column from './Base.mjs';
+
+/**
+ * @class Neo.grid.column.Component
+ * @extends Neo.grid.column.Base
+ */
+class Component extends Column {
+    static config = {
+        /**
+         * @member {String} className='Neo.grid.column.Component'
+         * @protected
+         */
+        className: 'Neo.grid.column.Component',
+        /**
+         * @member {Function|Object|null} component=null
+         */
+        component: null,
+        /**
+         * @member {Object} defaults
+         * @protected
+         */
+        defaults: null,
+        /**
+         * Components can delegate event listeners (or button handlers) into methods somewhere inside
+         * the view controller or component tree hierarchy.
+         *
+         * In this case, it is helpful to know what the related record is, so we are adding the record
+         * to the component as a property. By default, as 'record', but this config can change the property name.
+         * @member {String} recordProperty='record'
+         */
+        recordProperty: 'record',
+        /**
+         * @member {String} type='component'
+         * @protected
+         */
+        type: 'component'
+    }
+
+    /**
+     * @member {Map} map=new Map()
+     * @protected
+     */
+    map = new Map()
+
+    /**
+     * Override as needed inside class extensions
+     * @param {Object} config
+     * @param {Record} record
+     * @returns {Object}
+     */
+    applyRecordConfigs(config, record) {
+        return config
+    }
+
+    /**
+     * @param {Object}             data
+     * @param {Neo.column.Base}    data.column
+     * @param {Number}             data.columnIndex
+     * @param {String}             data.dataField
+     * @param {Neo.grid.Container} data.gridContainer
+     * @param {Object}             data.record
+     * @param {Number}             data.rowIndex
+     * @param {Neo.data.Store}     data.store
+     * @param {Number|String}      data.value
+     * @returns {*}
+     */
+    cellRenderer(data) {
+        let {gridContainer, record, rowIndex} = data,
+            {appName, view, windowId}         = gridContainer,
+            me               = this,
+            {recordProperty} = me,
+            id               = me.getComponentId(rowIndex),
+            component        = me.map.get(id),
+            componentConfig  = me.component;
+
+        if (Neo.typeOf(componentConfig) === 'Function') {
+            componentConfig = componentConfig(data)
+        }
+
+        componentConfig = me.applyRecordConfigs(componentConfig, record);
+
+        if (component) {
+            delete componentConfig.className;
+            delete componentConfig.module;
+            delete componentConfig.ntype;
+
+
+            componentConfig[recordProperty] = record;
+
+            component.set(componentConfig)
+        } else {
+            component = Neo.create({
+                ...me.defaults,
+                ...componentConfig,
+                appName,
+                id,
+                parentComponent : view,
+                [recordProperty]: record,
+                windowId
+            });
+
+            me.map.set(id, component)
+        }
+
+        view.updateDepth = -1;
+
+        return component.createVdomReference()
+    }
+
+    /**
+     * @param {Number} rowIndex
+     * @returns {String}
+     */
+    getComponentId(rowIndex) {
+        let me     = this,
+            {view} = me.parent;
+
+        return `${me.id}-component-${rowIndex % (view.availableRows + 2 * view.bufferRowRange)}`
+    }
+}
+
+export default Neo.setupClass(Component);

package/src/grid/column/Index.mjs

@@ -0,0 +1,42 @@
+import Column from './Base.mjs';
+
+/**
+ * @class Neo.grid.column.Index
+ * @extends Neo.grid.column.Base
+ */
+class Index extends Column {
+    static config = {
+        /**
+         * @member {String} className='Neo.grid.column.Index'
+         * @protected
+         */
+        className: 'Neo.grid.column.Index',
+        /**
+         * @member {String} type='index'
+         * @protected
+         */
+        type: 'index',
+        /**
+         * @member {Boolean} zeroBased=false
+         */
+        zeroBased: false
+    }
+
+    /**
+     * @param {Object}             data
+     * @param {Neo.button.Base}    data.column
+     * @param {Number}             data.columnIndex
+     * @param {String}             data.dataField
+     * @param {Neo.grid.Container} data.gridContainer
+     * @param {Object}             data.record
+     * @param {Number}             data.rowIndex
+     * @param {Neo.data.Store}     data.store
+     * @param {Number|String}      data.value
+     * @returns {*}
+     */
+    cellRenderer({rowIndex}) {
+        return rowIndex + (this.zeroBased ? 0 : 1)
+    }
+}
+
+export default Neo.setupClass(Index);

package/src/grid/column/Progress.mjs

@@ -0,0 +1,42 @@
+import ComponentColumn   from './Component.mjs';
+import ProgressComponent from '../../component/Progress.mjs';
+
+/**
+ * @class Neo.grid.column.Progress
+ * @extends Neo.grid.column.Component
+ */
+class Progress extends ComponentColumn {
+    static config = {
+        /**
+         * @member {String} className='Neo.grid.column.Progress'
+         * @protected
+         */
+        className: 'Neo.grid.column.Progress',
+        /**
+         * @member {Object} defaults
+         * @protected
+         */
+        defaults: {
+            module: ProgressComponent
+        },
+        /**
+         * @member {String} type='progress'
+         * @protected
+         */
+        type: 'progress'
+    }
+
+    /**
+     * @param {Object} config
+     * @param {Record} record
+     * @returns {Object}
+     */
+    applyRecordConfigs(config, record) {
+        return {
+            value: record[this.dataField],
+            ...config
+        }
+    }
+}
+
+export default Neo.setupClass(Progress);

package/src/grid/column/_export.mjs

@@ -0,0 +1,7 @@
+import AnimatedChange from './AnimatedChange.mjs';
+import Base           from './Base.mjs';
+import Component      from './Component.mjs';
+import Index          from './Index.mjs';
+import Progress       from './Progress.mjs';
+
+export {AnimatedChange, Base, Component, Index, Progress};

package/src/grid/header/Button.mjs

@@ -1,7 +1,6 @@
-import BaseButton        from '../../button/Base.mjs';
-import NeoArray          from '../../util/Array.mjs';
-import TextField         from '../../form/field/Text.mjs';
-import {resolveCallback} from '../../util/Function.mjs';
+import BaseButton from '../../button/Base.mjs';
+import NeoArray   from '../../util/Array.mjs';
+import TextField  from '../../form/field/Text.mjs';
 
 /**
  * @class Neo.grid.header.Button
@@ -72,16 +71,6 @@ class Button extends BaseButton {
          * @protected
          */
         isSorted_: null,
-        /**
-         * @member {Function|String|null} renderer_='cellRenderer'
-         */
-        renderer_: 'cellRenderer',
-        /**
-         * Scope to execute the column renderer.
-         * Defaults to the matching grid.Container
-         * @member {Neo.core.Base|null} rendererScope=null
-         */
-        rendererScope: null,
         /**
          * @member {String} role='columnheader'
          */
@@ -217,32 +206,6 @@ class Button extends BaseButton {
         return this.beforeSetEnumValue(value, oldValue, 'cellAlign', 'cellAlignValues')
     }
 
-    /**
-     * Triggered before the renderer config gets changed
-     * @param {Function|String|null} value
-     * @param {Function|String|null} oldValue
-     * @protected
-     */
-    beforeSetRenderer(value, oldValue) {
-        return resolveCallback(value, this).fn
-    }
-
-    /**
-     * @param {Object}             data
-     * @param {Neo.button.Base}    data.column
-     * @param {Number}             data.columnIndex
-     * @param {String}             data.dataField
-     * @param {Neo.grid.Container} data.gridContainer
-     * @param {Object}             data.record
-     * @param {Number}             data.rowIndex
-     * @param {Neo.data.Store}     data.store
-     * @param {Number|String}      data.value
-     * @returns {*}
-     */
-    cellRenderer(data) {
-        return data.value
-    }
-
     /**
      *
      */

package/src/selection/grid/BaseModel.mjs

@@ -20,7 +20,7 @@ class BaseModel extends Model {
      * @member {String[]} dataFields
      */
     get dataFields() {
-        return this.view.parent.columns.map(column => column.dataField)
+        return this.view.parent.columns.items.map(column => column.dataField)
     }
 
     /**

package/src/vdom/Helper.mjs

@@ -250,7 +250,7 @@ class Helper extends Base {
             return deltas
         }
 
-        if (vnodeId !== oldVnodeId) {
+        if (vnodeId !== oldVnodeId && vnode.componentId !== oldVnode.componentId) {
             throw new Error(`createDeltas() must get called for the same node. ${vnodeId}, ${oldVnodeId}`);
         }