Selection
Implement cell, row, and range selection in the React 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. The active cell is highlighted with a distinct border.
Range Selection
Click and drag to select a range of cells:
- Click a cell to start
- Drag to extend the selection
- Release to complete the range
Or use keyboard:
- Click a cell
- Hold
Shift - Click another cell to select the range
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:
- Active cell: Bold border
- Selected range: Highlighted background
The styling automatically adapts to dark mode when darkMode={true}.
Filtering
Add column filtering to the React 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 React grid with validators, custom editors, keyboard navigation, and clipboard-style range fill flows.