bc-grid
GitHub

Fill handle

View source

Drag the fill handle (the small square at the bottom-right of the active range) to extend values across rows or columns. bc-grid detects arithmetic sequences, date series, weekday / month patterns, and otherwise repeats the source values.

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

Try this

The fill handle is the small square at the bottom-right corner of the active range.

  • Click an Amount cell with value 1000. Drag the fill handle down 5 rows — value repeats.
  • Click two Amount cells with values 1000 and 1100, drag the fill handle down — bc-grid detects the +100 step and continues 1200, 1300, 1400…
  • Click a date cell with 2026-04-01. Drag down 6 — bc-grid increments by one day.
  • Two cells with 2026-04-01 and 2026-05-01, drag — month-stride series.
  • For text columns, the fill handle simply repeats the source values.

Series detection

  • Numeric arithmetic. Two or more numbers with a constant delta — bc-grid extrapolates. Mixed signs / non-arithmetic falls back to literal repeat.
  • Date series. Day, weekday, week, month, quarter, year. Detection is greedy on the shortest matching stride.
  • Literal repeat. When no series is detected (single source cell, mixed types, validation rejection), the fill handle repeats the source rectangle as-is. Excel-compatible.
  • Through the column pipeline. Filled cells go through column.validate — a fill that would produce an invalid value rolls that cell back and surfaces the error.
  • Source = "fill". onCellEditCommit fires for each filled cell with source: "fill".

API

The fill handle ships on by default whenever the active range is editable. Hide it with rangeSelectionOptions={ fillHandle: false }. The detection layer is @bc-grid/core/range — extensible per the range RFC, but most consumers never need to touch it.