Click a cell and drive the whole grid from the keyboard — arrows move a focused cell, Enter edits it, Space selects the row, Tab never traps you. On by default, nothing to configure.

Click a cell, then drive the grid from the keyboard

Keyboard navigation is on by default — no config, no callbacks. Click any cell (or Tab into the grid) and a focus ring appears. From there the keyboard does everything the mouse can:

Keys	What they do
`↑` `↓` `←` `→`	Move one cell. The grid scrolls on its own to keep the focused cell visible.
`Tab` / `Shift`+`Tab`	Next / previous cell, wrapping across rows. At the very last cell, focus leaves the grid — no keyboard trap.
`Home` / `End`	First / last column of the row.
`Ctrl`+`Home` / `Ctrl`+`End`	First / last cell of the grid.
`PgUp` / `PgDn`	One viewport up / down. With pagination, crossing the last row moves to the next page.
`Enter`	Open the inline editor on an editable cell. Committing returns focus to the cell.
`Escape`	Close the editor without saving — focus returns to the cell.
`Space`	Select / deselect the focused row (when row selection is on).

Focus survives everything

The focused cell is remembered by row identity, not screen position. Scroll a thousand rows away and back — the ring is still on the same cell. Edit a value, sort a column, or receive a live update — focus stays where you left it.

Editing flows through the keyboard

Enter opens the editor, Enter again commits, Escape cancels — and in every case the cell keeps the focus, so you can keep moving with the arrows. Tab inside an editor commits and moves to the next cell, Excel-style. Try it on the Name, City, or Salary columns above.

Grouped rows are part of the path

With row grouping active, the arrows stop on group headers as whole-row positions — Enter or Space expands and collapses the group, then ↓ walks into its rows. One continuous path, no separate "modes".

Opting out

Set keyboardNav: false to disable the model entirely, or restyle / remove the ring with the --gc-cell-focus-outline CSS variables — no JavaScript required.

readonly config: GridConfig<Person> = {
  keyboardNav: false,        // no focus model at all
};

/* or keep the model, restyle the ring: */
gridcraft { --gc-cell-focus-outline: #16a34a; --gc-cell-focus-outline-width: 1px; }

In right-to-left layouts (dir: 'rtl') the horizontal arrows follow the visual direction — → always moves toward the right of the screen.

Property	Type	Default	Description
config.keyboardNav	boolean	true	The focused-cell model + all key handling. Set `false` to disable entirely.
(cellFocusChange)	CellFocusEvent<T>	—	Emits on every focus move: `{ row, column, rowId, colKey }` — `row`/`column` are `null` on group rows and unloaded rows.
focusCell(rowId, colKey)	void	—	Focus a cell programmatically (scrolls it into view) — e.g. restoring focus after a dialog.
--gc-cell-focus-outline / -width / -offset	CSS vars	theme accent, 2px, -2px	The focus ring. Keyboard-only (`:focus-visible`) — mouse clicks never paint it.

Keyboard Navigation