@jsvision/datagrid / gridKeymap

Variable: gridKeymap

const gridKeymap: Keymap

Defined in: datagrid/src/navigation.ts:96

The loop-keymap fragment binding Tab/Shift+Tab to the grid-navigation commands. Merge it into createEventLoop({ keymap }) so Tab reaches the grid as a command (the framework otherwise swallows an unbound Tab for focus traversal). Binding Tab here means the app owns global Tab policy — the installGridNavigation handler restores focus traversal when no grid is focused.

Example

import { createEventLoop, resolveCapabilities, signal, Group } from '@jsvision/ui';
import { column, fromRows, EditableDataGrid, gridKeymap, installGridNavigation } from '@jsvision/datagrid';

interface Row { id: number; name: string }
const rows = signal<Row[]>([{ id: 1, name: 'Ada' }]);
const columns = [column({ id: 'name', title: 'Name', value: (r: Row) => r.name })];
const grid = new EditableDataGrid<Row>({ columns, source: fromRows(rows, { rowKey: (r) => r.id }) });
const root = new Group();
root.add(grid);

const caps = resolveCapabilities().profile;
const loop = createEventLoop({ width: 80, height: 24 }, { caps, keymap: gridKeymap });
loop.mount(root);
const uninstall = installGridNavigation(loop, grid); // Tab → next cell; Shift+Tab → prev cell