Range selection
View sourceDrag across cells to make a rectangular range, extend with Shift+arrow, select-all with Cmd+A. BusinessCraft app grids gate this spreadsheet-style flow behind the global interaction mode; this BC Grid demo opts into the range affordances directly.
Try this
This demo enables spreadsheet range tools explicitly. In the BusinessCraft app wrapper, users switch from Data grid to Spreadsheet mode before these pointer range tools appear.
- Click a cell, then drag to another cell — rectangle highlights every cell in between.
- Click a cell, then Shift+Arrow to grow the range one cell at a time.
- Shift+Click on a far cell to extend the range to that point.
- Cmd+A (or Ctrl+A) to select every cell.
- Drag from a pinned-left column into the unpinned middle and back into pinned-right — the range is contiguous across all three lanes.
- Press Escape (or click outside the range) to clear it.
What range gets you
- Clipboard. Cmd+C copies the rectangle as TSV (tab-separated, paste-ready into Excel / Sheets / VSCode).
- Paste. Paste TSV from anywhere; BC Grid parses + validates + applies as a bulk row patch. See the Copy / paste page.
- Fill handle. The small square at the bottom-right of the active range — drag it to fill values across rows or columns. See the Fill handle page.
- Status-bar aggregation. Sum / count / avg of the selected numeric cells render in the status bar segment.
- Range delete. Opt in via
rangeDeleteEnabled— Delete or Backspace clears every cell in the range with a single confirmation.
API
Raw BC Grid enables keyboard range selection by default. BusinessCraft app grids pass rangeSelectionOptions={false} while the global interaction mode is Data grid, and opt back into fill-handle range tools in Spreadsheet mode. Pass rangeSelectionOptions={ fillHandle: false } to hide the fill handle, or rangeSelectionOptions={ multiRange: true } to enable disjoint ranges (reserved for the multi-range path). Controlled-state pair: rangeSelection / defaultRangeSelection / onRangeSelectionChange.