# 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 ```tsx onCellClick={(detail) => console.log('Clicked:', detail.field, detail.value)} ``` --- #### onRowClick ```tsx onRowClick={(detail) => navigateTo(`/employees/${detail.row.id}`)} ``` --- #### onCellActivate ```tsx onCellActivate={(detail) => openEditor(detail.field, detail.row)} ``` --- #### onCellChange ```tsx onCellChange={(detail) => validateChange(detail)} ``` --- #### onCellCommit ```tsx onCellCommit={(detail, event) => { if (!isValid(detail.value)) { event?.preventDefault(); showError('Invalid value'); } }} ``` --- #### onRowCommit ```tsx onRowCommit={(detail) => saveToServer(detail.row)} ``` --- #### onChangedRowsReset ```tsx onChangedRowsReset={(detail) => console.log('Reset:', detail.rows.length, 'rows cleared')} ``` --- #### onSortChange ```tsx onSortChange={(detail) => console.log('Sort:', detail.field, detail.direction)} ``` --- #### onFilterChange ```tsx onFilterChange={(detail) => console.log('Filters:', detail.activeFilters)} ``` --- #### onColumnResize ```tsx onColumnResize={(detail) => console.log('Resized:', detail.field, detail.width)} ``` --- #### onColumnMove ```tsx onColumnMove={(detail, event) => { if (detail.column.field === 'id') { event?.preventDefault(); // Don't allow moving ID column } }} ``` --- #### onColumnResizeReset ```tsx 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. ```tsx onColumnVisibility={(detail) => { console.log(detail.hidden ? 'Hidden:' : 'Shown:', detail.field); localStorage.setItem('visibleColumns', JSON.stringify(detail.visibleColumns)); }} ``` --- #### onColumnStateChange ```tsx onColumnStateChange={(state) => saveToLocalStorage('gridState', state)} ``` --- #### onSelectionChange ```tsx onSelectionChange={(detail) => { console.log('Selected ranges:', detail.ranges); console.log('Mode:', detail.mode); }} ``` --- #### onRowMove ```tsx onRowMove={(detail, event) => { if (!canMove(detail.row)) { event?.preventDefault(); } }} ``` --- #### onGroupToggle ```tsx onGroupToggle={(detail) => { console.log(detail.expanded ? 'Expanded' : 'Collapsed', detail.key); }} ``` --- #### onTreeExpand ```tsx onTreeExpand={(detail) => console.log('Expanded:', detail.row)} ``` --- #### onDetailExpand ```tsx onDetailExpand={(detail) => { if (detail.expanded) loadDetailData(detail.rowId); }} ``` --- #### onResponsiveChange ```tsx onResponsiveChange={(detail) => { console.log('Mode:', detail.mode); // 'table' | 'card' }} ``` --- #### onCopy ```tsx onCopy={(detail) => console.log('Copied:', detail.text)} ``` --- #### onPaste ```tsx onPaste={(detail) => console.log('Pasted:', detail.affectedCells.length, 'cells')} ``` --- #### onUndo ```tsx onUndo={(detail) => console.log('Undid:', detail.action.type, '- Can undo:', detail.canUndo)} ``` --- #### onRedo ```tsx onRedo={(detail) => console.log('Redid:', detail.action.type, '- Can redo:', detail.canRedo)} ``` --- #### onExportComplete ```tsx onExportComplete={(detail) => console.log('Exported:', detail.filename)} ``` --- #### onPrintStart ```tsx onPrintStart={(detail) => console.log('Printing:', detail.rowCount, 'rows')} ``` --- #### onPrintComplete ```tsx 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. ```tsx 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. ```tsx onRender={(detail) => { if (detail.initial) console.log('first render complete'); }} ``` ---