Material React TableV2 - editable selection field

51 Views Asked by At

I am using Material React Table V2 and want to create a simple table with cell editing features. The cell that should be edited includes a selection (array) of which the user can pick.

In the docs it is stated as:

{
    accessorKey: 'state',
    header: 'State',
    editVariant: 'select',
    editSelectOptions: usStates,
    muiEditTextFieldProps: ({ row }) => ({
      select: true,
      error: !!validationErrors?.state,
      helperText: validationErrors?.state,
      onChange: (event) =>
        setEditedUsers({
          ...editedUsers,
          [row.id]: { ...row.original, state: event.target.value },
        }),
    }),
  },

To be able to set the state properly, I would like to have an array of objects like so:

editSelectOptions: [{id: 1, state:"Alabama", id: 2, state:"New York"}]

where I can display the name property and access the id property in onChange to be able to communicate properly with the backend.Unfortunately, this does not work as the select is empty and I get a warning saying that Each child in a list should have a unique "key" prop.

0

There are 0 best solutions below