EventProps

Since v0.7.0

Event handler props for grid events. All handlers receive the unwrapped detail as first argument, with optional access to the full CustomEvent for preventDefault().

Properties

Property	Type	Description
onCellClick?	EventHandler<CellClickDetail<TRow>>	Fired when a cell is clicked.
onRowClick?	EventHandler<RowClickDetail<TRow>>	Fired when a row is clicked.
onCellActivate?	EventHandler<CellActivateDetail<TRow>>	Fired when a cell is activated (Enter key or double-click).
onCellChange?	EventHandler<CellChangeDetail<TRow>>	Fired when a cell value changes (before commit).
onCellCommit?	EventHandler<CellCommitDetail<TRow>>	Fired when a cell edit is committed. Cancelable - call event.preventDefault() to reject the edit.
onRowCommit?	EventHandler<RowCommitDetail<TRow>>	Fired when all pending row edits are committed.
onChangedRowsReset?	EventHandler<ChangedRowsResetDetail<TRow>>	Fired when changed rows cache is reset via resetChangedRows().
onEditOpen?	EventHandler<EditOpenDetail<TRow>>	Fired when an editor opens for a cell.
onBeforeEditClose?	EventHandler<BeforeEditCloseDetail<TRow>>	Fired before an editor closes (commit or cancel). Cancelable.
onEditClose?	EventHandler<EditCloseDetail<TRow>>	Fired after an editor closes (commit or cancel).
onCellCancel?	EventHandler<CellCancelDetail>	Fired when a cell edit is canceled (e.g. Escape key).
onDirtyChange?	EventHandler<DirtyChangeDetail<TRow>>	Fired when the dirty/changed-rows state transitions.
onDataChange?	EventHandler<DataChangeDetail>	Fired when the row data is replaced (e.g. via the data property setter).
onSortChange?	EventHandler<SortChangeDetail>	Fired when sort state changes.
onFilterChange?	EventHandler<FilterChangeDetail>	Fired when filter values change.
onColumnResize?	EventHandler<ColumnResizeDetail>	Fired when a column is resized.
onColumnMove?	EventHandler<ColumnMoveDetail>	Fired when a column is moved via drag-and-drop. Cancelable - call event.preventDefault() to cancel the move.
onColumnResizeReset?	EventHandler<ColumnResizeResetDetail>	Fired when a column resize is reset (e.g. via double-click on the resize handle).
onColumnVisibility?	EventHandler<ColumnVisibilityDetail>	Fired when a column is shown or hidden — either via the visibility sidebar, grid.toggleColumnVisibility(field), grid.setColumnVisible(field, visible), or grid.showAllColumns().
onColumnStateChange?	EventHandler<GridColumnState>	Fired when column state changes (resize, reorder, visibility). Useful for persisting column state.
onSelectionChange?	EventHandler<SelectionChangeDetail>	Fired when selection changes.
onRowMove?	EventHandler<RowMoveDetail<TRow>>	Fired when a row is moved via drag-and-drop. Cancelable - call event.preventDefault() to cancel the move.
onRowDragStart?	EventHandler<RowDragStartDetail<TRow>>	Fired when a row drag starts. Cancelable.
onRowDragEnd?	EventHandler<RowDragEndDetail<TRow>>	Fired when a row drag ends (after drop or cancel).
onRowDrop?	EventHandler<RowDropDetail<TRow>>	Fired on the target grid when rows are dropped from another grid. Cancelable.
onRowTransfer?	EventHandler<RowTransferDetail<TRow>>	Fired on BOTH source and target grids after a successful cross-grid row transfer.
onGroupToggle?	EventHandler<GroupToggleDetail>	Fired when a group is expanded or collapsed.
onGroupExpand?	EventHandler<GroupExpandDetail>	Fired when a group is expanded.
onGroupCollapse?	EventHandler<GroupCollapseDetail>	Fired when a group is collapsed.
onContextMenuOpen?	EventHandler<ContextMenuOpenDetail>	Fired when the context menu opens.
onTreeExpand?	EventHandler<TreeExpandDetail<TRow>>	Fired when a tree node is expanded.
onDetailExpand?	EventHandler<DetailExpandDetail>	Fired when a detail panel is expanded or collapsed.
onResponsiveChange?	EventHandler<ResponsiveChangeDetail>	Fired when responsive mode changes (table ↔ card).
onCopy?	EventHandler<CopyDetail>	Fired when cells are copied to clipboard.
onPaste?	EventHandler<PasteDetail>	Fired when cells are pasted from clipboard.
onUndo?	EventHandler<UndoRedoDetail>	Fired when an undo action is performed.
onRedo?	EventHandler<UndoRedoDetail>	Fired when a redo action is performed.
onExportComplete?	EventHandler<ExportCompleteDetail>	Fired when export completes.
onPrintStart?	EventHandler<PrintStartDetail>	Fired when print starts.
onPrintComplete?	EventHandler<PrintCompleteDetail>	Fired when print completes.
onTbwScroll?	EventHandler<TbwScrollDetail>	Fired (rAF-batched) when the grid’s viewport scrolls vertically.
onRender?	EventHandler<RenderDetail>	Fired once at the end of every render-scheduler flush, after all plugin afterRender hooks have run and ready() has resolved.

Property Details

onCellClick

onCellClick={(detail) => console.log('Clicked:', detail.field, detail.value)}

---

onRowClick

onRowClick={(detail) => navigateTo(`/employees/${detail.row.id}`)}

---

onCellActivate

onCellActivate={(detail) => openEditor(detail.field, detail.row)}

---

onCellChange

onCellChange={(detail) => validateChange(detail)}

---

onCellCommit

onCellCommit={(detail, event) => {
  if (!isValid(detail.value)) {
    event?.preventDefault();
    showError('Invalid value');
  }
}}

---

onRowCommit

onRowCommit={(detail) => saveToServer(detail.row)}

---

onChangedRowsReset

onChangedRowsReset={(detail) => console.log('Reset:', detail.rows.length, 'rows cleared')}

---

onSortChange

onSortChange={(detail) => console.log('Sort:', detail.field, detail.direction)}

---

onFilterChange

onFilterChange={(detail) => console.log('Filters:', detail.activeFilters)}

---

onColumnResize

onColumnResize={(detail) => console.log('Resized:', detail.field, detail.width)}

---

onColumnMove

onColumnMove={(detail, event) => {
  if (detail.column.field === 'id') {
    event?.preventDefault(); // Don't allow moving ID column
  }
}}

---

onColumnResizeReset

onColumnResizeReset={(detail) => console.log('Reset width for:', detail.field)}

---

onColumnVisibility

Fired when a column is shown or hidden — either via the visibility sidebar, grid.toggleColumnVisibility(field), grid.setColumnVisible(field, visible), or grid.showAllColumns().

field and visible are present for single-column toggles and undefined for bulk operations (showAllColumns). visibleColumns always lists the current set.

onColumnVisibility={(detail) => {
  console.log(detail.hidden ? 'Hidden:' : 'Shown:', detail.field);
  localStorage.setItem('visibleColumns', JSON.stringify(detail.visibleColumns));
}}

---

onColumnStateChange

onColumnStateChange={(state) => saveToLocalStorage('gridState', state)}

---

onSelectionChange

onSelectionChange={(detail) => {
  console.log('Selected ranges:', detail.ranges);
  console.log('Mode:', detail.mode);
}}

---

onRowMove

onRowMove={(detail, event) => {
  if (!canMove(detail.row)) {
    event?.preventDefault();
  }
}}

---

onGroupToggle

onGroupToggle={(detail) => {
  console.log(detail.expanded ? 'Expanded' : 'Collapsed', detail.key);
}}

---

onTreeExpand

onTreeExpand={(detail) => console.log('Expanded:', detail.row)}

---

onDetailExpand

onDetailExpand={(detail) => {
  if (detail.expanded) loadDetailData(detail.rowId);
}}

---

onResponsiveChange

onResponsiveChange={(detail) => {
  console.log('Mode:', detail.mode); // 'table' | 'card'
}}

---

onCopy

onCopy={(detail) => console.log('Copied:', detail.text)}

---

onPaste

onPaste={(detail) => console.log('Pasted:', detail.affectedCells.length, 'cells')}

---

onUndo

onUndo={(detail) => console.log('Undid:', detail.action.type, '- Can undo:', detail.canUndo)}

---

onRedo

onRedo={(detail) => console.log('Redid:', detail.action.type, '- Can redo:', detail.canRedo)}

---

onExportComplete

onExportComplete={(detail) => console.log('Exported:', detail.filename)}

---

onPrintStart

onPrintStart={(detail) => console.log('Printing:', detail.rowCount, 'rows')}

---

onPrintComplete

onPrintComplete={() => console.log('Print complete')}

---

onTbwScroll

Fired (rAF-batched) when the grid’s viewport scrolls vertically.

For server-side pagination of large datasets prefer ServerSidePlugin — this event is the lower-level primitive for custom load-more triggers, deferring heavy cell content, dismissing overlays, etc.

onTbwScroll={(detail) => {
  if (detail.scrollTop + detail.clientHeight >= detail.scrollHeight - 200) {
    loadMore();
  }
}}

---

onRender

Fired once at the end of every render-scheduler flush, after all plugin afterRender hooks have run and ready() has resolved.

Use this to act on the rendered DOM after a programmatic mutation (e.g. focus the first input of a freshly added row in full-grid edit mode) without setTimeout or double-requestAnimationFrame hacks. Fires on every flush — including scroll-driven virtual-window updates — so prefer subscribing once and unsubscribing (or gating on detail.phase >= RenderPhase.ROWS) when you only care about a specific mutation.

onRender={(detail) => {
  if (detail.initial) console.log('first render complete');
}}

---