Hire Us Get CoreUI Data Grid →

React Data Grid Events

Events

Markdown ChatGPT Claude

React Data Grid callback props — onXxx handlers, each receiving structured state as plain arguments.

Every state change calls the matching onXxx prop with structured state as plain arguments:

<CDataGrid
  columns={columns}
  items={items}
  onSortingChange={(sorting) => console.log(sorting)}
/>

Prop	Payload
`onSortingChange`	`sorting: SortingState`
`onFilterChange`	`columnFilters: ColumnFiltersState, globalFilter: string`
`onSelectionChange`	`rowSelection: RowSelectionState, selectedItems: object[]`
`onPaginationChange`	`pagination: PaginationState`
`onEditStart`	`item: object, columnId: string`
`onEditCommit`	`{ item, columnId, value, previousValue }` — the grid never mutates `items`; apply the change yourself. Undo/redo re-calls it with the values swapped
`onEditCancel`	`item: object, columnId: string`
`onSizingChange`	`columnSizing: ColumnSizingState`
`onPinningChange`	`columnPinning: ColumnPinningState`
`onOrderChange`	`columnOrder: ColumnOrderState`
`onVisibilityChange`	`columnVisibility: VisibilityState`
`onDataLoad`	`{ items, totalRows }` (server-side mode)
`onDataError`	`error: unknown` (server-side mode)

The state types (SortingState, ColumnFiltersState, …) are exported from @coreui/react-data-grid. Callbacks fire for changes driven through the headless table too.