Spreadsheet Table
An Excel-like table component with keyboard navigation for data entry.
Keyboard Navigation
| Key | Action |
|---|
| ↑ / ↓ | Move up/down one cell |
| ← / → | Move left/right when cursor is at input boundary |
| Enter | Move down one cell |
| Tab | Move right, wrap to next row at end |
| Shift+Tab | Move left, wrap to previous row at start |
| Escape | Blur the current cell |
Features
- Edge-to-edge input cells like Excel
- Row numbers and column headers
- Visual focus indicator with blue border
- Row header highlights when cell in that row is focused
- Arrow keys navigate between cells (left/right only at input boundaries)
- Tab/Shift+Tab wrap at row boundaries
- Enter moves down like a typical spreadsheet
- Focus position tracking via
sandhill.spreadsheet.getPosition()
JavaScript API
Initialization
sandhill.spreadsheet.init('table-id');
Get Current Position
const pos = sandhill.spreadsheet.getPosition();
// { row: 0, col: 0, tableId: 'demo-spreadsheet' }
Focus a Specific Cell
sandhill.spreadsheet.focusCell(2, 3); // Focus row 2, column 3