CODEWITHSUNDEEP
reactjstypescriptmaterial-uimui-x-data-gridmui-x
deBBuu
deBBuu

Reputation: 21

MUI DataGrid onCellEditStop changes previous value

MUI DataGrid onCellEditStop changes value of previously edited cell when changing other cell.

I saw a post that said that using onCellEditCommit is a solution, but it's deprecated so.. I need another way to fix it

  const onCellEditStopHandler = (params: GridCellParams) => {
    const { id, field, value } = params;
    const faction = staffFactions.find((faction) => faction.id === id);

    console.log('triggered');

    if (!faction) return;

    const factionWithoutActive = staffFactions.filter(
      (faction) => faction.id !== id
    );

    if (field === 'maxVehicles') {
      faction.maxVehicles = value;
    } else if (field === 'maxMembers') {
      faction.maxMembers = value;
    }

    setStaffFactions([...factionWithoutActive, faction]);
  };

      <ReactDataGrid
        experimentalFeatures={{ newEditingApi: true }}
        rows={rows || []}
        columns={columns}
        onCellEditStop={onCellEditStopHandler}
      />

Upvotes: 1

Views: 1743

Answers (1)

Blue Snow
Blue Snow

Reputation: 53

In the docs, there are many ways that you could handle an editable component.

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

For your code, maybe you could check out this section below and try using the processRowUpdate prop. It gets called once the editing stops.

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

Upvotes: 0

Related Questions