Custom Dropdown editor not updating row

[andrewjmac]

I've copied the example I could find to create a new drop down editor, having needed to remove the use of react-data-grid-addons

Below is an example of the column I am trying to create a dropdown on:

{ key: 'Type', name: 'Type', editable: true, hidden: false, editor: (p) => ( <select autoFocus value={p.row.Type} onChange={(e) => p.onRowChange({ ...p.row, Type: e.target.value }, true)}> {types.map((type) => (

{type.value}

            ))}
          </select>
        ),
        width: 250,
        formatter(props) {
          return <>{props.row.type}</>;
        },
        editorOptions: {
          editOnClick: true,
        },
      },

Expect for the value to update in the row, but it isn't updating and still returning blank.

• react-data-grid version: 7.0.0-beta.7
• react/react-dom version: 16.14.0

Any help greatly received!

[khamani-fewcents]

The documentation around the custom editors is not good. The only custom editor I could see is a percent completion bar which too is rendered on body tag instead of inside data grid cell.

What needs to be done to add an auto-complete dropdown editor which renders within the cell?

Right now it does render within the cell but the list remains hidden behind the cell, setting the position as absolute, adding z-index etc doesn't help either. Please provide some more examples of custom editors with v7 and the editors should render within the cells.

Thanks

[amanmahajan7]

Can you create a reproducible codesandbox example?