Devextreme-reactive: Keyboard Navigation for React Grid

[LazyLahtak]

The Problem

React Grid users can use the keyboard to focus and control interactive elements (filters, buttons, editors). The Grid, however, does not provide full keyboard navigation support. This shortcoming, particularly evident in such use cases as Inline Cell Editing, decreases the Grid's overall accessibility.

The Proposed Solution

A new TableKeyboardNavigation plugin allows you to enable built-in keyboard navigation.

Controlled Mode

const [focusedCell, setFocusedCell] = useState(null);
const {
  rowKey,         // A unique key that identifies a row; formatted as "RowType_RowId"
  columnKey       // A unique key that identifies a column; formatted as "ColumnType_ColumnName"
} = focusedCell;
...
<TableKeyboardNavigation
  focusedCell={focusedCell}
  onFocusedCellChange={setFocusedCell}
/>

Uncontrolled Mode

const defaultFocusedRowId = 2;
const defaultFocusedColumn = "name";
const defaultFocusedCell = {
  rowKey: `${Table.ROW_TYPE}_${defaultFocusedRowId}`,
  columnKey: `${Table.COLUMN_TYPE}_${defaultFocusedColumn}`,
}
...
<TableKeyboardNavigation
  defaultFocusedCell={focusedCell}
  focusedRowEnabled // Applies a focused style to the row that contains the focused cell
/>

Excel-like Navigation

The following keys can be used:

• Tab / Shift + Tab - Moves the focus one cell forward/back.
• Arrow keys - Navigate to the corresponding element (above, below, left, right).
• Ctrl (Cmd) + Up/Down Arrow - Moves the focus between the header row, filter row, table, and footer.
• Ctrl (Cmd) + F - Moves the focus to the search panel (if it is visible).

Actions on Interactive Elements

The following keys can be used:

• Enter (Return) - Performs the action of the focused element (expands/collapses row or group, switches the focused cell to the edit state).
• Esc - Discards edits (if a row is in the edit state).
• Space - Selects/deselects the focused row (if selection is enabled).
• Ctrl (Cmd) + Left/Right Arrow - Collapses/expands the focused row in tree mode.

We Need Your Feedback

Take a Quick Poll

Do you find the keyboard navigation enhancements useful?

Get Notified of Updates

Subscribe to this thread or our Facebook and Twitter accounts for updates on this topic.

[jesusgp22]

looks good but I'm also expecting some controls to toggle expanded rows, using Ctrl to do so recursively would be best

[LazyLahtak]

Hi @jesusgp22,

Thank you for your response. We don't plan to support built-in recursive expand. I suggest that you implement this scenario using tree data in controlled mode. Here is an example that illustrates how to do this. You can use it with Keyboard Navigation as well.

[las3r]

This seems like a good starting point. I would however ask you guys to also include shift-selection of ranges in the grid as an extension to this.

[michaeltnguyen]

I think this feature will be a great addition. Do you have any experimental builds with it, or do you have a (very rough) ETA? We're trying to decide if we can wait for this feature, or if we should try to roll our own for the time being.