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 three arguments:

an object with information related to the event
a MuiEvent containing the DOM event or the React synthetic event, when available
a GridCallbackDetails containing the GridApi only if DataGridPro is being used.

/**
 * 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: GridEventsStr,
    handler: (params: any, event: MuiEvent, details: GridCallbackDetails) => void,
    options?: EventListenerOptions,
) => () => void;

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

<div style={{ height: 180, width: '100%' }}>
  <DataGridPro apiRef={apiRef} {...data} />
</div>
{message && (
  <Alert severity="info" style={{ marginTop: 8 }}>
    {message}
  </Alert>
)}

Disabling the default behavior

Depending on the use case, it might be necessary to disable the default action taken by an event. The MuiEvent passed to the event handler has a defaultMuiPrevented property to control when the default behavior can be executed or not. Set it to true to block the default handling of an event and implement your own.

<DataGrid
  onCellClick={(params: GridCellParams, event: MuiEvent<React.MouseEvent>) => {
    event.defaultMuiPrevented = true;
  }}
/>

Usually, double clicking a cell will put it into edit mode. The following example changes this behavior by also requiring CTRL to be pressed.

<DataGrid
  onCellDoubleClick={(params, event) => {
    if (!event.ctrlKey) {
      event.defaultMuiPrevented = true;
    }
  }}
  {...data}
/>

Catalog of events

	Name	Description
	`cellClick`	Fired when a cell is clicked. Params: `GridCellParams` Event: `MuiEvent<React.MouseEvent<HTMLElement>>`

	`cellDoubleClick`	Fired when a cell is double-clicked. Params: `GridCellParams` Event: `MuiEvent<React.MouseEvent<HTMLElement>>`

	`cellEditCommit`	Fired when the props of the edit input are committed. Params: `GridCellEditCommitParams` Event: `MuiEvent<MuiBaseEvent>`

	`cellEditStart`	Fired when the cell turns to edit mode. Params: `GridCellParams` Event: `MuiEvent<React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>>`

	`cellEditStop`	Fired when the cell turns back to view mode. Params: `GridCellParams` Event: `MuiEvent<MuiBaseEvent>`

	`cellFocusIn`	Fired when a cell gains focus. Params: `GridCellParams` Event: `MuiEvent<{}>`

	`cellFocusOut`	Fired when a cell loses focus. Params: `GridCellParams` Event: `MuiEvent<MuiBaseEvent>`

	`cellKeyDown`	Fired when a `keydown` event happens in a cell. Params: `GridCellParams` Event: `MuiEvent<React.KeyboardEvent<HTMLElement>>`

	`cellMouseDown`	Fired when a `mousedown` event happens in a cell.. Params: `GridCellParams` Event: `MuiEvent<React.MouseEvent<HTMLElement>>`

	`cellMouseUp`	Fired when a `mouseup` event happens in a cell.. Params: `GridCellParams` Event: `MuiEvent<React.MouseEvent<HTMLElement>>`

	`columnHeaderClick`	Fired when a column header is clicked Params: `GridColumnHeaderParams` Event: `MuiEvent<React.MouseEvent<HTMLElement>>`

	`columnHeaderDoubleClick`	Fired when a column header is double-clicked. Params: `GridColumnHeaderParams` Event: `MuiEvent<React.MouseEvent<HTMLElement>>`

	`columnHeaderKeyDown`	Fired when a key is pressed in a column header. It's mapped do the `keydown` DOM event. Params: `GridColumnHeaderParams` Event: `MuiEvent<React.KeyboardEvent<HTMLElement>>`

	`columnOrderChange`	Fired when the user ends reordering a column. Params: `GridColumnOrderChangeParams` Event: `MuiEvent<{}>`

	`columnResize`	Fired during the resizing of a column. Params: `GridColumnResizeParams` Event: `MuiEvent<MouseEvent>`

	`columnResizeStart`	Fired when the user starts resizing a column. Params: `{ field: string }` Event: `MuiEvent<React.MouseEvent<HTMLElement>>`

	`columnResizeStop`	Fired when the user stops resizing a column. Params: `null` Event: `MuiEvent<MouseEvent>`

	`columnsChange`	Fired when the columns state is changed. Params: `string[]` Event: `MuiEvent<{}>`

	`columnVisibilityChange`	Fired when a column visibility changes. Params: `GridColumnVisibilityChangeParams` Event: `MuiEvent<{}>`

	`columnWidthChange`	Fired when the width of a column is changed. Params: `GridColumnResizeParams` Event: `MuiEvent<MouseEvent \| {}>`

	`componentError`	Fired when an exception is thrown in the grid. Params: `any` Event: `MuiEvent<{}>`

	`debouncedResize`	Fired when the grid is resized with a debounced time of 60ms. Params: `ElementSize` Event: `MuiEvent<{}>`

	`editCellPropsChange`	Fired when the props of the edit cell changes. Params: `GridEditCellPropsParams` Event: `MuiEvent<React.SyntheticEvent<HTMLElement> \| {}>`

	`editRowsModelChange`	Fired when the row editing model changes. Params: `GridEditRowsModel` Event: `MuiEvent<{}>`

	`filterModelChange`	Fired when the filter model changes. Params: `GridFilterModel` Event: `MuiEvent<{}>`

	`headerSelectionCheckboxChange`	Fired when the value of the selection checkbox of the header is changed Params: `GridHeaderSelectionCheckboxParams` Event: `MuiEvent<{}>`

	`pageChange`	Fired when the page changes. Params: `number` Event: `MuiEvent<{}>`

	`pageSizeChange`	Fired when the page size changes. Params: `number` Event: `MuiEvent<{}>`

	`resize`	Fired when the grid is resized. Params: `ElementSize` Event: `MuiEvent<{}>`

	`rowClick`	Fired when a row is clicked. Params: `GridRowParams` Event: `MuiEvent<React.MouseEvent<HTMLElement>>`

	`rowDoubleClick`	Fired when a row is double-clicked. Params: `GridRowParams` Event: `MuiEvent<React.MouseEvent<HTMLElement>>`

	`rowEditCommit`	Fired when the props of the edit input are committed. Params: `GridRowId` Event: `MuiEvent<MuiBaseEvent>`

	`rowEditStart`	Fired when the row turns to edit mode. Params: `GridRowParams` Event: `MuiEvent<React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>>`

	`rowEditStop`	Fired when the row turns back to view mode. Params: `GridRowParams` Event: `MuiEvent<MuiBaseEvent>`

	`rowMouseEnter`	Fired when the mouse enters the row. Called with a GridRowParams object. Params: `GridRowParams` Event: `MuiEvent<React.MouseEvent<HTMLElement>>`

	`rowMouseLeave`	Fired when the mouse leaves the row. Called with a GridRowParams object. Params: `GridRowParams` Event: `MuiEvent<React.MouseEvent<HTMLElement>>`

	`rowSelectionCheckboxChange`	Fired when the value of the selection checkbox of a row is changed Params: `GridRowSelectionCheckboxParams` Event: `MuiEvent<React.ChangeEvent<HTMLElement>>`

	`rowsScroll`	Fired during the scroll of the grid viewport. Params: `GridScrollParams` Event: `MuiEvent<{}>`

	`rowsScrollEnd`	Fired when scrolling to the bottom of the grid viewport. Params: `GridRowScrollEndParams` Event: `MuiEvent<{}>`

	`selectionChange`	Fired when the selection state of one or multiple rows changes. Params: `GridSelectionModel` Event: `MuiEvent<{}>`

	`sortModelChange`	Fired when the sort model changes. Params: `GridSortModel` Event: `MuiEvent<{}>`

	`stateChange`	Fired when the state of the grid is updated. Params: `GridState` Event: `MuiEvent<{}>`

	`unmount`	Fired when the grid is unmounted. Event: `MuiEvent<{}>`

	`viewportInnerSizeChange`	Fired when the inner size of the viewport changes. Called with an ElementSize object. Params: `ElementSize` Event: `MuiEvent<{}>`

Data Grid - Events

Subscribing to events

Disabling the default behavior

Catalog of events

API