How to re-initialize columns when using <Hotcolumn>

Tags: #<Tag:0x00007efc64e79228>
#1

I had a working example of code that would allow me to dynamically fetch data, and then dynamically update the columns in the settings via the state. When I loaded a new table, it correctly re-rendered the table with the appropriate columns.

I needed to add a new custom renderer/editor for my react app, and the way I got this working was to use the module. I got this working, and I setup the code so that it dynamically re-renders the based on the state.

However what’s happening now is it retains columns from previous table loaded.
For example, if I i load table with 5 columns, it works. I then choose to load table with 3 columns and it still shows 5 columsn.

What happens is it correctly updates header for 1st 3 columns, but 2 remain from previous table load. I can’t seem to “refresh” the entire table at this point.

I believe I need to use the in order to correctly render my custom editors, etc, but I need some way of completely refreshing grid when it’s loaded with new data.

Any help is appreciated?

Another thought. Is is possible to use the Column settings instead of HotCoilumn and pass the React Component names as the custom editor /renderer? Using the columns attribute when I refresh the state settings works…it’ just when dynamically creating the I have this issue.

[VUE-184] Can't dynamic add columns when use HotColumn
#2

Hey @mhennessy7

Have you considered adding maxCols via hot.updateSettings while you load fewer columns then before? That is more like a workaround but since you did not share any demos I could only guess what can work as a workaround.

#3

Thanks for the reply, I did find a work around that seems to work.
Whenever the code that re-renders the columns runs (like after removing a column), I set this before it loops through creating new column array.

this.hotTableComponent.current.columnSettings =[];

And that seems to solve it.

#4

Thank you for the update.

I guess that we can close this topic.

#5