Range Selection

Enterprise

Introduction

Shift-click extends a range, but a spreadsheet also gives you a handle — the little square at the range’s bottom-right corner you grab and drag to resize the selection. rangeHandle() adds exactly that on top of ZenGrid’s built-in cell ranges: attach it to a selectionType: 'range' grid and a handle appears at the corner of the current selection; drag it to grow or shrink the range.

import { rangeHandle } from '@zengrid/enterprise/grid';

const handle = rangeHandle();
const grid = new Zengrid(mount, { selectionType: 'range', columns });
grid.setData(rows);
handle.attach(grid);

The manager owns the handle element and repositions it whenever the selection or the scroll position moves — you never place it yourself. Dragging keeps the range’s top-left corner anchored and moves the opposite corner to the cell under the pointer, so the selection resizes exactly like a spreadsheet’s.

Enterprise

rangeHandle() is license-gated (range-selection) and lives in @zengrid/enterprise/grid. The handle’s CSS ships in @zengrid/enterprise/styles.css — import it once. The underlying cell-range selection is community; the drag handle is the enterprise addition.

Customizing

Option	Effect
handleClass	Extra CSS class on the handle element (on top of zg-selection-handle), to restyle its size, colour, or shape.

Try it live

Each demo seeds a range, then attaches the handle. Grab the square at the selection’s bottom-right corner and drag — the range resizes and the controls read it back.

Resize a rangeGrow from a cellStyled handle

CodeDemoSplit

ResetRun ⌘⏎

Drag the square at the bottom-right of the selection to grow or shrink the range. The top-left corner stays anchored.

Where to go next

• Cell Selection — the community cell-range selection the handle builds on.
• Fill Handle — the same corner handle, but it copies values across the cells you sweep.
• Selection API — read and drive ranges from code.