Skip to content
ZenGrid

Fill Handle

Enterprise

Introduction

Section titled “Introduction”

The fill handle is the spreadsheet gesture everyone knows: select a cell or range, grab the little square at its corner, drag across neighbouring cells, and the selection’s values copy into them. fillHandle() brings it to ZenGrid — attach it to a selectionType: 'range' grid and dragging the corner handle fills the swept cells from the source range.

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


const handle = fillHandle({ onFill: (range) => console.log('filled', range) });
const grid = new Zengrid(mount, { selectionType: 'range', columns });
grid.setData(rows);
handle.attach(grid);

Like a spreadsheet, the fill is constrained to one axis — whichever direction you drag further — so you fill straight down a column or across a row without smearing diagonally. The source pattern tiles: drag a two-row block down and it repeats every two rows.

How the fill is computed

Section titled “How the fill is computed”

The source range’s values repeat across the target, wrapping in both directions:

  • Drag one cell down five rows → that value is copied into all five.
  • Drag a Trial / Active two-cell block down → the target alternates Trial, Active, Trial, Active, ….
  • Drag left or up past the source → the pattern tiles backwards too.

Customizing

Section titled “Customizing”
Option Effect
onFill(range) Called after a fill commits, with the filled rectangle (source coordinates).
handleClass Extra CSS class on the handle element, to restyle the grip.

Try it live

Section titled “Try it live”

Each demo seeds a source selection, then attaches the fill handle. Grab the corner square and drag down (or across) — the swept cells take the source values.

The Role cell of row 0 is seeded. Drag the corner square straight down — the role copies into every swept cell.

Where to go next

Section titled “Where to go next”