Skip to content
ZenGrid

Multi-Row Selection

Community

Introduction

Section titled “Introduction”

Multi-row selection lets a user gather several rows before acting on them — bulk-approve, export, delete. Enable it by adding enableMultiSelection: true to a row-selection grid:

const grid = new Zengrid(mount, {
  columns,
  selectionType: 'row',
  enableMultiSelection: true,
});

The interactive rules match every desktop list:

Gesture Result
Click Select just this row (replaces the set).
Ctrl/⌘-click Toggle this row in/out of the set.
Shift-click Select the contiguous run from the anchor row to here.
Header checkbox Select-all / clear-all.

From code, the third argument of selectRows(start, end, additive) mirrors the ctrl-key: pass true to add the span to the current set instead of replacing it.

Try it live

Section titled “Try it live”

Ctrl/⌘-click toggles individual rows; shift-click sweeps a run from the anchor. Mix them to build any set. The count control sums across every span.

Where to go next

Section titled “Where to go next”