Selection, keyboard & clipboard
Row selection
const options = { /* ... */ selection: { mode: 'multiple', checkbox: true } };
// selection: { mode: 'single' }
Livewire: public bool $selectable = true;
A checkbox column is added (for multiple), with a header checkbox to select the
current page.
grid.toggleSelect(rowId);
grid.isSelected(rowId);
grid.selectAllOnPage();
grid.clearSelection();
grid.selectedIds();
Keyboard navigation & cell selection
The grid is a role="grid" with proper columnheader / gridcell roles,
aria-sort, aria-selected, and a roving tabindex.
| Key | Action |
|---|---|
| Arrow keys | Move the active cell |
| Home / End | First / last cell in the row |
| Ctrl/⌘ + Home / End | First / last cell in the grid |
| PageUp / PageDown | Move up / down by a page (viewport height) |
| Shift + Arrows | Extend a cell range |
| Click / Shift-Click | Set / extend the active range |
| Space | Toggle selection of the active row (selection on) |
| Ctrl/⌘ + A | Select all rows on the page (selection on) |
| Enter / F2 | Edit the active cell (in-cell editing) |
| Escape | Cancel the current edit |
| Ctrl/⌘ + C | Copy the selected range (TSV) |
| Ctrl/⌘ + V | Paste into editable cells (editing enabled) |
The active cell shows an accent outline; the range is highlighted. Typing in a filter or editor input is never intercepted by grid navigation.
Programmatic (client core):
grid.setActiveCell(r, c); // extend? grid.setActiveCell(r, c, true)
grid.moveActive('ArrowDown', /* extend */ false);
grid.isActiveCell(r, c);
grid.inSelectionRange(r, c);
grid.copySelection(); // returns TSV string
await grid.pasteAt(tsvText); // applies to editable cells from the active cell
copySelection() builds the TSV from the data (not the DOM), so it copies exact
values.
Clipboard paste
With editing enabled, Ctrl/⌘ + V reads the clipboard, parses a TSV matrix, and
writes it into the editable columns starting at the active cell — one persisted
mutation per affected row. Non-editable columns in the paste range are ignored.
Row pinning
Pin rows to the top of the list:
grid.togglePinRow(rowId);
grid.isPinned(rowId);
Pinned rows render first. In the clients a pin button appears in the command column.