Events

The callbacks DataGridComponent fires as a user resizes, reorders, and selects.

Last updated August 9, 2026

Every interaction reports through a callback prop rather than a ref or an event you have to subscribe to. Resizing, reordering, and sorting fire one each; selection fires thirteen, one per row, column, and cell transition plus a whole-selection change to persist from.

Every callback, firing live#

Every DataGridComponent callback

Live example

Id	Service	Environment Name	Environment Region	Status	Cost

1	checkout-api	production	us-east-1	healthy	1240.5
2	billing-worker	production	eu-west-1	degraded	860.2
3	search-index	staging	us-east-1	healthy	92.75
4	notifications	production	us-west-2	down	305.4
5	analytics-pipeline	staging	eu-west-1	healthy	145

Interact with the grid above to see its callbacks fire.

Resizing, reordering & sorting#

Prop	Type	Description
`onColumnResize`	`(event: ColumnResizeEvent) => void`	Fires continuously with phase "move" while dragging, once with "end" on release — the one to persist. Auto-fit does not call it.
`onColumnOrderChange`	`(event: ColumnOrderEvent) => void`	Fires once when the user drops a column somewhere new. A drop that leaves the order unchanged does not call it.
`onColumnSortChange`	`(event: ColumnSortEvent) => void`	Fires once when the user changes the sort — a toggle, a stack, or a clear back to "none".
`onGroupByChange`	`(event: GroupByEvent) => void`	Fires once when the user adds, removes, or reorders a group-by level.
`onGroupExpansionChange`	`(event: GroupExpansionEvent) => void`	Fires once when the user expands or collapses a group, or every group at once.

Selection#

Prop	Type	Description
`onRowSelect / onRowsSelect`	`(event) => void`	Once per row newly selected, and once per interaction with every row it selected — a range selects many rows but fires onRowsSelect once.
`onRowDeselect / onRowsDeselect`	`(event) => void`	The deselecting counterpart of each, above.
`onRowSelectionChange`	`(event: RowSelectionChangeEvent) => void`	Once per change with what it added, removed, and everything selected after.
`onColumnSelect / onColumnsSelect / onColumnDeselect / onColumnsDeselect / onColumnSelectionChange`	`(event) => void`	The same five events, for column selection.
`onCellSelect / onCellDeselect`	`(event: CellSelectEvent) => void`	Once for the cell selected, once for the cell deselected.
`onCellSelectionChange`	`(event: CellSelectionChangeEvent) => void`	Once per change with what was selected and deselected — one interaction can fill both, since moving between cells does so at once.

Every payload's fields are broken down where its feature lives, rather than repeated here: row selection for RowSelectionChangeEvent, column selection for ColumnSelectEvent/ColumnsSelectEvent/ColumnSelectionChangeEvent, cell selection for CellSelectEvent/CellSelectionChangeEvent, and row grouping for GroupByEvent/GroupExpansionEvent.

Edit this page on GitHub