Keyboard Navigation
Navigate rows with arrow keys. Select with Space, expand with Enter.
> click table, use ↑↓ arrows
ID
Name
Email
Dept
Salary
↑↓ navigate · Space select · Home/End jump
Click the table, then use keyboard to navigate:
const { focusedRowIndex, handleKeyDown } = useVirtualTable({
data,
columns,
enableKeyboardNavigation: true,
});
<div
ref={containerRef}
tabIndex={0}
onKeyDown={handleKeyDown}
>↑↓ Move focus
Home End Jump to first/last
Space Toggle selection
Enter Toggle expansion
| Option | Type | Default |
|---|---|---|
enableKeyboardNavigation | boolean | false |
focusedRowIndex | number | — |
onFocusedRowIndexChange | (index) => void | — |