Keyboard & accessibility

Keyboard navigation

Ctrl stands for ⌘ on macOS.

Key	Action
← → ↑ ↓	move the focus (↑ / ↓ also focus group rows)
Ctrl + arrow keys	move the focus and add the cell to the selection (multi selection)
Tab / Shift + Tab	next / previous cell (wraps to the next row)
Page Up / Page Down	one page up / down
Home / End	first / last cell of the row
Ctrl + Home / End	first / last cell of the grid
Shift + arrow keys, Page Up / Page Down, Home / End	extend the selection
Space	toggle the selection of the row (row selection, Shift + Space selects a range) or start editing
Ctrl + A	select all
Enter	start editing, expand / collapse tree rows which are not editable
F2	start editing
any character	start editing and replace the value with the typed character
Delete / Backspace	clear the editable cells of the selection (cell range, all cells of the selected rows or the focused cell)
Alt + ← / →	collapse / expand tree rows
Ctrl + C	copy the selection (clipboard)
Ctrl + X	cut: copy the selection and clear the editable cells
Ctrl + V	paste at the focused cell
Ctrl + Z	undo the last change (undo and redo)
Ctrl + Y / Ctrl + Shift + Z	redo
Escape	cancel column dragging or dragging the fill handle

Copy, cut and paste require the option clipboard, undo and redo the option undoRedo (both enabled by default). Delete, cut, paste and undo only change editable cells.

While editing

Key	Action
Enter	finish editing (with enterMovesDown: true the focus moves to the cell below, with Shift to the cell above)
Shift + Enter	new line in a textarea editor
Tab / Shift + Tab	finish editing and edit the next / previous cell
Escape	cancel editing

Group rows

When a group row (or a group footer) has the focus:

Key	Action
↑ / ↓	previous / next row
→	expand the group, move to the next row if it is expanded already
←	collapse the group, move to the parent group if it is collapsed already
Enter / Space	expand / collapse the group
Home / End	first / last row of the grid

On a group footer the keys expand / collapse the group of the footer.

The focused cell always stays rendered and is scrolled into view.

Custom keyboard handling

Handle keys yourself with the onCellKeyDown callback and call preventDefault() to disable the default behavior:

<Datagrid
  :events="{
    onCellKeyDown: (e) => {
      if (e.key === 'Delete') {
        e.preventDefault();
        deleteSelectedRows();
      }
    },
  }"
/>

<Datagrid
  events={{
    onCellKeyDown: (e) => {
      if (e.key === "Delete") {
        e.preventDefault();
        deleteSelectedRows();
      }
    },
  }}
/>

Accessibility

The grid follows the ARIA grid pattern:

• role="grid", row, columnheader, gridcell and rowgroup
• aria-rowcount, aria-colcount, aria-rowindex, aria-colindex (also for virtualized rows)
• aria-sort on sortable headers
• aria-selected for selected rows and cells, aria-multiselectable
• aria-expanded and aria-level for tree and group rows
• aria-busy while loading
• a roving tabindex: only the focused cell is part of the tab order
• labels for checkboxes, toggle buttons and filter inputs (localized)