neo.mjs 8.10.0 → 8.11.0

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-01-26",
+      "datePublished": "2025-01-28",
       "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.10.0'
+                html  : 'v8.11.0'
             }]
         }],
         /**

package/examples/ServiceWorker.mjs

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

package/examples/table/container/MainContainer.mjs

@@ -100,8 +100,7 @@ class MainContainer extends ConfigurationViewport {
                         style.tableLayout = '';
                     }
 
-                    me.exampleComponent.style = style;
-                    me.exampleComponent.update()
+                    me.exampleComponent.style = style
                 }
             },
             style: {marginTop: '10px'}

package/examples/tableFiltering/MainContainer.mjs

@@ -68,7 +68,7 @@ class MainContainer extends Viewport {
 
                     store: {
                         autoLoad   : true,
-                        keyProperty: 'name',
+                        keyProperty: 'code',
                         url        : '../../resources/examples/data/countries.json',
 
                         model: {

package/examples/tableFiltering/MainStore.mjs

@@ -12,16 +12,16 @@ class MainStore extends Store {
         model      : Model,
 
         data: [
-            {id:  1, country: 'Germany',       firstname: 'Tobias',  isOnline: true,  lastname: 'Uhlig',    luckyNumber: 1, specialDate: '2020-08-10'},
-            {id:  2, country: 'United States', firstname: 'Rich',    isOnline: false, lastname: 'Waters',   luckyNumber: 2, specialDate: '2020-08-09'},
-            {id:  3, country: 'Germany',       firstname: 'Nils',    isOnline: true,  lastname: 'Dehl',     luckyNumber: 3, specialDate: '2020-08-09'},
-            {id:  4, country: 'United States', firstname: 'Gerard',  isOnline: true,  lastname: 'Horan',    luckyNumber: 1, specialDate: '2020-08-10'},
-            {id:  5, country: 'Slovakia',      firstname: 'Jozef',   isOnline: false, lastname: 'Sakalos',  luckyNumber: 2, specialDate: '2020-08-08'},
-            {id:  6, country: 'Germany',       firstname: 'Bastian', isOnline: false, lastname: 'Haustein', luckyNumber: 3, specialDate: '2020-08-10'},
-            {id:  7, country: 'United States', firstname: 'Durlabh', isOnline: true,  lastname: 'Jain',     luckyNumber: 1, specialDate: '2020-08-08'},
-            {id:  8, country: 'Canada',        firstname: 'Kevin',   isOnline: true,  lastname: 'Cassidy',  luckyNumber: 2, specialDate: '2020-08-10'},
-            {id:  9, country: 'UK',            firstname: 'Nikola',  isOnline: true,  lastname: 'Markovic', luckyNumber: 3, specialDate: '2020-08-09'},
-            {id: 10, country: 'United States', firstname: 'Hyle',    isOnline: false, lastname: 'Campbell', luckyNumber: 1, specialDate: '2020-08-10'}
+            {id:  1, country: 'Germany',       firstname: 'Tobias',  isOnline: true,  lastname: 'Uhlig',    luckyNumber: 1, specialDate: '2025-08-10'},
+            {id:  2, country: 'United States', firstname: 'Rich',    isOnline: false, lastname: 'Waters',   luckyNumber: 2, specialDate: '2025-08-09'},
+            {id:  3, country: 'Germany',       firstname: 'Nils',    isOnline: true,  lastname: 'Dehl',     luckyNumber: 3, specialDate: '2025-08-09'},
+            {id:  4, country: 'United States', firstname: 'Gerard',  isOnline: true,  lastname: 'Horan',    luckyNumber: 1, specialDate: '2025-08-10'},
+            {id:  5, country: 'Slovakia',      firstname: 'Jozef',   isOnline: false, lastname: 'Sakalos',  luckyNumber: 2, specialDate: '2025-08-08'},
+            {id:  6, country: 'Germany',       firstname: 'Bastian', isOnline: false, lastname: 'Haustein', luckyNumber: 3, specialDate: '2025-08-10'},
+            {id:  7, country: 'United States', firstname: 'Durlabh', isOnline: true,  lastname: 'Jain',     luckyNumber: 1, specialDate: '2025-08-08'},
+            {id:  8, country: 'Canada',        firstname: 'Kevin',   isOnline: true,  lastname: 'Cassidy',  luckyNumber: 2, specialDate: '2025-08-10'},
+            {id:  9, country: 'UK',            firstname: 'Nikola',  isOnline: true,  lastname: 'Markovic', luckyNumber: 3, specialDate: '2025-08-09'},
+            {id: 10, country: 'United States', firstname: 'Hyle',    isOnline: false, lastname: 'Campbell', luckyNumber: 1, specialDate: '2025-08-10'}
         ]
     }
 }

package/package.json

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

package/resources/data/deck/learnneo/pages/benefits/Speed.md

@@ -21,10 +21,10 @@ If you move quickly, you might reach 20,000 or 30,000 delta updates per second.
 second — but we've never actually hit the limit.
 
 <pre data-neo>
-import Base  from '../container/Base.mjs';
-import Helix from '../component/Helix.mjs';
+import Container from '../container/Base.mjs';
+import Helix     from '../component/Helix.mjs';
 
-class MainView extends Base {
+class MainView extends Container {
     static config = {
         className: 'Benefits.speed.MainView',
         layout   : 'fit',

package/resources/scss/src/button/Base.scss

@@ -65,7 +65,7 @@
     .neo-button-glyph {
         color         : var(--button-glyph-color);
         font-size     : 12px;
-        margin        : 0 6px 0 0;
+        margin        : var(--button-glyph-margin);
         pointer-events: none;
         z-index       : 2;
     }

package/resources/scss/src/grid/View.scss

@@ -102,21 +102,3 @@
         }
     }
 }
-
-.neo-selection-cellcolumnmodel,
-.neo-selection-cellcolumnrowmodel,
-.neo-selection-cellmodel,
-.neo-selection-cellrowmodel,
-.neo-selection-columnmodel,
-.neo-selection-rowmodel {
-    .neo-grid-row {
-        &:focus {
-            outline: 0;
-        }
-        .neo-grid-cell {
-            &:focus {
-                outline: 0;
-            }
-        }
-    }
-}

package/resources/scss/src/table/View.scss

@@ -1,4 +1,8 @@
 .neo-table-view {
+    &:focus {
+        outline: none;
+    }
+
     .neo-center {
         text-align: center;
     }
@@ -9,8 +13,6 @@
 
     .neo-table-row {
         .neo-table-cell {
-            position: relative;
-
             &.neo-is-modified {
                 &:after {
                     border-color: transparent var(--table-cell-ismodified-color) transparent transparent;
@@ -73,21 +75,3 @@
         }
     }
 }
-
-.neo-selection-cellcolumnmodel,
-.neo-selection-cellcolumnrowmodel,
-.neo-selection-cellmodel,
-.neo-selection-cellrowmodel,
-.neo-selection-columnmodel,
-.neo-selection-rowmodel {
-    .neo-table-row {
-        &:focus {
-            outline: 0;
-        }
-        .neo-table-cell {
-            &:focus {
-                outline: 0;
-            }
-        }
-    }
-}

package/resources/scss/src/toolbar/Base.scss

@@ -147,7 +147,7 @@
         .neo-button {
             &.icon-left {
                 .neo-button-glyph {
-                    margin: 0 6px 0 0;
+                    margin: var(--button-glyph-margin);
                 }
             }
         }

package/resources/scss/theme-dark/button/Base.scss

@@ -29,6 +29,7 @@ $text-color      : #bbb;
     --button-glyph-color-active                 : #{$text-color};
     --button-glyph-color-disabled               : #{$text-color};
     --button-glyph-color-hover                  : #{$text-color};
+    --button-glyph-margin                       : 1px 6px 0 0;
     --button-height                             : initial;
     --button-margin                             : 2px;
     --button-opacity-disabled                   : var(--neo-disabled-opacity);

package/resources/scss/theme-light/button/Base.scss

@@ -28,6 +28,7 @@ $text-color      : #1c60a0;
     --button-glyph-color-active                 : #{$text-color};
     --button-glyph-color-disabled               : #{$text-color};
     --button-glyph-color-hover                  : #{$text-color};
+    --button-glyph-margin                       : 1px 6px 0 0;
     --button-height                             : initial;
     --button-margin                             : 2px;
     --button-opacity-disabled                   : var(--neo-disabled-opacity);

package/resources/scss/theme-neo-light/button/Base.scss

@@ -39,6 +39,7 @@
     --button-glyph-color-hover                  : var(--sem-color-text-neutral-reversed);
     --button-glyph-color-active                 : var(--sem-color-text-neutral-reversed);
     --button-glyph-color-disabled               : var(--sem-color-text-neutral-disabled);
+    --button-glyph-margin                       : 1px 6px 0 0;
 
     --button-background-image                   : none;
     --button-background-gradient-end            : #323536;

package/src/DefaultConfig.mjs

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

package/src/Main.mjs

@@ -158,13 +158,19 @@ class Main extends core.Base {
     /**
      * Request specific accessible window attributes by path into the app worker.
      * Keep in mind that this excludes anything DOM related or instances.
-     * Example: Neo.Main.getByPath({path: 'navigator.language'}).then(data => {})
+     * In case your path matches a method, you can also pass params for it.
+     * @example:
+     *     Neo.Main.getByPath({path: 'navigator.language'}).then(data => {})
+     * @example:
+     *     Neo.Main.getByPath({path: 'CSS.supports', params: ['display: flex']}).then(data => {})
      * @param {Object} data
+     * @param {Array}  data.params=[]
      * @param {String} data.path
      * @returns {*}
      */
-    getByPath(data) {
-        return Neo.nsWithArrays(data.path)
+    getByPath({params=[], path}) {
+        let target = Neo.nsWithArrays(path);
+        return Neo.isFunction(target) ? target(...params) : target
     }
 
     /**

package/src/form/field/ComboBox.mjs

@@ -450,10 +450,7 @@ class ComboBox extends Picker {
     fireChangeEvent(value, oldValue) {
         let me            = this,
             FormContainer = Neo.form?.Container,
-            params;
-
-        if (!(me.forceSelection && !value)) {
-            params = {component: me, oldValue, value};
+            params        = {component: me, oldValue, value};
 
             me.fire('change', params);
 
@@ -464,7 +461,6 @@ class ComboBox extends Picker {
                     }
                 })
             }
-        }
     }
 
     /**

package/src/main/DomAccess.mjs

@@ -420,36 +420,33 @@ class DomAccess extends Base {
 
     /**
      * Returns the attributes for a given dom node id
-     * @param {Object} data
-     * @param {Array|String} data.id either an id or an array of ids
-     * @param {Array|String} data.attributes either an attribute or an array of attributes
+     * @param {Object}          data
+     * @param {String|String[]} data.attributes either an attribute or an array of attributes
+     * @param {String|String[]} data.id either an id or an array of ids
      * @returns {Array|Object} In case id is an array, an array of attribute objects is returned, otherwise an object
      */
-    getAttributes(data) {
+    getAttributes({attributes, id}) {
         let returnData;
 
-        if (Array.isArray(data.id)) {
+        if (Array.isArray(id)) {
             returnData = [];
 
-            data.id.forEach(id => {
-                returnData.push(this.getAttributes({
-                    attributes: data.attributes,
-                    id        : id
-                }))
+            id.forEach(id => {
+                returnData.push(this.getAttributes({attributes, id}))
             })
         } else {
-            let node = this.getElementOrBody(data.id);
+            let node = this.getElementOrBody(id);
 
             returnData = {};
 
             if (node) {
-                if (!Array.isArray(data.attributes)) {
-                    data.attributes = [data.attributes];
-
-                    data.attributes.forEach(attribute => {
-                        returnData[attribute] = node[attribute]
-                    })
+                if (!Array.isArray(attributes)) {
+                    attributes = [attributes]
                 }
+
+                attributes.forEach(attribute => {
+                    returnData[attribute] = node[attribute]
+                })
             }
         }
 

package/src/selection/table/BaseModel.mjs

@@ -14,6 +14,14 @@ class BaseModel extends Model {
          */
         className: 'Neo.selection.table.BaseModel'
     }
+
+    /**
+     * Convenience shortcut
+     * @member {String[]} dataFields
+     */
+    get dataFields() {
+        return this.view.parent.columns.map(c => c.dataField)
+    }
 }
 
 export default Neo.setupClass(BaseModel);

package/src/selection/table/CellColumnModel.mjs

@@ -1,6 +1,5 @@
-import CellModel   from './CellModel.mjs';
-import ColumnModel from './ColumnModel.mjs';
-import VDomUtil    from '../../util/VDom.mjs';
+import CellModel from './CellModel.mjs';
+import VDomUtil  from '../../util/VDom.mjs';
 
 /**
  * @class Neo.selection.table.CellColumnModel
@@ -41,7 +40,7 @@ class CellColumnModel extends CellModel {
     deselectAllCells(silent) {
         let me      = this,
             cellIds = [...me.selectedColumnCellIds],
-            {view}  = me;
+            {view}  = me
 
         cellIds.forEach(cellId => {
             me.deselect(cellId, true, me.selectedColumnCellIds, me.selectedColumnCellCls)
@@ -54,14 +53,15 @@ class CellColumnModel extends CellModel {
      * @param {Object} data
      */
     onCellClick(data) {
-        let me              = this,
-            {headerToolbar} = me.view.parent,
-            id              = data.data.currentTarget,
-            columnNodeIds, index;
+        let me     = this,
+            {view} = me,
+            cellId = data.data.currentTarget,
+            columnNodeIds, dataField, index;
 
-        if (id) {
-            index         = ColumnModel.getColumnIndex(id, headerToolbar.items);
-            columnNodeIds = VDomUtil.getColumnNodesIds(me.view.vdom, index);
+        if (cellId) {
+            dataField     = view.getDataField(cellId);
+            index         = view.getColumn(dataField, true);
+            columnNodeIds = VDomUtil.getColumnNodesIds(view.vdom, index);
 
             me.deselectAllCells(true);
             me.select(columnNodeIds, me.selectedColumnCellIds, me.selectedColumnCellCls)
@@ -71,29 +71,31 @@ class CellColumnModel extends CellModel {
     }
 
     /**
-     * @param {Object} data
      * @param {Number} step
      */
-    onNavKeyColumn(data, step) {
-        let me            = this,
-            idArray       = ColumnModel.getCellId(data.path).split('__'),
-            currentColumn = idArray[2],
-            {view}        = me,
-            dataFields    = view.parent.columns.map(c => c.dataField),
-            newIndex      = (dataFields.indexOf(currentColumn) + step) % dataFields.length,
-            columnNodeIds, tbodyNode;
-
-        while (newIndex < 0) {
-            newIndex += dataFields.length
+    onNavKeyColumn(step) {
+        let me                 = this,
+            {dataFields, view} = me,
+            columnNodeIds, currentColumn, index;
+
+        if (me.hasSelection()) {
+            currentColumn = view.getDataField(me.items[0])
+        } else {
+            currentColumn = dataFields[0]
+        }
+
+        index = (dataFields.indexOf(currentColumn) + step) % dataFields.length;
+
+        while (index < 0) {
+            index += dataFields.length
         }
 
-        tbodyNode     = VDomUtil.find(me.view.vdom, {tag: 'tbody'}).vdom;
-        columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, newIndex);
+        columnNodeIds = VDomUtil.getColumnNodesIds(view.vdom, index);
 
         me.deselectAllCells(true);
         me.select(columnNodeIds, me.selectedColumnCellIds, me.selectedColumnCellCls);
 
-        super.onNavKeyColumn(data, step)
+        super.onNavKeyColumn(step)
     }
 
     /**

package/src/selection/table/CellColumnRowModel.mjs

@@ -1,5 +1,4 @@
 import CellRowModel from './CellRowModel.mjs';
-import ColumnModel  from './ColumnModel.mjs';
 import VDomUtil     from '../../util/VDom.mjs';
 
 /**
@@ -54,14 +53,15 @@ class CellColumnRowModel extends CellRowModel {
      * @param {Object} data
      */
     onCellClick(data) {
-        let me              = this,
-            {headerToolbar} = me.view.parent,
-            id              = data.data.currentTarget,
-            columnNodeIds, index;
+        let me     = this,
+            {view} = me,
+            cellId = data.data.currentTarget,
+            columnNodeIds, dataField, index;
 
-        if (id) {
-            index         = ColumnModel.getColumnIndex(id, headerToolbar.items);
-            columnNodeIds = VDomUtil.getColumnNodesIds(me.view.vdom, index);
+        if (cellId) {
+            dataField     = view.getDataField(cellId);
+            index         = view.getColumn(dataField, true);
+            columnNodeIds = VDomUtil.getColumnNodesIds(view.vdom, index);
 
             me.deselectAllCells(true);
             me.select(columnNodeIds, me.selectedColumnCellIds, me.selectedColumnCellCls)
@@ -71,29 +71,31 @@ class CellColumnRowModel extends CellRowModel {
     }
 
     /**
-     * @param {Object} data
      * @param {Number} step
      */
-    onNavKeyColumn(data, step) {
-        let me            = this,
-            idArray       = ColumnModel.getCellId(data.path).split('__'),
-            currentColumn = idArray[2],
-            {view}        = me,
-            dataFields    = view.parent.columns.map(c => c.dataField),
-            newIndex      = (dataFields.indexOf(currentColumn) + step) % dataFields.length,
-            columnNodeIds, tbodyNode;
-
-        while (newIndex < 0) {
-            newIndex += dataFields.length
+    onNavKeyColumn(step) {
+        let me                 = this,
+            {dataFields, view} = me,
+            columnNodeIds, currentColumn, index;
+
+        if (me.hasSelection()) {
+            currentColumn = view.getDataField(me.items[0])
+        } else {
+            currentColumn = dataFields[0]
+        }
+
+        index = (dataFields.indexOf(currentColumn) + step) % dataFields.length;
+
+        while (index < 0) {
+            index += dataFields.length
         }
 
-        tbodyNode     = VDomUtil.find(me.view.vdom, {tag: 'tbody'}).vdom;
-        columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, newIndex);
+        columnNodeIds = VDomUtil.getColumnNodesIds(view.vdom, index);
 
         me.deselectAllCells(true);
         me.select(columnNodeIds, me.selectedColumnCellIds, me.selectedColumnCellCls);
 
-        super.onNavKeyColumn(data, step)
+        super.onNavKeyColumn(step)
     }
 
     /**

package/src/selection/table/CellModel.mjs

@@ -54,76 +54,80 @@ class CellModel extends BaseModel {
      * @param {Object} data
      */
     onKeyDownDown(data) {
-        this.onNavKeyRow(data, 1)
+        this.onNavKeyRow(1)
     }
 
     /**
      * @param {Object} data
      */
     onKeyDownLeft(data) {
-        this.onNavKeyColumn(data, -1)
+        this.onNavKeyColumn(-1)
     }
 
     /**
      * @param {Object} data
      */
     onKeyDownRight(data) {
-        this.onNavKeyColumn(data, 1)
+        this.onNavKeyColumn(1)
     }
 
     /**
      * @param {Object} data
      */
     onKeyDownUp(data) {
-        this.onNavKeyRow(data, -1)
+        this.onNavKeyRow(-1)
     }
 
     /**
-     * @param {Object} data
      * @param {Number} step
      */
-    onNavKeyColumn(data, step) {
-        let me            = this,
-            {view}        = me,
-            idArray       = data.path[0].id.split('__'),
-            currentColumn = idArray[2],
-            dataFields    = view.parent.columns.map(c => c.dataField),
-            newIndex      = (dataFields.indexOf(currentColumn) + step) % dataFields.length,
-            id;
+    onNavKeyColumn(step) {
+        let me                 = this,
+            {dataFields, view} = me,
+            {store}            = view,
+            currentColumn, newIndex, record;
+
+        if (me.hasSelection()) {
+            currentColumn = view.getDataField(me.items[0]);
+            record        = view.getRecord(me.items[0])
+        } else {
+            currentColumn = dataFields[0];
+            record        = store.getAt(0)
+        }
+
+        newIndex = (dataFields.indexOf(currentColumn) + step) % dataFields.length;
 
         while (newIndex < 0) {
             newIndex += dataFields.length
         }
 
-        idArray[2] = dataFields[newIndex];
-        id = idArray.join('__');
-
-        me.select(id);
-        view.focus(id)
+        me.select(view.getCellId(record, dataFields[newIndex]))
     }
 
     /**
-     * @param {Object} data
      * @param {Number} step
      */
-    onNavKeyRow(data, step) {
-        let me       = this,
-            {view}   = me,
-            {store}  = view,
-            idArray  = data.path[0].id.split('__'),
-            recordId = idArray[1],
-            newIndex = (store.indexOf(recordId) + step) % store.getCount(),
-            id;
+    onNavKeyRow(step) {
+        let me           = this,
+            {view}       = me,
+            {store}      = view,
+            currentIndex = 0,
+            dataField, newIndex;
+
+        if (me.hasSelection()) {
+            currentIndex = store.indexOf(view.getRecord(me.items[0]));
+            dataField    = view.getDataField(me.items[0])
+        } else {
+            dataField = me.dataFields[0]
+        }
+
+        newIndex = (currentIndex + step) % store.getCount();
 
         while (newIndex < 0) {
             newIndex += store.getCount()
         }
 
-        idArray[1] = store.getKeyAt(newIndex);
-        id = idArray.join('__');
-
-        me.select(id);
-        view.focus(id)
+        me.select(view.getCellId(store.getAt(newIndex), dataField))
     }
 
     /**
@@ -133,13 +137,14 @@ class CellModel extends BaseModel {
         super.register(component);
 
         let me         = this,
-            {id, view} = me;
+            {id, view} = me,
+            scope      = id;
 
         view.keys?._keys.push(
-            {fn: 'onKeyDownDown'  ,key: 'Down'  ,scope: id},
-            {fn: 'onKeyDownLeft'  ,key: 'Left'  ,scope: id},
-            {fn: 'onKeyDownRight' ,key: 'Right' ,scope: id},
-            {fn: 'onKeyDownUp'    ,key: 'Up'    ,scope: id}
+            {fn: 'onKeyDownDown'  ,key: 'Down'  ,scope},
+            {fn: 'onKeyDownLeft'  ,key: 'Left'  ,scope},
+            {fn: 'onKeyDownRight' ,key: 'Right' ,scope},
+            {fn: 'onKeyDownUp'    ,key: 'Up'    ,scope}
         )
     }
 
@@ -147,13 +152,15 @@ class CellModel extends BaseModel {
      *
      */
     unregister() {
-        let {id, view} = this;
+        let me         = this,
+            {id, view} = me,
+            scope      = id;
 
         view.keys?.removeKeys([
-            {fn: 'onKeyDownDown'  ,key: 'Down'  ,scope: id},
-            {fn: 'onKeyDownLeft'  ,key: 'Left'  ,scope: id},
-            {fn: 'onKeyDownRight' ,key: 'Right' ,scope: id},
-            {fn: 'onKeyDownUp'    ,key: 'Up'    ,scope: id}
+            {fn: 'onKeyDownDown'  ,key: 'Down'  ,scope},
+            {fn: 'onKeyDownLeft'  ,key: 'Left'  ,scope},
+            {fn: 'onKeyDownRight' ,key: 'Right' ,scope},
+            {fn: 'onKeyDownUp'    ,key: 'Up'    ,scope}
         ]);
 
         super.unregister()

package/src/selection/table/CellRowModel.mjs

@@ -1,7 +1,5 @@
 import CellModel from './CellModel.mjs';
 import NeoArray  from '../../util/Array.mjs';
-import RowModel  from './RowModel.mjs';
-import VDomUtil  from '../../util/VDom.mjs';
 
 /**
  * @class Neo.selection.table.CellRowModel
@@ -71,39 +69,39 @@ class CellRowModel extends CellModel {
      * @param {Object} data
      */
     onCellClick(data) {
-        let me   = this,
-            node = RowModel.getRowNode(data.data.path), // we could add a separate export for this method
-            id   = node?.id;
+        let me     = this,
+            record = me.view.getRecord(data.data.currentTarget),
+            rowId  = me.view.getRowId(record);
 
-        if (id) {
+        if (rowId) {
             me.deselectAllRows(true);
-            me.selectRow(id)
+            me.selectRow(rowId)
         }
 
         super.onCellClick(data)
     }
 
     /**
-     * @param {Object} data
      * @param {Number} step
      */
-    onNavKeyRow(data, step) {
-        super.onNavKeyRow(data, step);
-
-        let me         = this,
-            node       = RowModel.getRowNode(data.path),
-            {view}     = me,
-            {store}    = view,
-            vdomNode   = VDomUtil.find(view.vdom, node.id),
-            newIndex   = (vdomNode.index + step) % store.getCount(),
-            parentNode = vdomNode.parentNode,
+    onNavKeyRow(step) {
+        super.onNavKeyRow(step);
+
+        let me           = this,
+            {view}       = me,
+            {store}      = view,
+            countRecords = store.getCount(),
+            rowId        = me.selectedRowIds[0] || view.getRowId(store.getAt(0)),
+            record       = view.getRecord(rowId),
+            index        = store.indexOf(record),
+            newIndex     = (index + step) % countRecords,
             id;
 
         while (newIndex < 0) {
-            newIndex += store.getCount()
+            newIndex += countRecords
         }
 
-        id = parentNode.cn[newIndex].id;
+        id = view.getRowId(store.getAt(newIndex));
 
         if (id) {
             me.deselectAllRows(true);

package/src/selection/table/ColumnModel.mjs

@@ -44,51 +44,19 @@ class ColumnModel extends BaseModel {
         super.destroy(...args)
     }
 
-    /**
-     * @param {Object} eventPath
-     * @returns {String|null} cellId
-     */
-    static getCellId(eventPath) {
-        let id   = null,
-            i    = 0,
-            len  = eventPath.length;
-
-        for (; i < len; i++) {
-            if (eventPath[i].tagName === 'td') {
-                id = eventPath[i].id;
-                break
-            }
-        }
-
-        return id
-    }
-
-    /**
-     * todo: move to table.Container or view
-     * @param {String} cellId
-     * @param {Array} columns
-     * @returns {Number} index
-     */
-    static getColumnIndex(cellId, columns) {
-        let idArray       = cellId.split('__'),
-            currentColumn = idArray[2],
-            dataFields    = columns.map(c => c.dataField);
-
-        return dataFields.indexOf(currentColumn)
-    }
-
     /**
      * @param {Object} data
      */
     onCellClick(data) {
-        let me              = this,
-            {headerToolbar} = me.view.parent,
-            id              = data.data.currentTarget,
-            columnNodeIds, index;
+        let me     = this,
+            {view} = me,
+            cellId = data.data.currentTarget,
+            columnNodeIds, dataField, index;
 
-        if (id) {
-            index         = ColumnModel.getColumnIndex(id, headerToolbar.items);
-            columnNodeIds = VDomUtil.getColumnNodesIds(me.view.vdom, index);
+        if (cellId) {
+            dataField     = view.getDataField(cellId);
+            index         = view.getColumn(dataField, true);
+            columnNodeIds = VDomUtil.getColumnNodesIds(view.vdom, index);
 
             me.select(columnNodeIds)
         }
@@ -98,41 +66,39 @@ class ColumnModel extends BaseModel {
      * @param {Object} data
      */
     onKeyDownLeft(data) {
-        this.onNavKeyColumn(data, -1)
+        this.onNavKeyColumn(-1)
     }
 
     /**
      * @param {Object} data
      */
     onKeyDownRight(data) {
-        this.onNavKeyColumn(data, 1)
+        this.onNavKeyColumn(1)
     }
 
     /**
-     * @param {Object} data
      * @param {Number} step
      */
-    onNavKeyColumn(data, step) {
-        let me            = this,
-            idArray       = ColumnModel.getCellId(data.path).split('__'),
-            currentColumn = idArray[2],
-            {view}        = me,
-            dataFields    = view.parent.columns.map(c => c.dataField),
-            newIndex      = (dataFields.indexOf(currentColumn) + step) % dataFields.length,
-            columnNodeIds, id, tbodyNode;
-
-        while (newIndex < 0) {
-            newIndex += dataFields.length
+    onNavKeyColumn(step) {
+        let me                 = this,
+            {dataFields, view} = me,
+            columnNodeIds, currentColumn, index;
+
+        if (me.hasSelection()) {
+            currentColumn = view.getDataField(me.items[0])
+        } else {
+            currentColumn = dataFields[0]
         }
 
-        idArray[2] = dataFields[newIndex];
-        id = idArray.join('__');
+        index = (dataFields.indexOf(currentColumn) + step) % dataFields.length;
+
+        while (index < 0) {
+            index += dataFields.length
+        }
 
-        tbodyNode     = VDomUtil.find(me.view.vdom, {tag: 'tbody'}).vdom;
-        columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, newIndex);
+        columnNodeIds = VDomUtil.getColumnNodesIds(view.vdom, index);
 
-        me.select(columnNodeIds);
-        view.focus(id) // we have to focus one cell to ensure the keynav keeps working
+        me.select(columnNodeIds)
     }
 
     /**

package/src/selection/table/RowModel.mjs

@@ -1,5 +1,4 @@
 import BaseModel from './BaseModel.mjs';
-import VDomUtil  from '../../util/VDom.mjs';
 
 /**
  * @class Neo.selection.table.RowModel
@@ -44,76 +43,45 @@ class RowModel extends BaseModel {
         super.destroy(...args)
     }
 
-    /**
-     * Finds the matching table row for a given row index
-     * @param {Number} index row index
-     * @returns {String|null} The table row node id
-     */
-    getRowId(index) {
-        if (index < 0 || this.view.store.getCount() < index) {
-            return null
-        }
-
-        return this.view.vdom.cn[0].cn[1].cn[index].id
-    }
-
-    /**
-     * Finds the matching table row for a given event path
-     * @param {Object} path The event path
-     * @returns {Object|null} The node containing the table row class or null
-     * @protected
-     */
-    static getRowNode(path) {
-        let i    = 0,
-            len  = path.length,
-            node = null;
-
-        for (; i < len; i++) {
-            if (path[i].cls.includes('neo-table-row')) {
-                node = path[i]
-            }
-        }
-
-        return node
-    }
-
     /**
      * @param {Object} data
      */
     onKeyDownDown(data) {
-        this.onNavKeyRow(data, 1)
+        this.onNavKeyRow(1)
     }
 
     /**
      * @param {Object} data
      */
     onKeyDownUp(data) {
-        this.onNavKeyRow(data, -1)
+        this.onNavKeyRow(-1)
     }
 
     /**
-     * @param {Object} data
      * @param {Number} step
      */
-    onNavKeyRow(data, step) {
+    onNavKeyRow(step) {
         let me           = this,
-            node         = RowModel.getRowNode(data.path),
             {view}       = me,
             {store}      = view,
-            vdomNode     = VDomUtil.find(view.vdom, node.id),
-            newIndex     = (vdomNode.index + step) % store.getCount(),
-            {parentNode} = vdomNode,
-            id;
+            currentIndex = 0,
+            newIndex, newRecord, rowId;
+
+        if (me.hasSelection()) {
+            currentIndex = store.indexOf(view.getRecordByRowId(me.items[0]))
+        }
+
+        newIndex = (currentIndex + step) % store.getCount();
 
         while (newIndex < 0) {
             newIndex += store.getCount()
         }
 
-        id = parentNode.cn[newIndex].id;
+        newRecord = store.getAt(newIndex);
+        rowId     = view.getRowId(newRecord);
 
-        if (id) {
-            me.select(id);
-            view.focus(id);
+        if (rowId) {
+            me.select(rowId);
 
             view.fire('select', {
                 record: store.getAt(newIndex)
@@ -134,7 +102,7 @@ class RowModel extends BaseModel {
             me.toggleSelection(id);
 
             isSelected = me.isSelected(id);
-            record     = view.store.getAt(VDomUtil.find(view.vdom, id).index);
+            record     = view.getRecord(id);
 
             !isSelected && view.onDeselect?.(record);
 

package/src/table/View.mjs

@@ -67,7 +67,7 @@ class View extends Component {
          * @member {Object} _vdom={tag: 'tbody', cn : []}
          */
         _vdom:
-        {tag: 'tbody', cn: []}
+        {tag: 'tbody', tabIndex: -1, cn: []}
     }
 
     /**
@@ -189,11 +189,10 @@ class View extends Component {
         }
 
         cellConfig = {
-            tag     : 'td',
-            id      : cellId,
-            cls     : cellCls,
-            style   : rendererOutput.style || {},
-            tabIndex: '-1'
+            tag  : 'td',
+            id   : cellId,
+            cls  : cellCls,
+            style: rendererOutput.style || {}
         };
 
         if (colspan && Object.keys(colspan).includes(dataField)) {
@@ -260,11 +259,10 @@ class View extends Component {
         }
 
         tableRow = {
-            tag     : 'tr',
+            tag: 'tr',
             id,
-            cls     : trCls,
-            cn      : [],
-            tabIndex: '-1'
+            cls: trCls,
+            cn : []
         };
 
         for (i=0; i < colCount; i++) {
@@ -409,6 +407,14 @@ class View extends Component {
         return null
     }
 
+    /**
+     * @param {String} cellId
+     * @returns {String}
+     */
+    getDataField(cellId) {
+        return cellId.split('__')[2]
+    }
+
     /**
      * Get the matching record by passing a row id, a cell id or an id inside a table cell.
      * @param {String} nodeId

package/src/table/header/Button.mjs

@@ -292,6 +292,76 @@ class Button extends BaseButton {
         return data.value
     }
 
+    /**
+     * @param {Object} data
+     */
+    changeFilterOperator(data) {
+        let me             = this,
+            tableContainer = me.up('table-container'),
+            store          = tableContainer?.store,
+            operator       = data.value,
+            filter, filters;
+
+        if (store) {
+            filter = store.getFilter(me.dataField);
+
+            if (!filter) {
+                filters = store.filters;
+
+                filters.push({
+                    property: me.dataField,
+                    operator,
+                    value   : null,
+                    ...me.filterConfig
+                });
+
+                store.filters = filters
+            } else {
+                filter.operator = operator
+            }
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    changeFilterValue(data) {
+        let me             = this,
+            tableContainer = me.up('table-container'),
+            store          = tableContainer?.store,
+            {value}        = data,
+            field, filter, filters, model;
+
+        if (store) {
+            filter = store.getFilter(me.dataField);
+            model  = store.model;
+            field  = model && model.getField(me.dataField);
+
+            if (value && field.type.toLowerCase() === 'date') {
+                value = new Date(value)
+            }
+
+            if (Neo.isRecord(value)) {
+                value = value[me.filterField.displayField]
+            }
+
+            if (!filter) {
+                filters = store.filters;
+
+                filters.push({
+                    property: me.dataField,
+                    operator: 'like',
+                    value,
+                    ...me.filterConfig
+                });
+
+                store.filters = filters
+            } else {
+                filter.value = value
+            }
+        }
+    }
+
     /**
      *
      */
@@ -411,72 +481,6 @@ class Button extends BaseButton {
         me.style = style
     }
 
-    /**
-     * @param {Object} data
-     */
-    changeFilterOperator(data) {
-        let me             = this,
-            tableContainer = me.up('table-container'),
-            store          = tableContainer?.store,
-            operator       = data.value,
-            filter, filters;
-
-        if (store) {
-            filter = store.getFilter(me.dataField);
-
-            if (!filter) {
-                filters = store.filters;
-
-                filters.push({
-                    property: me.dataField,
-                    operator,
-                    value   : null,
-                    ...me.filterConfig
-                });
-
-                store.filters = filters
-            } else {
-                filter.operator = operator
-            }
-        }
-    }
-
-    /**
-     * @param {Object} data
-     */
-    changeFilterValue(data) {
-        let me             = this,
-            tableContainer = me.up('table-container'),
-            store          = tableContainer?.store,
-            {value}        = data,
-            field, filter, filters, model;
-
-        if (store) {
-            filter = store.getFilter(me.dataField);
-            model  = store.model;
-            field  = model && model.getField(me.dataField);
-
-            if (value && field.type.toLowerCase() === 'date') {
-                value = new Date(value)
-            }
-
-            if (!filter) {
-                filters = store.filters;
-
-                filters.push({
-                    property: me.dataField,
-                    operator: 'like',
-                    value,
-                    ...me.filterConfig
-                });
-
-                store.filters = filters
-            } else {
-                filter.value = value
-            }
-        }
-    }
-
     /**
      * @protected
      */