Search code examples
javascriptreactjsmaterial-uidatagrid

React MUI startCellEditMode function isn't working

I have a Datagrid in MUI in which each button has an edit button. I implemented the edit buttons in the actions of a column definition.

As I see in docs, MUI has a startCellEditMode function which could use as:

  const handleEditClick = (id: GridRowId) => () => {
    apiRef.current.startCellEditMode({ id, field: 'text' });
  };

Now I want to use this line of code onClick of my edit button, but it doesn't work and I get this error:

apiRef.current.startCellEditMode is not a function

my function is called correctly, but the corresponding cell doesn't go to the edit mode

Solution

  • You will need to add this to your DataGrid component, I believe this works on the free version even.

    As stated on the documentation: "Although it says "experimental," you can consider it stable." So, it should be good to go.

    https://mui.com/x/react-data-grid/editing/

    <DataGrid experimentalFeatures={{ newEditingApi: true }}