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
@pehkidu
57
Nulla venenatis justo non felis vulputate, eu mollis metus ornare. Sed feugiat venenatis nulla, sit amet dictum nulla convallis sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo et odio a laoreet. Nullam cursus tincidunt auctor.
1
@gudup
61
Vestibulum in massa nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat venenatis nulla, sit amet dictum nulla convallis sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo et odio a laoreet. Nullam cursus tincidunt auctor.
2
@kaf
36
Phasellus et ultrices dui. Vestibulum in massa nibh. Pellentesque ac metus velit.
3
@porbicic
76
Nullam cursus tincidunt auctor. Aliquam dapibus, lorem vel mattis aliquet, purus lorem tincidunt mauris, in blandit quam risus sed ipsum. Maecenas non felis venenatis, porta velit quis, consectetur elit. Vestibulum in massa nibh. Vestibulum pulvinar aliquam turpis, ac faucibus risus varius a.
4
@cipro
34
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non felis venenatis, porta velit quis, consectetur elit. Sed feugiat venenatis nulla, sit amet dictum nulla convallis sit amet. Aliquam dapibus, lorem vel mattis aliquet, purus lorem tincidunt mauris, in blandit quam risus sed ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
5
@cu
72
Sed feugiat venenatis nulla, sit amet dictum nulla convallis sit amet. Vestibulum commodo et odio a laoreet. Sed feugiat venenatis nulla, sit amet dictum nulla convallis sit amet.
6
@laggora
17
Fusce facilisis egestas massa, et eleifend magna imperdiet et.
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
510.3
7/8/2021
no
Rent
153.55
8/1/2021
no
Car insurance
209.88
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
946.8
Expense
Utilities
Order #5
101.6
Income
Sales
Google AdSense
97.52
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
976.78
Expense
Utilities
Order #5
975.28
Income
Sales
Google AdSense
563.82
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
Danny Stevenson
25
11/20/2024
03/14/2025 12:27 PM
Charlie Bradley
36
07/25/2024
03/14/2025 5:00 PM
Lizzie Cain
19
07/15/2024
03/15/2025 1:21 AM
Frederick Moss
28
05/28/2024
03/14/2025 5:28 AM
Melvin Walker
23
02/07/2025
03/14/2025 7:40 PM

Rows per page:

1–5 of 5