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: string,
  handler: (params: any, event: MuiEvent, details: GridCallbackDetails) => void,
  options?: GridSubscribeEventOptions,
) => () => 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
`cellBlur`	Fired when the `blur` event of a cell is triggered. Called with a GridCellParams 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.
`cellEditCommit`	Fired when the props of the edit input are committed. Called with a GridEditCellPropsParams object.
`cellEditStart`	Fired when the cell turns to edit mode. Called with a GridCellParams object.
`cellEditStop`	Fired when the cell turns back to view mode. Called with a GridCellParams object.
`cellEnter`	Fired when a `mouseenter` event happens in a cell. Called with a GridCellParams object.
`cellFocus`	Fired when a cell gains focus. Called with a GridCellParams object.
`cellFocusIn`	Fired when a cell gains focus. Called with a GridCellParams object.
`cellFocusOut`	Fired when a cell loses focus. Called with a GridCellParams object.
`cellKeyDown`	Fired when a `keydown` 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.
`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.
`cellOut`	Fired when a `mouseout` 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.
`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.
`columnHeaderKeyDown`	Fired when a key is pressed in a column header. It's mapped do the `keydown` DOM event. Called with a GridColumnHeaderParams object.
`columnOrderChange`	Fired when the user ends reordering a column.
`columnResize`	Fired during the resizing of a column. 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 }`.
`columnsChange`	Fired when the columns state is changed. Called with an array of strings corresponding to the field names.
`columnVisibilityChange`	Fired when a column visibility changes. Called with a GridColumnVisibilityChangeParams object.
`columnWidthChange`	Fired when the width of a column is changed. Called with a GridColumnResizeParams object.
`componentError`	Fired when an exception is thrown in the grid.
`debouncedResize`	Fired when the grid is resized with a debounced time of 60ms. Called with a ElementSize object.
`editCellPropsChange`	Fired when the props of the edit cell changes. Called with a GridEditCellPropsParams object.
`editRowsModelChange`	Fired when the row editing model changes. Called with a GridEditRowModelParams object.
`filterModelChange`	Fired when the filter model changes. Called with a GridFilterModel object.
`pageChange`	Fired when the page changes.
`pageSizeChange`	Fired when the page size changes.
`resize`	Fired when the grid is resized. Called with a ElementSize 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.
`rowEditCommit`	Fired when the props of the edit input are committed. Called with the GridRowId of the row.
`rowEditStart`	Fired when the row turns to edit mode. Called with a GridCellParams object.
`rowEditStop`	Fired when the row turns back to view mode. Called with a GridCellParams 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.
`rowOut`	Fired when a `mouseout` event happens in a row. Called with a GridRowParams object.
`rowOver`	Fired when a `mouseover` event happens in a row. Called with a GridRowParams 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.
`selectionChange`	Fired when the selection state of one or multiple rows changes. Called with a GridSelectionModelChangeParams object.
`sortModelChange`	Fired when the sort model changes. Called with a GridSortModelParams object.
`stateChange`	Fired when the state of the grid is updated. Called with a GridState object.
`unmount`	Fired when the grid is unmounted.
`viewportRowsChange`	Fired when the rows in the viewport is changed. Called with a GridViewportRowsChange object.

Data Grid - Events

Subscribing to events

Disabling the default behavior

Catalog of events

API