Keyboard navigation

Opt-in keyboard navigation makes the grid operable without a mouse. A single active row carries focus (roving tabindex): Arrow Up/Down move it, Home/End jump to the first/last row, Space toggles its selection, Shift+Arrow extends the selection range, and Enter / Arrow Right / Left expand or collapse a group. Focus survives re-renders, so sorting or filtering never drops the user’s place.

Dash (Python)

from dash_tensor_grid import TensorGrid

# ARIA treegrid + roving tabindex: arrows move the active cell, Home/End and PageUp/PageDown jump.
TensorGrid(id="grid", row_data=..., column_defs=..., enable_keyboard_nav=True)

React

import { TensorGrid } from '@tensorgrid/react';

<TensorGrid
  data={data}
  rows={['region', 'country']}
  measures={{ revenue: 'sum', qty: 'sum' }}
  enableKeyboardNav
/>;

Vue

<TensorGrid
  :data="data"
  :rows="['region', 'country']"
  :measures="{ revenue: 'sum', qty: 'sum' }"
  enable-keyboard-nav
/>

Vanilla JS

import { mountTensorGrid } from '@tensorgrid/vanilla';

mountTensorGrid(document.getElementById('grid'), {
  data,
  rows: ['region', 'country'],
  measures: { revenue: 'sum', qty: 'sum' },
  enableKeyboardNav: true,
});

Notes

• Key map. Arrow Up/Down move the active row; Home/End jump to first/last; Space toggles selection; Shift+Arrow extends the range; Enter / Arrow Right expands, Arrow Left collapses.
• Focus is preserved across the re-render that sort / filter / edit trigger — the active row is re-focused only if it already held focus, so navigation is never stolen or lost.
• Pairs naturally with selection (Space / Shift+Arrow build the same selection the mouse does) and the opt-in chrome.