React Data Grid

Edit Components

react logo

A Cell Editor Component is the UI that appears, normally inside the Cell, that takes care of the Edit operation. You can select from the Provided Cell Editors or create your own Custom Cell Editor Components.

The example below shows some Provided Editor Components and some Custom Editor Components.

Custom Components

To configure Custom Cell Editors, first enable the grid option reactiveCustomComponents.

Custom Cell Editor Components are Controlled Components, which receive a value as part of the props, and pass value updates back to the grid via the onValueChange callback. The value is not set until editing stops.

export default ({ value, onValueChange }) => {
   return (
       <input
           type="text"
           value={value || ''}
           onChange={({ target: { value }}) => onValueChange(value === '' ? null : value)}
       />
   );
}

Enabling reactiveCustomComponents affects all custom components. If you have custom components built in an imperative way instead of setting the reactiveCustomComponents option, they may need to be rebuilt to take advantage of the new features that reactiveCustomComponents offers. Using custom components built in an imperative way is now deprecated, and in AG Grid v32 the reactiveCustomComponents option will be true by default. See Migrating to Use reactiveCustomComponents. For the legacy imperative documentation, see Imperative Cell Editor Component.

The provided props (interface CustomCellRendererProps) are: