Selection Overview

Community

Introduction

Selection is how a user (or your code) points at the data they want to act on — to copy it, delete it, edit it, or drive a side panel. ZenGrid ships selection in core: enable it with one option, and the grid wires up click, shift-click (to extend), and ctrl/⌘-click (to add), highlights the selected cells, and keeps a live model you can read back at any time.

There are two dials that shape every selection:

• What is selected — the selectionType: 'cell', 'row', 'column', or 'range' (a rectangle of cells).
• How many things at once — the mode. By default only one item is selected at a time; set enableMultiSelection: true to allow several via ctrl/⌘-click and shift-click.

const grid = new Zengrid(mount, {
  columns,
  selectionType: 'row',          // 'cell' | 'row' | 'column' | 'range'
  enableMultiSelection: true,    // allow more than one at a time
  onSelectionChange: (ranges) => console.log(ranges),
});

Selection uses source coordinates

A selection is stored in source (data) indices — a row’s original position in the array you passed to setData, not its on-screen position. That means a stored selection survives a sort or filter. Use grid.rows.toSourceIndex / toDisplayedIndex to convert if you are working from screen positions. (This differs from grid.editing, which uses view coordinates.)

Interactions you get for free

Gesture	Result
Click	Select the cell/row/column under the pointer (replaces the current selection).
Click again	Clicking an already-selected cell/row clears it.
Shift-click	Extend from the anchor to here (a range of cells, rows, or columns).
Ctrl/⌘-click	Add this item to the selection (multi-selection only).
Triple-click column 0	Select the whole row.
Header checkbox	Select-all / clear-all (add a type: 'checkbox' header).

Try it live

Each tab flips selectionType / enableMultiSelection. Click, shift-click, and ctrl/⌘-click in the grid — the highlight follows, and the controls read the live grid.selection model back.

Cell selectionRow selectionMultiple ranges

CodeDemoSplit

ResetRun ⌘⏎

The default. Click a cell to select it; shift-click another to sweep a rectangle; click a selected cell again to clear. Try changing selectionType to "range".

Where to go next

• Row Selection — select whole rows, with a select-all header checkbox.
• Cell Selection — cells and rectangular ranges.
• Selection API — the full grid.selection surface for reading and driving selection from code.