Range / Row / Column Move
Drag the selection border to relocate a cell block, or drag a selected row/column header to reorder whole lines — with a cancellable onBeforeRangeMove event (the header row is pinned here) and one-step undo.
How it works
This demo renders a sprint task board where the tasks can be rearranged by dragging — a v1.5.0 feature available in both editions. Two distinct operations share the gesture: dragging the selection border moves a cell block (overwriting the destination, as in Excel), while dragging an already-selected row/column header reorders whole lines as a cut-and-insert.
- Select a few cells, then grab the selection border (the cursor changes) and drag — value, formula, style, number format, borders and comments all travel together
- Click a row header to select the row, then drag it up or down to reorder — nothing is overwritten
- The header row is pinned:
onBeforeRangeMovereceives a mutable event and settingevent.cancel = truesuppresses the move onAfterRangeMovereports every completed move in the status bar; undo restores it in one step- The “moveRange” button relocates a block programmatically after checking
canMoveRange; the checkbox turns the drag interaction off viasetRangeMoveEnabled(false)without touching the API
Key APIs used
ws.range('A2:F3').moveTo(row, column) Relocate a cell block so its top-left lands on (row, column) — overwrites the destination
ws.moveRows(start, count, before) Reorder whole rows as a cut-and-insert; moveColumns is the column equivalent
ws.canMoveRange(range, row, column) Ask first: returns { ok } or { ok: false, reason } (merge tear, out of bounds, protected, …)
grid.onBeforeRangeMove(listener) Cancellable event — set event.cancel = true to suppress the default move
grid.onAfterRangeMove(listener) Fires only on a completed move, with kind ('range' | 'rows' | 'columns'), from and to
ws.setRangeMoveEnabled(false) Turn the drag interaction off without touching the programmatic API
Source Code
Related Documentation
Related Demos
Cell Types Dashboard
Progress bars, star ratings, sparkline charts, checkboxes, and hyperlinks — all rendered inside spreadsheet cells.
Data Filter & Sort
Click column header dropdowns to filter and sort rows. Switch between 300, 1K, and 10K rows to test performance.
Cell Styles
Font styles, colors, backgrounds, text alignment, and border options — a showcase of the Cell Style API.