[React] Removal of dynamic HotColumns does not work

Tags: #<Tag:0x00007efc7283d3d8>
#1

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
[GH 7566] [React] Removal of dynamic HotColumns
Removing HotColumn
#2

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.

#3

@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?

#4

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:

#5

Is there an update on when this bug will be fixed?

Not being able to remove columns is really hurting our functionality. We also cannot use custom editors/ renderers as we need to render react components, which we are only able to do using HotColumns.

#6

+1 @nick. We are experiencing the same pain caused by this.

#7

@nick @aalcott

The good news is that in the nearest future we will focus on React related issues so there’s high possibility this problem will be addressed also.

#8

Hi @aalcott ,

I was able to use ReactDOM to render custom react components to cells. I built a custom cell renderer that looked something like this:

import ReactDOM from “react-dom”;
import { registerAllModules } from ‘handsontable/registry’;
import Handsontable from ‘handsontable’;
import CustomComponent from ‘./CustomComponent’

registerAllModules();

function renderCustomComponent(hotInstance, td, row, column, prop, value, cellProperties) {
return
}

export function render(hotInstance, td, row, column, prop, value, cellProperties) {
let div = document.createElement(‘div’);
ReactDOM.render(renderCustomComponent(hotInstance, td, row, column, prop, value, cellProperties), div);

Handsontable.dom.empty(td);
td.appendChild(div);
}

I also used setCellMeta and setCellMetaObject to pass any other props that I needed to the component other than the value.

Hope that helps.

#9