Example of KeyBoard Interaction in React Tree Grid Component


This demo showcases the keyboard shortcuts applicable on Tree Grid and also lists out in below description, how those applicable shortcuts interacts with Tree Grid actions.

More Details...


All the Tree Grid actions can be controlled via keyboard keys and is availed by using allowKeyboardInteraction property which is set to true by default. The applicable key combinations and its relative functionalities are listed below,

Ctrl + Down ArrowExpandAll
Ctrl + Up ArrowCollapseAll
Ctrl + HomeFirst row selection
Ctrl + EndLast row selection
HomeFirst cell selection
EndLast cell selection
Up ArrowMove row selection up
Down ArrowMove row selection down
Up ArrowMove Cell selection up
Down ArrowMove Cell selection down
Right ArrowMove Cell selection right
Left ArrowMove Cell selection left
Shift + Down/UpMultiple row Selection
Shift + Right/Left/Down/UpMultiple Cell Selection
Ctrl + Shift + Up ArrowCollapse selected parent row
Ctrl + Shift + Down ArrowExpand selected parent row
Alt + jFocus Tree Grid element
TabGo to next cell for editing
Shift + TabGo to previous cell for editing
PageDownGo to Next page
PageUpGo to Previous page
Ctrl + Alt + PageUpGo to First page
Ctrl + Alt + PageDownGo to Last page
Alt + PageUpGo to Next pager
Alt + PageDownGo to last pager

More information on the gridLines configuration can be found in this documentation section.