Row Selection

Community

Introduction

Row selection highlights whole rows rather than individual cells — the right model for a list you act on record-by-record (bulk delete, export the checked rows, open a detail panel). Turn it on with selectionType: 'row':

const grid = new Zengrid(mount, {
  columns,
  selectionType: 'row',
  enableMultiSelection: true,   // omit for single-row selection
  onSelectionChange: (ranges) => {
    // ranges are row spans in source coordinates
  },
});

Clicking a row selects it (and clicking it again clears it). With enableMultiSelection: true, ctrl/⌘-click adds a row and shift-click takes the contiguous run from the anchor. Every change fires onSelectionChange with the selected row spans.

The select-all header checkbox

Give a column a checkbox header and the grid renders a header checkbox that selects or clears every row — the same select-all the API’s selectAll() runs:

columns: [
  { field: 'name', header: { text: '', type: 'checkbox' }, width: 44 },
  // …
]

Row spans, not row lists

grid.selection.getRanges() returns ranges — each with a startRow/endRow. A shift-selected run of rows 3–7 is one range, not five. Expand them yourself, or use grid.selection.isRowSelected(row) to test a single row.

Try it live

Single rowMultiple rowsSelect-all checkbox

CodeDemoSplit

ResetRun ⌘⏎

No enableMultiSelection — exactly one row at a time. Click a row to select it, click it again to clear. onSelectionChange logs each change to the console.

Where to go next

• Single Row Selection — restrict to one row at a time.
• Multi-Row Selection — ctrl/shift patterns in depth.
• Selection API — read and drive selection from code.