EventProps

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.
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.
onColumnVisibility?	EventHandler<ColumnVisibilityDetail>	Fired when column visibility changes.
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.
onGroupToggle?	EventHandler<GroupToggleDetail>	Fired when a group is expanded or collapsed.
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.
onUndoRedo?	EventHandler<UndoRedoDetail>	Fired when undo/redo is performed.
onExportComplete?	EventHandler<ExportCompleteDetail>	Fired when export completes.
onPrintStart?	EventHandler<PrintStartDetail>	Fired when print starts.
onPrintComplete?	EventHandler<PrintCompleteDetail>	Fired when print completes.

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)}

---

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
  }
}}

---

onColumnVisibility

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

---

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')}

---

onUndoRedo

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

---

onExportComplete

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

---

onPrintStart

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

---

onPrintComplete

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

---