React Data GridCell Editors

const DoublingEditor = forwardRef((props, ref) => {
   const [value, setValue] = useState(parseInt(props.value));
   const refInput = useRef(null);

   useEffect(() => {
       // focus on the input
       refInput.current.focus();
   }, []);

   /* Component Editor Lifecycle methods */
   useImperativeHandle(ref, () => {
       return {
           // the final value to send to the grid, on completion of editing
           getValue() {
               // this simple editor doubles any value entered into the input
               return value * 2;
           },

           // Gets called once before editing starts, to give editor a chance to
           // cancel the editing before it even starts.
           isCancelBeforeStart() {
               return false;
           },

           // Gets called once when editing is finished (eg if Enter is pressed).
           // If you return true, then the result of the edit will be ignored.
           isCancelAfterEnd() {
               // our editor will reject any value greater than 1000
               return value > 1000;
           }
       };
   });

   return (
       <input type="number"
              ref={refInput}
              value={value}
              onChange={event => setValue(event.target.value)}
              style={{width: "100%"}}
       />
   );
});

export default class DoublingEditor extends Component {
   constructor(props) {
       super(props);

       this.inputRef = createRef();

       this.state = {
           value: parseInt(props.value)
       };
   }

   componentDidMount() {
        this.inputRef.current.focus();
   }

   /* Component Editor Lifecycle methods */
   // the final value to send to the grid, on completion of editing
   getValue() {
       // this simple editor doubles any value entered into the input
       return this.state.value * 2;
   }

   // Gets called once before editing starts, to give editor a chance to
   // cancel the editing before it even starts.
   isCancelBeforeStart() {
       return false;
   }

   // Gets called once when editing is finished (eg if Enter is pressed).
   // If you return true, then the result of the edit will be ignored.
   isCancelAfterEnd() {
       // our editor will reject any value greater than 1000
       return this.state.value > 1000;
   }

   render() {
       return (
           <input ref={this.inputRef}
                  value={this.state.value}
                  onChange={event => this.setState({value: event.target.value})}
                  style={{width: "100%"}}
           />
       );
   }
}

interface ICellEditorReactComp {

   // Mandatory - Return the final value - called by the grid once after editing is complete
   getValue(): any;

   // Gets called once after initialised. If you return true, the editor will not be
   // used and the grid will continue editing. Use this to make a decision on editing
   // inside the init() function, eg maybe you want to only start editing if the user
   // hits a numeric key, but not a letter, if the editor is for numbers.
   isCancelBeforeStart?(): boolean;

   // Gets called once after editing is complete. If your return true, then the new
   // value will not be used. The editing will have no impact on the record. Use this
   // if you do not want a new value from your gui, i.e. you want to cancel the editing.
   isCancelAfterEnd?(): boolean;

   // If doing full line edit, then gets called when focus should be put into the editor
   focusIn?(): boolean;

   // If doing full line edit, then gets called when focus is leaving the editor
   focusOut?(): boolean;
}

colDef = {
   cellEditor: MyCellEditor,    
   cellEditorParams: {
       // make "country" value available to cell editor
       country: 'Ireland'
   },
   // ...other props
}

 colDef = {
    cellEditorPopup: true,
    // ...other props
}

 colDef = {
    cellEditorPopupPosition: 'under',
    // ...other props
}

const KEY_LEFT = 'ArrowLeft';
const KEY_UP = 'ArrowUp';
const KEY_RIGHT = 'ArrowRight';
const KEY_DOWN = 'ArrowDown';
const KEY_PAGE_UP = 'PageUp';
const KEY_PAGE_DOWN = 'PageDown';
const KEY_PAGE_HOME = 'Home';
const KEY_PAGE_END = 'End';

const MyCellEditor = forwardRef((props, ref) => {
   const [value, setValue] = useState(props.value);

   /* Component Editor Lifecycle methods */
   useImperativeHandle(ref, () => {
       return {
           getValue() {
               return value;
           }
       };
   });

   onKeyDown(event) {
      const key = event.key;

       const isNavigationKey = key === KEY_LEFT ||
          key === KEY_RIGHT ||
          key === KEY_UP ||
          key === KEY_DOWN ||
          key === KEY_PAGE_DOWN ||
          key === KEY_PAGE_UP ||
          key === KEY_PAGE_HOME ||
          key === KEY_PAGE_END;

          if (isNavigationKey) {
              // this stops the grid from receiving the event and executing keyboard navigation
              event.stopPropagation();
          }
   }

   return (
       <input value={value}
              onKeyDown={event => onKeyDown(event)}
       />
   );
});

const KEY_UP = 'ArrowUp';
const KEY_DOWN = 'ArrowDown';

const GridExample = () => {
   // rest of the component

   const columnDefs = [
       {
           field: 'value',
           suppressKeyboardEvent={params => {
               console.log('cell is editing: ' + params.editing);
               console.log('keyboard event:', params.event);

               // return true (to suppress) if editing and user hit up/down keys
               const key = params.event.key;
               const gridShouldDoNothing = params.editing && (key === KEY_UP || key === KEY_DOWN);
               return gridShouldDoNothing;
           }
       }
   ];

   return (
       <div
           style={{
               height: '100%',
               width: '100%'
           }}
           className="ag-theme-alpine test-grid">
           <AgGridReact ...rest of the definition...> columnDefs={columnDefs} /></AgGridReact>
       </div>
   );
};
|```

const instances = gridOptions.api.getCellEditorInstances(params);
if (instances.length > 0) {
    const instance = instances[0];
}