bc-grid
GitHub

Range selection

View source

Drag across cells to make a rectangular range, extend with Shift+arrow, select-all with Cmd+A. The visual layer composes with the active cell, focus ring, and pinned-column boundaries.

Order #
Customer
Sales rep
Status
Region
Opened
Amount
R-000001
Customer 00001
Avery Chen
active
North
2024-01-01
$0.00
R-000002
Customer 00002
Ben Singh
pending
North
2024-08-14
$31.42
R-000003
Customer 00003
Cara Diaz
closed
North
2024-03-27
$62.83
R-000004
Customer 00004
Drew Lin
active
North
2024-10-13
$94.25
R-000005
Customer 00005
Elena Park
pending
South
2024-05-26
$125.66
R-000006
Customer 00006
Felix Roy
closed
South
2024-12-12
$157.08
R-000007
Customer 00007
Gita Bose
active
South
2024-07-25
$188.50
R-000008
Customer 00008
Henry Kao
pending
South
2024-02-11
$219.91
R-000009
Customer 00009
Avery Chen
closed
East
2024-09-24
$251.33
R-000010
Customer 00010
Ben Singh
active
East
2024-04-10
$282.74
R-000011
Customer 00011
Cara Diaz
pending
East
2024-11-23
$314.16
R-000012
Customer 00012
Drew Lin
closed
East
2024-06-09
$345.57
R-000013
Customer 00013
Elena Park
active
West
2024-01-22
$376.99
R-000014
Customer 00014
Felix Roy
pending
West
2024-08-08
$408.41
R-000015
Customer 00015
Gita Bose
closed
West
2024-03-21
$439.82

Try this

Range selection is on by default — no opt-in flag.

  • 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

Range selection is on by default. 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.