Examples
Selection
Implement cell, row, and range selection in the Vue 3 grid with keyboard shortcuts, multi-select gestures, and clipboard-friendly copy operations today.
gp-grid supports cell selection with range and multi-select capabilities.
Single Cell Selection
Click any cell to select it.
Range Selection
Click and drag to select a range of cells, or:
- Click a cell
- Hold
Shift - Click another cell
Keyboard Navigation
| Key | Action |
|---|---|
Arrow keys | Move active cell |
Shift + Arrow | Extend selection |
Tab | Move to next cell |
Shift + Tab | Move to previous cell |
Enter | Move down (or start editing) |
Home | Go to first cell in row |
End | Go to last cell in row |
Ctrl + Home | Go to first cell |
Ctrl + End | Go to last cell |
Selection Styling
Selected cells receive distinct styling that adapts to dark mode.
Filtering
Add column filtering to the Vue 3 grid using built-in operators, custom filter components, and live updates as users refine their search criteria today.
Editing
Enable inline cell editing and the fill handle in the Vue 3 grid with validators, custom editors, keyboard shortcuts, and clipboard-style range fill flows.