Skip to content
ZenGrid

Cell Selection

Community

Introduction

Section titled “Introduction”

Cell selection points at individual cells rather than whole rows — the model a spreadsheet uses. ZenGrid offers two flavours through selectionType:

  • 'cell' — select one cell at a time; shift-click extends to a rectangle.
  • 'range' — every interaction works on rectangles; the anchor plus a shift-click defines a block.
const grid = new Zengrid(mount, {
  columns,
  selectionType: 'range',        // or 'cell'
  enableMultiSelection: true,    // allow several rectangles
});

With enableMultiSelection: true, ctrl/⌘-click starts an additional rectangle, so grid.selection.getRanges() can hold several disjoint blocks — exactly what you want before a multi-range copy.

Cells, ranges, and the active cell

Section titled “Cells, ranges, and the active cell”

A range is a rectangle: { startRow, startCol, endRow, endCol } in source coordinates. The active cell is the single last-focused cell (the anchor of the next shift-extend) — read it with grid.selection.getActive(). A one-cell selection is just a range where start equals end.

grid.selection.selectCell(2, 3);              // one cell
grid.selection.selectRange(0, 0, 4, 2);       // a 5×3 rectangle
grid.selection.selectRange(6, 3, 8, 5, true); // + another rectangle (additive)
grid.selection.isSelected(2, 3);              // true / false

Try it live

Section titled “Try it live”

selectionType "cell" highlights one cell. Click to select, click again to clear, shift-click to extend to a rectangle. getActive() reports the anchor.

Where to go next

Section titled “Where to go next”