Keyboard Shortcuts

Graphite Grid provides a set of keyboard shortcuts that respond to user interactions.

Use the arrow keys ←, →, ↑, and ↓ to navigate cells in the grid, including header and grid cells. The tab key moves to the next cell following the DOM's tab order (not supported by the Canvas renderer). Avoid using tab for grid cell navigation.

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

Adjust Header Width

When focusing on a header cell (or floating cell), use Shift ← or Shift → to increase or decrease the column width. This applies only to resizable columns.

Expand Cell Selection

When cellSelectionMode is set to range, use shift with ←, →, ↑, or ↓ to expand or shrink the selection.

Editable Cells

When focusing on an editable cell (see Cell Editing), press Enter to begin editing. Press Enter again to accept the edit and trigger the onCellEdit callback. Press Esc to cancel the edit.

Toggle Column Header Groups

When focusing on a collapsible column header group, press Enter to toggle its collapse state. If all columns are hidden when collapsed, focus moves to the collapsed column header.

Toggle Row Pivots

When focusing on a row pivot cell, press Enter to toggle the row pivot's expansion state.

Toggle Detail Expansions

When focusing on the detail cell, press Enter to toggle the row's detail expansion state.

Row Selection

When row selection is enabled, press space to toggle the row's selection state. If the row is selected and deselection is disabled, Graphite Grid will not deselect the row.

Touch Interactions

Graphite Grid works seamlessly with touch devices. Browsers trigger click events when an element is tapped, and Graphite Grid uses click events for most listeners.

Drag Interactions

Graphite Grid uses Pointer events for all drag interactions, supporting mouse and touch inputs. Drag the header to begin column moving, or drag the header cell's edge to start column resizing. No specific configuration is required for these interactions.