react-data-grid callback function on edit

Question

Example of my code is here: https://codesandbox.io/s/react-data-grid-example-nqylyb
Library URL: https://github.com/adazzle/react-data-grid

I cant seem to find a hook/callback that triggers on a cell edit in the documentation? Am I missing something or does this have to be written manually using an event listener or such?

After an edit I need to fire off a request to update the database, if this has to be written up rather than using a hook the library already provides, I'd highly appreciate any example snippets.

Thank you!

I just realised the onRowsChange gives a second param, the index of edited row. I should be able to use this to patch the database. Will update sandbox if successful. — jahkoora, Jul 27 '22 at 04:29

score 0 · Answer 1 · answered Jul 27 '22 at 05:32

Updated codesandbox, got it working, was right in front of my face. Apologies for the unnecessary post.

Quick snippet of what I've done. onRowsChange is calling handleSetRows

const handleSetRows = async (rows, index) => {
  setRows(rows);
  const key = index.column.key;
  const id = rows[index.indexes[0]].id;
  const value = rows[index.indexes[0]][key];

  const response = await fetch('/api/db/handler', {
    method: 'PUT',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({id, key, value}),
  });
};

react-data-grid callback function on edit

1 Answers1