If the built-in editors (checkbox, textInput, dropdown, fileSelectDialog) do not meet your needs, you can provide a customEditor function via PropertyGridProps.
The customEditor function receives the control's meta and an onChange callback. If your function returns a valid JSX element, it will be rendered instead of the default editor for that specific key.
// Example of a custom editor implementation
const myCustomEditor = (meta: AnyPropertyGridControl, onChange?: (value: unknown) => void) => {
if (meta.type === 'textInput') {
return <input type="color" onChange={(e) => onChange?.(e.target.value)} />;
}
return undefined;
};
<PropertyGrid
meta={meta}
customEditor={myCustomEditor}
onChange={(obj, key) => console.log(`Changed ${key}:`, obj)}
/>