Selection Plugin

Configure selection and observe selection changes.

The selection plugin is installed automatically unless enableSelection: false is set.

Configure Selection

selection-options.ts
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',
});

selectionType can be cell, row, column, or range.

Selection Events

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


grid.on('selection:start', ({ startCell }) => {
  console.log('started at', startCell);
});


grid.on('selection:end', ({ ranges }) => {
  console.log('ended with', ranges);
});

App State

Use events to mirror selection into your own UI.

selection-state.ts
let selectedRanges = [];


grid.on('selection:change', ({ ranges }) => {
  selectedRanges = ranges;
  renderToolbar(selectedRanges);
});
ℹ Info

There is no first-class grid.selection namespace yet. For production app code, prefer event-driven selection state over calling internal plugin methods.