Keyboard and Accessibility

Keyboard

LyteNyte Grid offers a comprehensive set of keyboard shortcuts to enhance user interaction and accessibility.

Navigate through cells using arrow keys ←, →, ↑, and ↓, which work for both header and grid cells. The tab key follows the DOM's natural tabbing order (not available in Canvas renderer). For optimal grid navigation, arrow keys are recommended over the tab key.

Ctrl → : Navigate to the last cell in the current row or header
Ctrl ← : Navigate to the first cell in the current row or header
Ctrl ↑ : Move focus to the first row (when focusing on a grid cell)
Ctrl ↓ : Move focus to the last row (when focusing on a grid cell)

Expand Cell Selection

When using range selection mode (cellSelectionMode set to range), hold shift while pressing ←, →, ↑, or ↓ to expand or contract the current selection.

Editable Cells

For cells configured as editable (see Cell Editing), press Enter to activate editing mode. Press Enter again to confirm changes and trigger the onCellEdit callback. Use Esc to cancel editing and revert to the original value.

Toggle Column Header Groups

When focused on a collapsible column header group, press Enter to toggle its expanded state. If collapsing would hide all columns, focus automatically shifts to the collapsed header.

Toggle Row Pivots

When focused on a row pivot cell, press Enter to toggle the expansion state of that pivot row.

Toggle Detail Expansions

When focused on a detail cell, press Enter to toggle the expanded state of the row's details.

Row Selection

With row selection enabled, press space to toggle a row's selection state. If deselection is disabled for selected rows, LyteNyte Grid will maintain the row's selected state.

Touch Interactions

LyteNyte Grid provides seamless support for touch devices. Browser-generated click events are triggered when elements are tapped, and LyteNyte Grid utilizes these events for most interaction listeners.