Hello.
I tried to register react-component-based editor.
However, I get the error below:
Uncaught TypeError: Cannot set properties of null (setting ‘TD’)
at prepare (handsontable.full.min.js:933:164321)
at EditorComponent.value (baseEditorComponent.tsx:110:62)
at EditorComponent.prepare (show/?editor_console=:123:7)
Thank you for contacting us. The editor is registered correctly in your example, but if you want to use component-based editor it has to be declared as followed to work correctly:
I checked this deeper, and it looks like registering custom editor alias doesn’t work for component-based editors, so it can’t be defined within columns option. I reported it internally for further investigation.
For now, the workaround would be to use cells function and chose particular rows or range of rows to reset the editor to the default one where you don’t want to use custom editor. Here’s an example: https://jsfiddle.net/handsoncode/9fxkauz6/
I leave a solution for people experiencing the same problem as me. (Caution: This solution is close to a hack and may not work if the handsontable react wrapper version is updated. I tested it on version 14.2.)
Most of the code is taken from handsontable source code.
Using the function below, you can convert react component based editor to class based editor.
Therefore, it is possible to overcome two limitations of react-based editors (editor cannot be applied only to specific cells / multiple types of editors cannot be used).
I heard on handsontable’s official blog that there will be a large-scale react wrapper update soon. (I’m really looking forward to it.) I am very grateful to the handsontable team who continues to develop handsontable.