Events

Current GridEvents reference for cell, selection, editing, scroll, sort, filter, lifecycle, and column events.

ZenGrid exposes typed events through grid.on() and grid.off(). Event names and payloads come from the exported GridEvents interface.

Register Events

events.ts
const onCellClick = (event) => {
  console.log(event.cell, event.value);
};


grid.on('cell:click', onCellClick);
grid.off('cell:click', onCellClick);
💡 Tip

Keep a reference to a handler when you need to remove it later with off().

Cell Events

cell-events.ts
grid.on('cell:click', ({ cell, value, nativeEvent }) => {});
grid.on('cell:doubleClick', ({ cell, value, nativeEvent }) => {});
grid.on('cell:contextMenu', ({ cell, value, nativeEvent }) => {});


grid.on('cell:beforeChange', ({ cell, oldValue, newValue, cancel }) => {
  if (!isValidValue(newValue)) cancel();
});


grid.on('cell:change', ({ cell, oldValue, newValue }) => {});
grid.on('cell:afterChange', ({ cell, oldValue, newValue }) => {});

Selection Events

selection-events.ts
grid.on('selection:change', ({ ranges, previousRanges, isSelected }) => {
  const active = isSelected?.(0, 0) ?? false;
  updateSelectionToolbar(ranges, previousRanges, active);
});


grid.on('selection:start', ({ startCell }) => {});
grid.on('selection:end', ({ ranges }) => {});

Editing Events

editing-events.ts
grid.on('edit:start', ({ cell, value }) => {});
grid.on('edit:commit', ({ cell, oldValue, newValue }) => {});
grid.on('edit:cancel', ({ cell, value }) => {});
grid.on('edit:end', ({ cell, value, cancelled }) => {});

Scroll Events

scroll-events.ts
grid.on('scroll', ({ scrollTop, scrollLeft, visibleRange }) => {
  console.log(scrollTop, scrollLeft, visibleRange);
});


grid.on('scroll:start', ({ scrollTop, scrollLeft }) => {});
grid.on('scroll:end', ({ scrollTop, scrollLeft }) => {});

Sort Events

sort-events.ts
grid.on('sort:beforeSort', ({ sortState, cancel }) => {
  if (sortState.length > 3) cancel();
});


grid.on('sort:change', ({ sortState, previousSortState }) => {});
grid.on('sort:afterSort', ({ sortState, rowsAffected }) => {});

Filter Events

filter-events.ts
grid.on('filter:beforeFilter', ({ filterState, cancel }) => {
  if (!isFilterAllowed(filterState)) cancel();
});


grid.on('filter:change', ({ filterState, previousFilterState }) => {});
grid.on('filter:afterFilter', ({ filterState, rowsVisible, rowsHidden }) => {});


grid.on('filter:export', ({ state, rest, graphql, sql, previousState }) => {
  console.log(rest.queryString, graphql.where, sql.whereClause);
});


grid.on('filter:start', ({ timestamp, filter }) => {});
grid.on('filter:end', ({ timestamp, resultCount }) => {});
grid.on('filter:error', ({ timestamp, error }) => {});
grid.on('filter:clear', ({ timestamp }) => {});

Focus And Keyboard Events

focus-keyboard-events.ts
grid.on('focus:change', ({ cell, previousCell }) => {});
grid.on('focus:in', ({ cell }) => {});
grid.on('focus:out', ({ cell }) => {});


grid.on('key:down', ({ cell, key, nativeEvent, preventDefault }) => {
  if (key === 'Enter') preventDefault();
});


grid.on('key:up', ({ cell, key, nativeEvent }) => {});
grid.on('key:press', ({ cell, key, nativeEvent }) => {});

Clipboard Events

clipboard-events.ts
grid.on('copy', ({ ranges, data }) => {});
grid.on('cut', ({ ranges, data }) => {});
grid.on('paste', ({ cell, data }) => {});

Lifecycle And Data Events

lifecycle-events.ts
grid.on('render:start', ({ timestamp }) => {});
grid.on('render:end', ({ timestamp, duration }) => {});


grid.on('data:load', ({ rowCount, colCount }) => {});
grid.on('data:change', ({ changes }) => {});


grid.on('loading:start', ({ timestamp, message }) => {});
grid.on('loading:progress', ({ progress, message }) => {});
grid.on('loading:end', ({ timestamp, duration }) => {});


grid.on('destroy', ({ timestamp }) => {});

Column Events

column-events.ts
grid.on('column:resize', ({ column, oldWidth, newWidth }) => {});
grid.on('column:move', ({ column, oldIndex, newIndex }) => {});

Undo, Warnings, And Errors

system-events.ts
grid.on('undo-redo:change', ({ canUndo, canRedo, undoCount, redoCount }) => {});


grid.on('warning', ({ message, context }) => {});
grid.on('error', ({ message, error, context }) => {});

Type Imports

typed-events.ts
import type { GridEvents } from '@zengrid/core';


const onSortChange = (event: GridEvents['sort:change']) => {
  console.log(event.sortState);
};


grid.on('sort:change', onSortChange);