How do I use tab and arrow keys to navigate the table.

[CraigPatakyEDX]

I use ka-table to display and edit my spreadsheet data and have had great success. I have even wrapped ka-table with my own component that manages entire workbooks (collections of sheets) and populates dropdowns dynamically and all that good stuff. I couldn't be happier.

I am being asked to add a feature that allows a user to navigate the table using the tab and arrow keys and I do not know where to start. I do not want to openAllEditors to force the tabstop behavior. Instead, I want the table to behave as if I were hovering over a given cell with the mouse pointer.

I am hoping I can be helped with this, or at least get some direction. Thank you in advance!

[CraigPatakyEDX]

I just found the demo "keyboard navigation" and am looking at that now. So, this question has already been answered but I will add further comment as I work through the demo.

[CraigPatakyEDX]

Porting over select elements from the keyboard navigation demo worked great. A small mod I made was to better manage the rowEditToolkit column.

My final challenge is to figure out how to handle returning focus to the cell when a user is done making a selection from a special editor (such as dropdown) ... As it stands, the focus ring disappears from the cell when the dropdown gets the focus (as it should) but does not automatically return to the cell when the selection is complete.

[komarovalexander]

Can you provide some example to reproduce that?🙂

[CraigPatakyEDX]

Thanks for contacting me! I forked your keyboard navigation demo and added a dropdown to column 1. You can see the behavior I am writing about.
https://stackblitz.com/edit/table-keyboard-navigation-ts-kxewwf?file=Demo.tsx
https://table-keyboard-navigation-ts-kxewwf.stackblitz.io

[komarovalexander]

I see. Here is a working example: https://stackblitz.com/edit/table-keyboard-navigation-ts-vkcq4c?file=Demo.tsx
2 notes:

1. you can set focused cell in your custom editor, see lines 120 & 121 in my example
2. as you write your custom editor content, then editorInput will not be rendered and elementAttributes will not work, and you have to add some keyboard logic to your component, see line 104