Skip to content

🎉 v5 beta is out! Head to the v5 documentation to get started.

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.

Catalog of events

NameDescription
resizeFired when the grid is resized. Called with a GridResizeParams object.
debouncedResizeFired when the grid is resized with a debounced time of 60ms. Called with a GridResizeParams object.
componentErrorFired when an exception is thrown in the grid.
unmountFired when the grid is unmounted.
cellModeChangeFired when the mode of a cell changes. Called with a GridCellModeChangeParams object.
cellClickFired when a cell is clicked. Called with a GridCellParams object.
cellDoubleClickFired when a cell is double-clicked. Called with a GridCellParams object.
cellMouseDownFired when a mousedown event happens in a cell. Called with a GridCellParams object.
cellMouseUpFired when a mouseup event happens in a cell. Called with a GridCellParams object.
cellOverFired when a mouseover event happens in a cell. Called with a GridCellParams object.
cellOutFired when a mouseout event happens in a cell. Called with a GridCellParams object.
cellEnterFired when a mouseenter event happens in a cell. Called with a GridCellParams object.
cellLeaveFired when a mouseleave event happens in a cell. Called with a GridCellParams object.
cellKeyDownFired when a keydown event happens in a cell. Called with a GridCellParams object.
cellBlurFired when the blur event of a cell is triggered. Called with a GridCellParams object.
cellFocusFired when a cell gains focus. Called with a GridCellParams object.
cellFocusOutFired when a cell loses focus. Called with a GridCellParams object.
cellEditPropsChangeFired when the props of the edit input changes. Called with a GridEditCellPropsParams object.
cellEditPropsChangeCommittedFired when the props of the edit input are committed. Called with a GridEditCellPropsParams object.
cellValueChangeFired when the value of a cell changes. Called with a GridEditCellValueParams object.
cellEditEnterFired when the cell turns to edit mode. Called with a GridCellParams object.
cellEditExitFired when the cell turns back to view mode. Called with a GridCellParams object.
rowClickFired when a row is clicked. Called with a GridRowParams object.
rowDoubleClickFired when a row is double-clicked. Called with a GridRowParams object.
rowOverFired when a mouseover event happens in a row. Called with a GridRowParams object.
rowOutFired when a mouseout event happens in a row. Called with a GridRowParams object.
rowEnterFired when a mouseenter event happens in a row. Called with a GridRowParams object.
rowLeaveFired when a mouseleave event happens in a row. Called with a GridRowParams object.
editRowModelChangeFired when the row editing model changes. Called with a GridEditRowModelParams object.
columnHeaderKeyDownFired when a key is pressed in a column header. It's mapped do the keydown DOM event. Called with a GridColumnHeaderParams object.
columnHeaderClickFired when a column header is clicked. Called with a GridColumnHeaderParams object.
columnHeaderDoubleClickFired when a column header is double-clicked. Called with a GridColumnHeaderParams object.
selectionChangeFired when the selection state of one or multiple rows changes. Called with a GridSelectionModelChangeParams object.
pageChangeFired when the current page change. Called with a GridPageChangeParams object.
pageSizeChangeFired when the page size change. Called with a GridPageChangeParams object.
rowsScrollFired during the scroll of the grid viewport. Called with a GridScrollParams object.
rowsScrollEndFired when scrolling to the bottom of the grid viewport. Called with a GridRowScrollEndParams object.
columnResizeFired during the resizing of a column. Called with a GridColumnResizeParams object.
columnWidthChangeFired when the width of a column is changed. Called with a GridColumnResizeParams object.
columnResizeStartFired when the user starts resizing a column. Called with an object { field: string }.
columnResizeStopFired when the user stops resizing a column. Called with an object { field: string }.
columnOrderChangeFired when the user ends resizing a column.
columnsChangeFired when the columns state is changed. Called with an array of strings corresponding to the field names.
sortModelChangeFired when the sort model changes. Called with a GridSortModelParams object.
filterModelChangeFired when the filter model changes. Called with a GridFilterModel object.
stateChangeFired when the state of the grid is updated. Called with a GridStateChangeParams object.
columnVisibilityChangeFired when a column visibility changes. Called with a GridColumnVisibilityChangeParams object.