Skip to content

Data grid - Editing recipes

Advanced grid customization recipes.

Multiline editing

You can have columns with multiline text and edit them by creating a custom edit component.

In the demo below, the Bio column is composed of multiple lines. To persist the changes, use Ctrl+Enter (or ⌘ Command+Enter on macOS).

ID
Name
Age
Bio
0
@gigevezeb
35
Nullam cursus tincidunt auctor.
1
@dab
11
Maecenas non felis venenatis, porta velit quis, consectetur elit. Pellentesque ac metus velit. Vestibulum commodo et odio a laoreet.
2
@sahunedak
15
Phasellus et ultrices dui. Nam ullamcorper ligula id consectetur auctor. Maecenas non felis venenatis, porta velit quis, consectetur elit. Phasellus et ultrices dui.
3
@giuleuve
35
Maecenas non felis venenatis, porta velit quis, consectetur elit. Nulla venenatis justo non felis vulputate, eu mollis metus ornare. Sed feugiat venenatis nulla, sit amet dictum nulla convallis sit amet.
4
@tog
54
Phasellus et ultrices dui. Nullam cursus tincidunt auctor. Nulla venenatis justo non felis vulputate, eu mollis metus ornare. Aliquam dapibus, lorem vel mattis aliquet, purus lorem tincidunt mauris, in blandit quam risus sed ipsum. Vestibulum commodo et odio a laoreet. Aliquam dapibus, lorem vel mattis aliquet, purus lorem tincidunt mauris, in blandit quam risus sed ipsum.
5
@dunni
40
Pellentesque ac metus velit. Nullam cursus tincidunt auctor. Fusce facilisis egestas massa, et eleifend magna imperdiet et. Nulla venenatis justo non felis vulputate, eu mollis metus ornare.
6
@vez
28
Pellentesque ac metus velit. Vestibulum commodo et odio a laoreet. Nulla venenatis justo non felis vulputate, eu mollis metus ornare.
Total Rows: 50

Conditional validation

When all cells in a row are in edit mode, you can validate fields by comparing their values against one another. To do this, start by adding the preProcessEditCellProps as explained in the validation section. When the callback is called, it will have an additional otherFieldsProps param containing the props from the other fields in the same row. Use this param to check if the value from the current column is valid or not. Return the modified props containing the error as you would for cell editing. Once at the least one field has the error attribute set to a truthy value, the row will not exit edit mode.

The following demo requires a value for the Payment method column only if the Is paid? column is checked:

Expense
Price
Due at
Is paid?
Payment method
Light bill
266.58
7/8/2021
no
Rent
95.37
8/1/2021
no
Car insurance
148.49
8/4/2021
yes
Wire transfer

Rows per page:

1–3 of 3

Linked fields

The options available for one field may depend on the value of another field. For instance, if the singleSelect column is used, you can provide a function to valueOptions returning the relevant options for the value selected in another field, as exemplified below.

const columns: GridColDef[] = [
  {
    field: 'account',
    type: 'singleSelect',
    valueOptions: ({ row }) => {
      if (!row) {
        // The row is not available when filtering this column
        return ['Sales', 'Investments', 'Ads', 'Taxes', 'Payroll', 'Utilities'];
      }

      return row.type === 'Income' // Gets the value of the "type" field
        ? ['Sales', 'Investments', 'Ads']
        : ['Taxes', 'Payroll', 'Utilities'];
    },
  },
];

The code above is already enough to display different options in the Account column based on the value selected in the Type column. The only task left is to reset the account once the type is changed. This is needed because the previously selected account will not exist now in the options. To solve that, you can create a custom edit component, reusing the built-in one, and pass a function to the onValueChange prop. This function should call apiRef.current.setEditCellValue to reset the value of the other field.

const CustomTypeEditComponent = (props: GridEditSingleSelectCellProps) => {
  const apiRef = useGridApiContext();

  const handleValueChange = async () => {
    await apiRef.current.setEditCellValue({
      id: props.id,
      field: 'account',
      value: '',
    });
  };

  return <GridEditSingleSelectCell onValueChange={handleValueChange} {...props} />;
};

The demo below combines the steps showed above. You can experiment it by changing the value of any cell in the Type column. The Account column is automatically updated with the correct options.

Description
Value
Type
Account
Light bill
141.45
Expense
Utilities
Order #5
84.46
Income
Sales
Google AdSense
935.71
Income
Ads

Rows per page:

1–3 of 3

A similar behavior can be reproduced with cell editing. Instead of apiRef.current.setEditCellValue, the rows prop must be updated or apiRef.current.updateRows be used. Note that the onCellEditStart and onCellEditStop props also have to be used to revert the value of the cell changed, in case the user cancels the edit.

Description
Value
Type
Account
Light bill
960.06
Expense
Utilities
Order #5
321.52
Income
Sales
Google AdSense
906.17
Income
Ads

Rows per page:

1–3 of 3

Usage with @mui/x-date-pickers

By default, the grid uses native browser inputs for editing date and dateTime columns.

While MUI X Date / Time Pickers are not supported by the grid out of the box yet, it is easy to integrate them by creating custom edit components and custom filter operators.

The example below uses @mui/x-date-pickers for both date and dateTime column types:

Name
Age
Date Created
Last Login
Blanche Evans
25
02/18/2025
06/25/2025 9:52 PM
Matthew Neal
36
01/28/2025
06/26/2025 1:22 PM
Cole Barton
19
10/03/2024
06/26/2025 8:22 AM
Leila Bradley
28
11/08/2024
06/26/2025 1:50 PM
Clyde Hogan
23
08/07/2024
06/26/2025 12:29 AM

Rows per page:

1–5 of 5