Data Grid - Events

The data grid emits events that can be subscribed to attach custom behavior.

Subscribing to events

You can subscribe to one of the events emitted by calling apiRef.current.subscribeEvent() with the name of the event and a handler. The handler will be called with two arguments: a object with information related to the event and, optionally, a React.SyntheticEvent object if the event was emitted by a DOM element.

/**
 * Allows to register a handler for an event.
 * @param event The name of event
 * @param handler The handler to be called
 * @param options Additional options for this listener
 * @returns A function to unsubscribe from this event
 */
subscribeEvent: (
  event: string,
  handler: (params: any, event?: React.SyntheticEvent) => void,
  options?: GridSubscribeEventOptions,
) => () => void;

The following demo shows how to subscribe to the columnResize event. Try it by resizing the columns.

Name	Description
`resize`	Fired when the grid is resized. Called with a GridResizeParams object.
`debouncedResize`	Fired when the grid is resized with a debounced time of 60ms. Called with a GridResizeParams object.
`componentError`	Fired when an exception is thrown in the grid.
`unmount`	Fired when the grid is unmounted.
`cellModeChange`	Fired when the mode of a cell changes. Called with a GridCellModeChangeParams object.
`cellClick`	Fired when a cell is clicked. Called with a GridCellParams object.
`cellDoubleClick`	Fired when a cell is double-clicked. Called with a GridCellParams object.
`cellMouseDown`	Fired when a `mousedown` event happens in a cell. Called with a GridCellParams object.
`cellMouseUp`	Fired when a `mouseup` event happens in a cell. Called with a GridCellParams object.
`cellOver`	Fired when a `mouseover` event happens in a cell. Called with a GridCellParams object.
`cellOut`	Fired when a `mouseout` event happens in a cell. Called with a GridCellParams object.
`cellEnter`	Fired when a `mouseenter` event happens in a cell. Called with a GridCellParams object.
`cellLeave`	Fired when a `mouseleave` event happens in a cell. Called with a GridCellParams object.
`cellKeyDown`	Fired when a `keydown` event happens in a cell. Called with a GridCellParams object.
`cellBlur`	Fired when the `blur` event of a cell is triggered. Called with a GridCellParams object.
`cellFocus`	Fired when a cell gains focus. Called with a GridCellParams object.
`cellFocusOut`	Fired when a cell loses focus. Called with a GridCellParams object.
`editCellPropsChange`	Fired when the props of the edit cell changes. Called with a GridEditCellPropsParams object.
`cellEditCommit`	Fired when the props of the edit input are committed. Called with a GridEditCellPropsParams object.
`cellEditEnter`	Fired when the cell turns to edit mode. Called with a GridCellParams object.
`cellEditExit`	Fired when the cell turns back to view mode. Called with a GridCellParams object.
`rowClick`	Fired when a row is clicked. Called with a GridRowParams object.
`rowDoubleClick`	Fired when a row is double-clicked. Called with a GridRowParams object.
`rowOver`	Fired when a `mouseover` event happens in a row. Called with a GridRowParams object.
`rowOut`	Fired when a `mouseout` event happens in a row. Called with a GridRowParams object.
`rowEnter`	Fired when a `mouseenter` event happens in a row. Called with a GridRowParams object.
`rowLeave`	Fired when a `mouseleave` event happens in a row. Called with a GridRowParams object.
`editRowsModelChange`	Fired when the row editing model changes. Called with a GridEditRowModelParams object.
`columnHeaderKeyDown`	Fired when a key is pressed in a column header. It's mapped do the `keydown` DOM event. Called with a GridColumnHeaderParams object.
`columnHeaderClick`	Fired when a column header is clicked. Called with a GridColumnHeaderParams object.
`columnHeaderDoubleClick`	Fired when a column header is double-clicked. Called with a GridColumnHeaderParams object.
`selectionChange`	Fired when the selection state of one or multiple rows changes. Called with a GridSelectionModelChangeParams object.
`pageChange`	Fired when the current page change. Called with a GridPageChangeParams object.
`pageSizeChange`	Fired when the page size change. Called with a GridPageChangeParams object.
`rowsScroll`	Fired during the scroll of the grid viewport. Called with a GridScrollParams object.
`rowsScrollEnd`	Fired when scrolling to the bottom of the grid viewport. Called with a GridRowScrollEndParams object.
`columnResize`	Fired during the resizing of a column. Called with a GridColumnResizeParams object.
`columnWidthChange`	Fired when the width of a column is changed. Called with a GridColumnResizeParams object.
`columnResizeStart`	Fired when the user starts resizing a column. Called with an object `{ field: string }`.
`columnResizeStop`	Fired when the user stops resizing a column. Called with an object `{ field: string }`.
`columnOrderChange`	Fired when the user ends resizing a column.
`columnsChange`	Fired when the columns state is changed. Called with an array of strings corresponding to the field names.
`sortModelChange`	Fired when the sort model changes. Called with a GridSortModelParams object.
`filterModelChange`	Fired when the filter model changes. Called with a GridFilterModel object.
`stateChange`	Fired when the state of the grid is updated. Called with a GridStateChangeParams object.
`columnVisibilityChange`	Fired when a column visibility changes. Called with a GridColumnVisibilityChangeParams object.

Data Grid - Events

Subscribing to events

Catalog of events

API