Overview
WebGrid supports row selection via row numbers, cell range selection via click+drag or shift+click, column selection via header clicks, and select all via Ctrl+A or clicking the # header.
All modes support keyboard shortcuts for batch operations, copying to clipboard, and pasting from Excel.
Row Selection
RS01 Basic Row Selection
Click row numbers to select rows. Use Ctrl+Click to toggle, Shift+Click for range selection, or drag to select multiple rows.
- Click row number - Select single row (clears others)
- Ctrl+Click - Toggle row in selection
- Shift+Click - Select range from last selected
- Click+Drag - Select range while dragging
- Escape - Clear selection
RS02 Row Selection with Shortcuts
Select rows and press Ctrl+C to copy, or Delete to remove them.
Cell Range Selection
CS01 Click+Drag Mode
Click and drag on cells to select a rectangular range. Press Delete to clear selected cells.
CS02 Shift+Click Mode
Use cellSelectionMode: 'shift' when editTrigger: 'click' to avoid conflicts. Hold Shift and click two cells to define a range.
Copy to Clipboard
Excel-Compatible Copy
Copy selected rows or cell ranges to clipboard in TSV format (tab-separated values). Paste directly into Excel, Google Sheets, or any spreadsheet application.
- Select rows (click row numbers) or cells (click+drag on cells)
- Press Ctrl+C
- Open Excel/Google Sheets and paste
- Toggle "Include column headers" and try again
Output Format (TSV)
API Reference
Properties
| Property | Type | Description |
|---|---|---|
| Row Selection | ||
selectedRows | number[] | Array of selected row indices (read-only, sorted ascending) |
| Cell Selection | ||
cellSelectionMode | 'disabled' | 'click' | 'shift' | Cell selection mode (default: 'click') |
selectedCellRange | CellRange | null | Current cell range selection (read-only) |
| Copy | ||
shouldCopyWithHeaders | boolean | Include column headers when copying (default: false) |
| Shortcuts | ||
rangeShortcuts | RangeShortcut[] | Keyboard shortcuts for selected rows/cells |
Methods
| Method | Description |
|---|---|
| Row Selection | |
selectRow(index, mode) | Select a row. Mode: 'replace', 'toggle', or 'range' |
selectRowRange(from, to) | Select a range of rows |
clearSelection() | Clear all selected rows |
isRowSelected(index) | Check if a row is selected |
getSelectedRowsData() | Get the data objects for selected rows |
| Cell Selection | |
selectCellRange(range) | Select a cell range programmatically |
clearCellSelection() | Clear cell range selection |
getSelectedCells() | Get array of selected cell info objects |
| Copy | |
copyCellSelectionToClipboard() | Copy cell range as TSV. Returns Promise<boolean> |
copySelectedRowsToClipboard() | Copy selected rows as TSV. Returns Promise<boolean> |
TypeScript Types
CSS Variables
| Variable | Default | Description |
|---|---|---|
| Row Selection | ||
--wg-selection-bg | color-mix(in srgb, var(--wg-accent-color) 15%, transparent) | Background color of selected rows |
--wg-selection-row-number-bg | var(--wg-accent-color) | Background of selected row number cell |
--wg-selection-row-number-color | white | Text color of selected row number |
--wg-selection-border-width | 2px | Border width around selected row block |
--wg-selection-border-color | var(--wg-accent-color) | Border color around selected row block |
| Cell Selection | ||
--wg-cell-selection-bg | color-mix(in srgb, var(--wg-accent-color) 10%, transparent) | Background of selected cells |
--wg-cell-selection-border | var(--wg-accent-color) | Border color of selection range |
--wg-cell-selection-border-width | 2px | Border width of selection range |
Column Selection
Click column headers to select entire columns. Use Ctrl+Click for multi-column and Shift+Click for range selection.
Select All
Click the row number header (#) or use Ctrl+A to select all cells.
Paste from Clipboard
Paste TSV data from clipboard (e.g., copied from Excel) with Ctrl+V. The grid parses tab-separated values and applies them to the selected cell range.
Paste Configuration Properties
| Property | Type | Default | Description |
|---|---|---|---|
pasteMode | 'skip-non-editable' | 'all-columns' | 'editable-only' | 'skip-non-editable' | How to handle non-editable cells during paste |
shouldValidateOnPaste | boolean | true | Run column validation on pasted values |
createRowCallback | (pastedData, rowIndex) => T | - | Callback to create new rows when pasting beyond existing data |
Row Focus / Master-Detail
Track which row is focused for master/detail patterns: