Pular para o conteúdo

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

Data Grid - Editing

The data grid has built-in edit capabilities that you can customize to your needs.

Cell editing

Cell editing allows editing the value of one cell at a time. Set the editable property in the GridColDef object to true to allow editing cells of this column.

<DataGrid columns={[{ field: 'name', editable: true }]} />
Name
Age
Date Created
Last Login
Logan Hunt
25
4/19/2025
5/15/2025, 9:39:21 PM
Georgia Gross
36
4/18/2025
5/16/2025, 11:45:45 AM
Marvin Knight
19
12/7/2024
5/16/2025, 1:52:30 AM
Jessie Salazar
28
5/6/2025
5/16/2025, 9:56:11 AM
Jimmy Houston
23
7/1/2024
5/15/2025, 12:15:40 PM

Linhas por página:

100

1-5 de 5

Start editing

If a cell is editable and has focus, any of the following interactions will start the edit mode:

  • A Enter keydown
  • A Backspace or Delete keydown. It will also delete the value and stops the edit mode instantly.
  • A keydown of any printable key, for instance a, E, 0, or $
  • A double click on the cell
  • A call to apiRef.current.setCellMode(id, field, 'edit').
    /**
      * Set the cellMode of a cell.
      * @param GridRowId
      * @param string
      * @param 'edit' | 'view'
      */
    setCellMode: (id: GridRowId, field: string, mode: GridCellMode) => void;
    

Stop editing

If a cell is in edit mode and has focus, any of the following interactions will stop the edit mode:

  • A Escape keydown. It will also roll back changes done in the value of the cell.
  • A Tab keydown. It will also save and goes to the next cell on the same row.
  • A Enter keydown. It will also save and goes to the next cell on the same column.
  • A mousedown outside the cell
  • A call to apiRef.current.setCellMode(id, field, 'view').

Control cell editability

In addition to the editable flag on columns, control which cell is editable using the isCellEditable prop.

In this demo, only the rows with an even Age value are editable. The editable cells have a green background for better visibility.

Name
Age
Date Created
Last Login
Lucy Cobb
25
11/26/2024
5/15/2025, 5:06:22 PM
Beulah Mullins
36
9/18/2024
5/16/2025, 9:17:58 AM
Gilbert Vasquez
19
11/3/2024
5/16/2025, 11:13:42 AM
Linnie Quinn
28
7/1/2024
5/15/2025, 1:15:53 PM
Ida Moreno
23
8/20/2024
5/16/2025, 8:32:12 AM

Linhas por página:

100

1-5 de 5

<DataGrid
  className={classes.root}
  rows={rows}
  columns={columns}
  isCellEditable={(params) => params.row.age % 2 === 0}
/>

Controlled editing

The editRowsModel prop lets you control the editing state. You can handle the onEditRowsModelChange callback to control the GridEditRowsModel state.

Name
Age
Date Created
Last Login
Milton Pratt
25
3/27/2025
5/16/2025, 6:40:39 AM
Cecilia Stevens
36
3/2/2025
5/15/2025, 9:25:20 PM
Ruth Phillips
19
9/27/2024
5/16/2025, 8:34:45 AM
Scott Wells
28
6/26/2024
5/16/2025, 9:36:14 AM
Scott Martin
23
12/11/2024
5/16/2025, 8:32:08 AM

Linhas por página:

100

1-5 de 5

Column with valueGetter

You can control the committed value when the edit move stops with the onCellEditCommit prop. This is especially interesting when using the valueGetter on the column definition.

First name
Last name
Full name
Jon
Snow
Jon Snow
Cersei
Lannister
Cersei Lannister
Jaime
Lannister
Jaime Lannister
Arya
Stark
Arya Stark
Daenerys
Targaryen
Daenerys Targaryen

Linhas por página:

100

1-5 de 5

<DataGrid
  rows={rows}
  columns={columns}
  onCellEditCommit={handleCellEditCommit}
/>

Client-side validation

To validate the value in the cells, use onEditRowsModelChange to set the error attribute of the respective field when the value is invalid. If this attribute is true, the value will never be commited. This prop is invoked when a change is triggered by the edit cell component.

Alternatively, you can use the GridEditRowsModel state mentioned in the Controlled editing section.

Name
Email
Date Created
Last Login
David Lucas
beut@vupna.qa
3/8/2025
5/16/2025, 8:46:34 AM
Randy Santiago
peih@vow.mm
12/2/2024
5/16/2025, 10:13:40 AM
Jared Brown
eku@agudetum.hm
5/21/2024
5/15/2025, 10:48:43 PM
Katherine Richardson
esorisor@gipnos.ag
2/20/2025
5/15/2025, 11:51:17 PM
Walter George
kozo@zu.uk
4/21/2025
5/15/2025, 9:49:00 PM

Linhas por página:

100

1-5 de 5

<DataGrid
  className={classes.root}
  rows={rows}
  columns={columns}
  editRowsModel={editRowsModel}
  onEditRowsModelChange={handleEditRowsModelChange}
/>

Server-side validation

Server-side validation works like client-side validation.

  • Use onEditCellPropsChange to set the error attribute to true of the respective field which will be validated.
  • Validate the value in the server.
  • Once the server responds, set the error attribute to false if it is valid. This allows to commit it.

Note: To prevent the default client-side behavior, set event.defaultMuiPrevented to true.

This demo shows how you can validate a username asynchronously and prevent the user from committing the value while validating. It's using DataGridPro but the same approach can be used with DataGrid.

MUI Contributor
Damien
Olivier
Danail
Matheus
You?
Total Rows: 5

Custom edit component

To customize the edit component of a column, use the renderEditCell attribute available in the GridColDef.

The demo lets you edit the ratings by double-clicking the cell.

Places
Rating
Barcelona
Rio de Janeiro
London
New York

Linhas por página:

100

1-4 de 4

Edit using external button

You can override the default start editing triggers using the event.defaultMuiPrevented on the synthetic React events.

Name
Age
Date Created
Last Login
Scott Mann
25
3/1/2025
5/16/2025, 9:07:05 AM
Andrew Massey
36
1/11/2025
5/15/2025, 8:31:32 PM
Randall Diaz
19
10/6/2024
5/15/2025, 7:34:26 PM
Charlotte Fernandez
28
11/19/2024
5/16/2025, 2:56:36 AM
Lucy Knight
23
2/2/2025
5/16/2025, 2:02:08 AM
Total Rows: 5

Events

The editing feature leverages the event capability of the grid and the apiRef. The following events can be imported and used to customize the edition:

  • cellEditStart: emitted when the cell turns to edit mode.
  • cellEditStop: emitted when the cell turns back to view mode.
  • cellEditCommit: emitted when the new value is commited.
  • editCellPropsChange: emitted when the props passed to the edit cell component are changed.

Catching events can be used to add a callback after an event while ignoring its triggers.

The demo shows how to catch the start & end edit events to log which cell is editing in an info message:

Name
Age
Date Created
Last Login
Robert Glover
25
10/9/2024
5/16/2025, 9:37:26 AM
Total Rows: 1
<div style={{ height: 180, width: '100%' }}>
  <DataGridPro rows={rows} columns={columns} apiRef={apiRef} />
</div>
{message && (
  <Alert severity="info" style={{ marginTop: 8 }}>
    {message}
  </Alert>
)}

Row editing

Row editing allows to edit all the cells of a row at once. It is based on the cell editing, thus most of the features are also supported. To enable it, change the edit mode to "row" using the editMode prop, then set to true the editable property in the GridColDef object of those columns that should be editable.

<DataGrid editMode="row" columns={[{ field: 'name', editable: true }]} />
Name
Age
Date Created
Last Login
Anne Schmidt
25
11/19/2024
5/16/2025, 9:38:24 AM
Grace Carr
36
3/11/2025
5/15/2025, 4:13:39 PM
Katie Soto
19
5/17/2024
5/15/2025, 6:55:57 PM
William Chandler
28
7/10/2024
5/16/2025, 5:57:47 AM
Connor Armstrong
23
5/24/2024
5/16/2025, 9:21:55 AM

Linhas por página:

100

1-5 de 5

Start editing

If a cell is editable and has focus, any of the following interactions will start the edit mode of the corresponding row:

  • A Enter keydown
  • A double click on the cell
  • A call to apiRef.current.setRowMode(id, 'edit').
    /**
      * Sets the mode of a row.
      * @param {GridRowId} id The id of the row.
      * @param {GridRowMode} mode Can be: `"edit"`, `"view"`.
      */
    setRowMode: (id: GridRowId, mode: GridRowMode) => void;
    

Stop editing

If a row is in edit mode and one of its cells is focused, any of the following interactions will stop the edit mode:

  • A Escape keydown. It will also roll back changes done in the row.
  • A Enter keydown. It will also save and goes to the cell at the next row at the same column.
  • A mouse click outside the row
  • A call to apiRef.current.setRowMode(id, 'view').

Controlled editing

The editRowsModel prop lets you control the editing state. You can handle the onEditRowsModelChange callback to control the GridEditRowsModel state.

Name
Age
Date Created
Last Login
Sally McDonald
25
2/2/2025
5/16/2025, 4:53:41 AM
Isabel Porter
36
2/25/2025
5/15/2025, 2:04:37 PM
Roxie Boone
19
1/28/2025
5/16/2025, 9:47:14 AM
Terry Ferguson
28
12/13/2024
5/15/2025, 11:21:19 PM
Ollie Morris
23
12/4/2024
5/15/2025, 11:10:44 PM

Linhas por página:

100

1-5 de 5

Conditional validation

Having all cells of a row in edit mode allows validating a field based on the value of another one. To accomplish that, set the onEditRowsModelChange prop and return a new model with the error attribute of the invalid field set to true. Use the other fields available in the model to check if the validation should run or not. Once at the least one field has the error attribute equals to true no new value will be commited.

Note: For server-side validation, the same approach from the cell editing can be used.

The following demo only requires a value for the "Paid at" column if the "Is paid?" column was checked.

Expense
Price
Due at
Is paid?
Paid at
Light bill
449.47
7/8/2021
false
Rent
48.06
8/1/2021
false
Car insurance
291.98
8/4/2021
true
8/2/2021

Linhas por página:

100

1-3 de 3

Control with external buttons

You can disable the default behavior of the grid and control the row edit using external buttons.

Here is shown how a full-featured CRUD can be created.

Name
Age
Date Created
Last Login
Actions
Christine Barrett
25
9/14/2024
5/16/2025, 12:51:08 AM
Betty Simmons
36
6/3/2024
5/15/2025, 12:50:41 PM
Charlotte Tyler
19
10/18/2024
5/16/2025, 4:49:37 AM
Lola Potter
28
12/22/2024
5/16/2025, 3:30:26 AM
Myra Strickland
23
1/3/2025
5/16/2025, 7:06:51 AM
Total Rows: 5
<DataGridPro
  rows={rows}
  columns={columns}
  apiRef={apiRef}
  editMode="row"
  onRowEditStart={handleRowEditStart}
  onRowEditStop={handleRowEditStop}
  components={{
    Toolbar: EditToolbar,
  }}
  componentsProps={{
    toolbar: { apiRef },
  }}
/>

Events

The following events can be imported and used to customize the row edition:

  • rowEditStart: emitted when the row turns to edit mode.
  • rowEditStop: emitted when the row turns back to view mode.
  • rowEditCommit: emitted when the new row values are commited.
  • editCellPropsChange: emitted when the props passed to an edit cell component are changed.

apiRef

Signature:
commitCellChange: (params: GridCommitCellChangeParams, event?: any) => boolean
Signature:
commitRowChange: (id: GridRowId, event?: any) => boolean
Signature:
getCellMode: (id: GridRowId, field: string) => GridCellMode
Signature:
getEditRowsModel: () => GridEditRowsModel
Signature:
getRowMode: (id: GridRowId) => GridRowMode
Signature:
isCellEditable: (params: GridCellParams) => boolean
Signature:
setCellMode: (id: GridRowId, field: string, mode: GridCellMode) => void
Signature:
setEditCellValue: (params: GridEditCellValueParams, event?: SyntheticEvent<Element, Event>) => void
Signature:
setEditRowsModel: (model: GridEditRowsModel) => void
Signature:
setRowMode: (id: GridRowId, mode: GridRowMode) => void