bc-grid
GitHub

Edit grid

View source

Click any editable cell, type, press Enter or Tab to commit. Each commit event is intercepted by onCellEditCommit; the panel below the grid shows the most recent commits.

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

Try this

The Order # column is read-only; everything else is editable. Each commit shows up in the Recent commits panel.

  • Double-click or press Enter on a cell to start editing.
  • Press Tab to commit + advance, Esc to abandon.
  • Status uses a select editor; Amount uses a number editor; Opened uses a date editor.
  • Type a non-numeric value into Amount and press Tab — the editor rejects it and the cell stays open.

The commit lifecycle

  • prepare. Editor mounts with initialValue (the current cell value) and a hidden cell rect for portal positioning.
  • validate. Editor-side validation runs first; bad input keeps the editor open. Per-column validate runs second and can be sync or async (with AbortSignal).
  • commit. The grid fires onCellEditCommit with { rowId, column, previousValue, nextValue, … }. You write the change to your data source.
  • optimistic + rollback. For server flows, return Promise<{ status: "rejected", reason }> to roll the cell back and surface reason as the cell-level error.

Key bindings

  • Enter / F2 — start editing
  • Tab / Enter — commit + advance
  • Esc — abandon and close
  • Backspace / Delete — clear and edit