Custom Edit component, no onChange?

[groyee]

I see there is an example that looks like this for rendering custom edit component:

const columns = [
  {
    accessorKey: 'email',
    header: 'Email',
    Edit: ({ cell, column, table }) => <Autocomplete />,
  },
];

But when I use this method, I don't get the changes in the OnBlur/OnChange in onEditingRowSave event...

I assume in my custom AutoComplete component I need somehow to update the cell with the new value? I just can't find the way

[KevinVandy]

Try giving a name={yourColumnAccessorKeyOrId} on your custom Edit input. Otherwise, I'll be able to take a harder look at this tonight

[groyee]

Thanks Kevin. Still no luck...

I must be doing something wrong here... My code is:

{
        accessorKey: 'firstName',
        header: 'First Name',
        Edit: ({ cell, column, row, table }) => <MyCustomAutoFillComponent name="firstName" />,
        size: 140,
  },

When i click "Save", I get the old value in the onEditingRowSave event

[groyee]

OK... I was able to do it like that:

        accessorKey: 'firstName',
        header: 'First Name',
        Edit: ({ cell, column, row, table }) => {
            return  < MyCustomAutoFillComponent onBlur={(e) => row._valuesCache['firstName'] = e.target.value} name="firstName" />;
        },
        size: 140,

Probably not the best way... but it works

[KevinVandy]

I think that actually is the way to do it

For reference, this is the Edit component you are overriding: https://github.com/KevinVandy/material-react-table/blob/main/packages/material-react-table/src/inputs/MRT_EditCellTextField.tsx

Pretty similar code

[groyee]

I think there is still an issue when you render objects in the custom edit component... If my AutoComplete component receives list of objects and I want to receive the object (and not the display name) in the onChange...

This will result in the following error:

Uncaught Error: Objects are not valid as a React child (found: object with keys {location}). If you meant to render a collection of children, use an array instead.

Edit: ({ cell, column, row, table }) => {
         ...
          return  <AutoComplete 
          displayName='location' 
          items={items} 
          value={{location: current}} 
          onChange={(value: any) => {
            row._valuesCache['project_location'] = value} // value here is an object
          }
           />; 
      }

  const handleSaveRowEdits: MaterialReactTableProps<IProject>['onEditingRowSave'] =
    async ({ exitEditingMode, row, values }) => {
      // Not saving anything here...
      // Will crash because row._valuesCache['project_location'] is an object
      exitEditingMode(); //required to exit editing mode and close modal
  };

The only workaround I could find is to manually replace the object back to the display string but I don't get why it should happen because I am not saving the object...

  const handleSaveRowEdits: MaterialReactTableProps<IProject>['onEditingRowSave'] =
    async ({ exitEditingMode, row, values }) => {
      // Not saving anything here...

      //Hack not to crash. Manual clean up
      row._valuesCache['project_location'] = row._valuesCache['project_location'].location;
      exitEditingMode(); //required to exit editing mode and close modal
  };

[glav-git]

I agree that it would be nice to find a better way to edit objects in cells, but here's what I found useful in addition to your method:

{
  accessorKey: 'mappedUser',
  header: 'Attached user',
  Cell: ({ cell }) => cell.getValue<User>().username ?? '-',
  Edit: ({ cell, row }) => (
    <UserAutocomplete
      initValue={cell.getValue<User>()}
      onChange={(value) => (row._valuesCache['mappedUser'] = value)}
    />
  )
}

Its essence is the same, but I initially place the object in the cell, and only while rendering it I get the "username" string property of the object to display. Thus, when assign edited object to _valuesCache[someKey], there is no error, because I already expect an object there, so with this approach everything turns out quite explicit, without cleanups and potential errors.

Although, of course, it still doesn't look very good to me.

[githorse]

OK ... so I guess onChange={value => row._valuesCache[accessorKey] = value} is the official way to do this? Definitely feels like we're exposing some internals here that I probably don't want to be messing with. Could there perhaps be an setValue handler passed in as a prop that would handle this for me?

{
  accessorKey: 'foo',
  header: 'Foo',
  Edit: ({ value, setValue }) => (
    <Autocomplete
      value={value}
      onChange={e => setValue(e.target.value)}
    />
  )
}

(Just for fun I threw a value prop in there too because that also seems like one I would always want and is a lot nicer to read than cell.getValue<Foo>.)

See related issue.