Selection

Configure cell, row, column, and range selection with current ZenGrid APIs.

ZenGrid selection is configured on GridOptions and reported through selection:change. Use it when users need spreadsheet-style range selection, row picking, or column picking.

Configuration

selection-grid.ts
import { Grid, type ColumnDef } from '@zengrid/core';
import '@zengrid/core/dist/styles.css';


const rows = [
  [1, 'Ada Lovelace', 'Engineering'],
  [2, 'Grace Hopper', 'Platform'],
  [3, 'Katherine Johnson', 'Research'],
];


const columns: ColumnDef[] = [
  { field: 'id', header: 'ID', width: 80 },
  { field: 'name', header: 'Name', width: 180 },
  { field: 'team', header: 'Team', width: 160 },
];


const grid = new Grid(container, {
  rowCount: rows.length,
  colCount: columns.length,
  rowHeight: 36,
  colWidth: columns.map((column) => column.width ?? 140),
  columns,
  enableSelection: true,
  enableMultiSelection: true,
  selectionType: 'range',
});


grid.setData(rows);
grid.render();

Selection Types

  • cell: individual cells
  • row: complete rows
  • column: complete columns
  • range: rectangular cell ranges
💡 Tip

Use range for spreadsheet-style workflows and row for record-picking workflows.

Reading Selection State

selection-events.ts
grid.on('selection:change', ({ ranges, previousRanges, isSelected }) => {
  console.log('Current ranges:', ranges);
  console.log('Previous ranges:', previousRanges);


  const selected = isSelected?.(0, 0) ?? false;
  updateToolbar({ selected });
});

ranges uses data row indexes. That keeps selection stable when frontend sorting or filtering changes the visible row order.

Programmatic Selection

There is not yet a first-class grid.selection namespace. If you need programmatic selection, use the plugin API deliberately and keep that access isolated.

programmatic-selection.ts
const api = grid.getGridApi();


const selectCell = api.getMethod('selection', 'selectCell') as
  | ((row: number, col: number, additive?: boolean) => void)
  | undefined;


const selectRange = api.getMethod('selection', 'selectRange') as
  | ((startRow: number, startCol: number, endRow: number, endCol: number, additive?: boolean) => void)
  | undefined;


const selectRows = api.getMethod('selection', 'selectRows') as
  | ((startRow: number, endRow: number, additive?: boolean) => void)
  | undefined;


const clear = api.getMethod('selection', 'clear') as (() => void) | undefined;


selectCell?.(0, 0);
selectRange?.(2, 0, 5, 2, true);
selectRows?.(8, 10, true);
clear?.();

Production Notes

  • Store selected business IDs in your app state when selections must survive reloads.
  • Use selection:change as the source of truth for external toolbars and side panels.
  • Keep plugin API calls behind a tiny adapter so the rest of your app does not depend on internal method names.