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 Keys | Move focus |
| Tab | Next cell |
| Shift+Tab | Previous cell |
| Home | First column |
| End | Last column |
| Ctrl+Home | First cell |
| Ctrl+End | Last cell |
| Page Up/Down | Page navigation |
KN02 Editing Shortcuts
F2, Enter, Escape, Delete, and clipboard shortcuts with copy/paste callbacks
Edit Actions
| Key | Action |
|---|---|
| F2 | Edit cell (cursor at end) |
| Enter | Edit cell / Commit & move down |
| Escape | Cancel editing |
| Space | Toggle checkbox / Open dropdown |
| Delete | Clear cell value |
| Any char | Start editing with that character |
Code
Clipboard
Clipboard
Clipboard Support
| Ctrl+C | Copy cell value |
| Ctrl+V | Paste into cell |
| Ctrl+Delete | Delete 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 Keys | Move focus one cell |
| Tab / Shift+Tab | Next/previous cell |
| Home / End | First/last column in row |
| Ctrl+Home | First cell (top-left) |
| Ctrl+End | Last cell (bottom-right) |
| Page Up / Page Down | Move one page |
| Ctrl+Page Up | First row, same column |
| Ctrl+Page Down | Last row, same column |
Editing
| F2 | Start editing (cursor at end) |
| Enter | Start editing / Commit & move down |
| Escape | Cancel editing |
| Space | Toggle checkbox / Open select |
| Delete | Clear cell |
| Ctrl+C | Copy cell |
| Ctrl+V | Paste into cell |
| Ctrl+Delete | Delete row |
Additional Keyboard Features
Clipboard Operations
| Shortcut | Action | Context |
|---|---|---|
| Ctrl+C | Copy selected cells/rows to clipboard | Cell or row selection active |
| Ctrl+V | Paste TSV data from clipboard | Editable grid with cell selection |
| Ctrl+A | Select all cells | Navigate mode |
Column Selection
| Shortcut | Action | Context |
|---|---|---|
| Click header | Select entire column | Cell selection enabled |
| Ctrl+Click header | Add/remove column from selection | Multi-column selection |
| Shift+Click header | Select range of columns | Extends from last selected column |
| Drag header | Select columns by dragging | When isColumnReorderAllowed = false |
Checkbox Editor
| Key | Action |
|---|---|
| Space | Toggle checkbox value |
| Enter / Tab | Commit and move to next cell |
| Escape | Discard change and exit edit |
Date Picker
| Key | Action |
|---|---|
| Arrow Keys | Navigate between days |
| Page Up/Down | Previous/next month |
| Home/End | First/last day of month |
| Enter | Select date and commit |
| Escape | Close picker without selecting |