Keyboard Navigation

RevoGrid supports spreadsheet-style keyboard interaction for moving the focused cell, selecting ranges, editing values, and using the clipboard. Keyboard actions apply to the focused grid; configure range and useClipboard when your workflow needs range selection or clipboard operations.

const grid = document.querySelector('revo-grid');

if (grid) {
  grid.range = true;
  grid.useClipboard = true;
}

Move focus and select ranges

Shortcut	Behavior
Arrow	Move the focused cell one position in the selected direction.
Tab	Move focus one cell to the right.
Shift + Tab	Move focus one cell to the left.
Shift + Arrow	Extend the active range in that direction when range is enabled.

Jump to a grid edge

Use the primary platform modifier with an arrow key to move directly to the first or last available row or column.

Platform	Shortcut
Windows and Linux	Ctrl + Arrow
macOS	Cmd + Arrow

Add Shift to either shortcut to extend the active range to that edge. Range extension requires range: true.

RevoGrid does not consume primary-modifier shortcuts that use Tab or Alt + Arrow, so the browser can retain those shortcuts.

Edit and clear cells

Shortcut	Behavior
Printable key	Start editing the focused cell with that value.
Enter	Start editing the focused cell.
Escape while editing	Cancel the active edit.
Backspace or Delete	Clear the active selection when the grid is editable.

Whether an edit can be applied still follows the grid and column readonly settings. See Editing for editor configuration and lifecycle events.

Select all and use the clipboard

Shortcut	Behavior
Ctrl/Cmd + A	Select all cells when range is enabled.
Ctrl/Cmd + C	Copy the active selection.
Ctrl/Cmd + X	Cut the active selection.
Ctrl/Cmd + V	Paste at the focused cell.

Clipboard actions require useClipboard. For clipboard configuration, range fill behavior, and events, see Clipboard Operations.

Customize keyboard behavior

Listen for the cancelable beforekeydown event to inspect or replace a keyboard action before RevoGrid handles it:

grid.addEventListener('beforekeydown', event => {
  const { original } = event.detail;

  if (original.key === 'F2') {
    event.preventDefault();
    // Run an application-specific action.
  }
});

For focus management and wider accessibility guidance, see Accessibility.