KN01 Navigate Mode

Excel-like cell navigation with arrow keys, Tab, Home, End, and Page keys

Live Demo

Click a cell, then use arrow keys to navigate. Type to start editing.

Code
Navigate Mode
 
Keyboard Shortcuts
Navigation
Arrow KeysMove focus
TabNext cell
Shift+TabPrevious cell
HomeFirst column
EndLast column
Ctrl+HomeFirst cell
Ctrl+EndLast cell
Page Up/DownPage navigation

KN02 Editing Shortcuts

F2, Enter, Escape, Delete, and clipboard shortcuts with copy/paste callbacks

Edit Actions
KeyAction
F2Edit cell (cursor at end)
EnterEdit cell / Commit & move down
EscapeCancel editing
SpaceToggle checkbox / Open dropdown
DeleteClear cell value
Any charStart editing with that character
Code
Clipboard
 
Clipboard
Clipboard Support
Ctrl+CCopy cell value
Ctrl+VPaste into cell
Ctrl+DeleteDelete row
Callbacks

beforeCopyCallback - Transform on copy

beforePasteCallback - Validate/transform on paste

KN03 Virtual Infinite Scroll

Navigate and edit through virtualized rows with infinite loading

Live Demo

100 rows loaded - Use Ctrl+End to jump to bottom, scroll loads more. All rows are editable.

Code
Virtual + Infinite + Navigate
 
Features
Combined Features
  • Virtual scroll - Only renders visible rows
  • Infinite scroll - Loads more on scroll
  • Navigate mode - Arrow keys move focus
  • Edit mode - Type to edit cells
Try It
  • Ctrl+End - Jump to last row (loads more)
  • Page Down - Navigate through pages
  • Type to edit any cell
  • Scroll to bottom to load more

Complete Keyboard Reference

Navigation
Arrow KeysMove focus one cell
Tab / Shift+TabNext/previous cell
Home / EndFirst/last column in row
Ctrl+HomeFirst cell (top-left)
Ctrl+EndLast cell (bottom-right)
Page Up / Page DownMove one page
Ctrl+Page UpFirst row, same column
Ctrl+Page DownLast row, same column
Editing
F2Start editing (cursor at end)
EnterStart editing / Commit & move down
EscapeCancel editing
SpaceToggle checkbox / Open select
DeleteClear cell
Ctrl+CCopy cell
Ctrl+VPaste into cell
Ctrl+DeleteDelete row