Namespace PageTable

Изменим код для осуществления навигации между элементами с помощью клавиатуры и отслеживания вызовов событий на каждое действие.

• Добавим свойство tabindex в таблицу и кнопки меню.
• В методе onAfrterLoad каждого элемента добавим вызов функции assignListeners(), в которой устанавливаем обработчки событий focus, blur, keydown, keyup, beforeEdit, afterEdit.
• В кнопках меню добавим обработчик onKeyDown, где при нажатии клавиши 'Enter' выполняем те же действия, что при 'onclick'.
• Добавление прослушивателей assignListeners() в элементы ячеек таблицы сделаем в методе onAfterAddRow() таблицы.

/*Инструкции для WebPack, который скопирует эти файлы в ваш каталог*/
import './index.html';
import 'ui-organizer/page.css';
import 'ui-organizer/style.css';
import 'ui-organizer/vars.css';

/*Описание формы simpleForm*/
import type {ICell, IDataElement, IElement, IFigAwesome, IForm, IMenu, IMenuItem, IRow, ITable} from "ui-organizer";
import { AppManager, IconDisplay, UIForm, UIMenu, UIMenuItem, UITable, UIMouseEvent, JustifyContent, UIDataElement, AlignSelf} from "ui-organizer";
import {UIRowEvent, UIEditEvent, UIFocusEvent, UIKeyboardEvent} from "ui-organizer";

let menu = <IMenu>{
    type: UIMenu,
    elements: [
        <IMenuItem>{
            type: UIMenuItem,
            caption: 'add',
            iconDisplay: IconDisplay.icon,
            figAwesome: <IFigAwesome>{
                faClass: ['fas', 'fa-plus', 'fa-lg'],
                faStyle: ['color: grey;']
            },
            tabindex: 0,
            async onKeyDown(event, form, elem, item) {
                if (event.key == 'Enter') {
                    let table: ITable = form.getElement(this.parent.owner.name) as ITable;
                    let row: IRow = await table.addRow();
                    row.setData({name:"Имя", sex:"Пол", age:"Возраст"});
                }                           
            },
            async onClick(event:UIMouseEvent, form: IForm, menu: IMenu, menuItem: IMenuItem) {
                let table: ITable = form.getElement(this.parent.owner.name) as ITable;
                let row: IRow = await table.addRow();
                row.setData({name:"Имя", sex:"Пол", age:"Возраст"});

            },
            async onAfterLoad(event, form, elem) {
                assignListeners('           MenuItem add:', elem);
            }
        },
        <IMenuItem>{
            type: UIMenuItem,
            caption: 'remove',
            iconDisplay: IconDisplay.icon,
            figAwesome: <IFigAwesome>{
                faClass: ['fas', 'fa-minus', 'fa-lg'],
                faStyle: ['color: grey;']
            },
            tabindex: 0,
            async onKeyDown(event, form, elem, item) {
                if (event.key == 'Enter') {
                    let table: ITable = form.getElement(this.parent.owner.name) as ITable;
                    let selected: Array<IRow | ICell> = table.getSelectedRows();
                    if (selected.length == 0) selected = table.getSelectedCells();
                    selected.forEach(item=>{
                        let id: string = (<IRow>item).id == undefined ? (<ICell>item).row.id : (<IRow>item).id;
                        table.removeRow(id);
                    })
                }                           
            },
            async onClick(event:UIMouseEvent, form: IForm, menu: IMenu, menuItem: IMenuItem) {
                let table: ITable = form.getElement(this.parent.owner.name) as ITable;
                let selected: Array<IRow | ICell> = table.getSelectedRows();
                if (selected.length == 0) selected = table.getSelectedCells();
                selected.forEach(item=>{
                    let id: string = (<IRow>item).id == undefined ? (<ICell>item).row.id : (<IRow>item).id;
                    table.removeRow(id);
                })
            },
            async onAfterLoad(event, form, elem) {
                assignListeners('           MenuItem remove:', elem);
            }
        },
        <IMenuItem>{
            type: UIMenuItem,
            caption: 'edit',
            iconDisplay: IconDisplay.icon,
            figAwesome: <IFigAwesome>{
                faClass: ['fas', 'fa-edit', 'fa-lg'],
                faStyle: ['color: grey;']
            },
            tabindex: 0,
            async onKeyDown(event, form, elem, item) {
                if (event.key == 'Enter') {
                    let table: ITable = form.getElement(this.parent.owner.name) as ITable;
                    table.edit();   
                }                           
            },
            async onClick(event:UIMouseEvent, form: IForm, menu: IMenu, menuItem: IMenuItem) {
                let table: ITable = form.getElement(this.parent.owner.name) as ITable;
                table.edit();   
            },
            async onAfterLoad(event, form, elem) {
                assignListeners('           MenuItem edit:', elem);
            }
        }
    ],
    async onAfterLoad(event, form, elem) {
        assignListeners('       Menu:', elem);
    }
}

export let form: IForm = <IForm>{
    type: UIForm,
    name: 'simpleForm',
    elements: [
        <ITable>{
            type: UITable,
            name: 'myTable',
            grided: true,
            // showHeader: true,
            allowSelectCell: true,
            // multipleSelect: MultipleSelect.ctrlKey,            
            menu: menu,
            columns: [{
                header: "Имя",
                justifyContent: JustifyContent.left,
                itemsElement: <IDataElement>{
                    type: UIDataElement,                    
                    alignSelf: AlignSelf.topLeft,/**Выравнивание не только по горизонтали, но и по вертикали*/
                    // justifyContent: JustifyContent.left,
                    bindingProperty: 'name'
                },
                size:'40%'/**Ширина колонки*/
            }, {
                header: "Пол",
                justifyContent: JustifyContent.center,
                itemsElement: <IDataElement>{
                    type: UIDataElement,
                    alignSelf: AlignSelf.topCenter,/**Выравнивание не только по горизонтали, но и по вертикали*/
                    // justifyContent: JustifyContent.center,
                    bindingProperty: 'sex'
                },
                size:'30%'/**Ширина колонки*/
            }, {
                header: "Возраст",
                justifyContent: JustifyContent.right,
                itemsElement: <IDataElement>{
                    type: UIDataElement,                    
                    alignSelf: AlignSelf.topCenter,/**Выравнивание не только по горизонтали, но и по вертикали*/
                    // justifyContent: JustifyContent.center,
                    bindingProperty: 'age'
                },
                size:'30%'/**Ширина колонки*/
            }],
            //value: undefined,
            bindingProperty: 'tableData', 
            bordered: true,
            tabindex: 0,
            async onAfterAddRow(event:UIRowEvent, form, elem:ITable) {
                let elems = event.row.elements;
                let rowIndex:number = elem.rows.findIndex(row=>{return row==event.row});
                elems.forEach((elem, index)=>{
                    elem.name = `${rowIndex}-${index}`;
                    assignListeners(`       Cell ${elem.name}:`,elem);
                })
            },
            async onAfterLoad(event, form, elem) {
                assignListeners('   Table:',elem);
            },
        }
    ],
    async onAfterLoad(event, form, elem) {
        assignListeners('Form:', elem);
    },
}

let data = {
    tableData: [
        {
            age:"29",
            name:"Михаил", 
            sex:"м" 
        },
        {
            sex: "м", 
            age:"26",
            name:"Дмитрий"
        },
        {
            name: "Анна", 
            age:"20",
            sex:"ж" 
        },
    ],
    anotherData: {}
}

function assignListeners(prefix:string, elem:IElement){
    elem.on('beforeEdit', async function(event:UIEditEvent, form:IForm, elem: IDataElement, item:IDataElement){
        console.log(`%c ${prefix} beforeEdit called`, 'color: yellow');
    });
    elem.on('afterEdit', async function(event:UIEditEvent, form:IForm, elem: IDataElement, item:IDataElement){
        console.log(`%c ${prefix} onAfterEdit called`, 'color: yellow');
    });

    elem.on('focus', async function(event:UIFocusEvent, form:IForm, elem: IDataElement, item:IDataElement){
        console.log(`%c ${prefix} onFocusCapturing called`, 'color: green');
    });
    elem.on('blur',  async function(event:UIFocusEvent, form:IForm, elem: IDataElement, item:IDataElement){
        console.log(`%c ${prefix} onBlurCapturing called`, 'color: lightgreen');
    });
    elem.on('focus', async function(event:UIFocusEvent, form:IForm, elem: IDataElement, item:IDataElement){
        console.log(`%c ${prefix} onFocusBubbling called`, 'color: green');
    }, {capture:false});
    elem.on('blur',  async function(event:UIFocusEvent, form:IForm, elem: IDataElement, item:IDataElement){
        console.log(`%c ${prefix} onBlurBubbling called`, 'color: lightgreen');
    }, {capture:false});

    elem.on('keydown', async function(event:UIKeyboardEvent, form:IForm, elem: IDataElement, item:IDataElement){
        console.log(`%c ${prefix} onKeyDownCapturing called`, 'color: lightgrey');
    });
    elem.on('keyup', async function(event:UIKeyboardEvent, form:IForm, elem: IDataElement, item:IDataElement){
        console.log(`%c ${prefix} onKeyUpCapturing called`, 'color: grey');
    });
    elem.on('keydown', async function(event:UIKeyboardEvent, form:IForm, elem: IDataElement, item:IDataElement){
        console.log(`%c ${prefix} onKeyDownBubbling called`, 'color: lightgrey');
    }, {capture:false});
    elem.on('keyup', async function(event:UIKeyboardEvent, form:IForm, elem: IDataElement, item:IDataElement){
        console.log(`%c ${prefix} onKeyUpBubbling called`, 'color: grey');
    }, {capture:false})
}

/*Инициализация приложения AppManager*/
var Global: any = window;
Global.AppManager = AppManager;
Global.onpopstate = AppManager.onPopState;

AppManager.init(document.querySelector('#app'))
    .then(async ()=>{
        AppManager.add([form]);
        AppManager.open('simpleForm', data);
    })

Навигация между элементами осуществляется клавишами Tab и Shift+Tab.

Навигация между ячейками таблицы осуществляется стрелками.

Клавишей F12 откройте окно разработчика в браузере и наблюдайте за происходящими на форме событиями.