Skip to content
ZenGrid

Single Row Selection

Community

Introduction

Section titled “Introduction”

Single-row selection is the simplest, most common model: one highlighted row at a time, like picking a record from a master list to open in a detail pane. It is the default — selectionType: 'row' with enableMultiSelection left off (or false):

const grid = new Zengrid(mount, {
  columns,
  selectionType: 'row',
  // enableMultiSelection: false — the default
  onSelectionChange: (ranges) => {
    const row = ranges[0]?.startRow ?? null;   // the one selected source row
  },
});

Selecting a new row replaces the previous one — you never accumulate a set. Ctrl/⌘-click and shift-click do nothing extra in single mode. Clicking the already-selected row clears it.

Try it live

Section titled “Try it live”

One row at a time. Selecting a new row replaces the old one; clicking the selected row clears it. Ctrl/⌘-click does nothing extra in single mode.

Where to go next

Section titled “Where to go next”