[React] Removal of dynamic HotColumns does not work

Tags: #<Tag:0x00007f24a356a300>

Basically, I am managing React HotColumns through React state. I have added a button for adding a new HotColumn and one for removing the HotColumn. As you can see, adding one works just fine, but removing it does not do anything.

I have a code sandbox set up to provide context for this issue: https://codesandbox.io/s/handsontable-forked-6lcw98?file=/src/index.js

I am curious if this is a bug that should be fixed, if I am doing something wrong, and/or if there is another way i can dynamically add/remove HotColumnss since I am using the table in a React app and the HotColumn’s wrap custom React editors and renderers.

Thank you!

1 Like

Hi @aalcott

Unfortunately adding/removing HotColumns isn’t supported through our API. I noticed that the workaround that you used for adding the columns also throws the errors and it seems there’s no easy way to remove the columns.

So the suggestion is to use standard columns and add/remove them by using alter() method. You will still have the ability to add custom editors and renderers to those columns.

@adrian.szymanski thank you for the reply. That is a bummer, but hopefully other methods can work for now. Is that functionality anywhere on the timeline? I feel like that’s a pretty significant limitation that should at least be mentioned in documentation somewhere, as dynamic children is a pretty standard React feature.

Regarding standard columns and the alter method, can I add custom React editors and renderers to standard columns?

Hi @aalcott

Currently that functionality isn’t on our roadmap, you can report it as a feature suggestion here: https://github.com/handsontable/handsontable/issues

As for the custom editors/renderers, you would need to build them as described here: