updateSettings is working but the table is getting hidden once the function is executed

Tags: #<Tag:0x00007f51b8e008d8> #<Tag:0x00007f51b8e006f8>
#1

Hi Team,
I am using the updateSettings method to update the columns (basically adding a new column to the existing columns). Also updating the data using the loadData method.
At the console, I can see all the values are getting updated but the table is getting hidden once the method completes.
I do not understand what the issue is. Can someone help me out?
Before - I have only 1 column.
image
After - looks like the columns are added but height is 0
image
My addColumn method -

image
image.png1223×477 30.7 KB

This is the container of the table and the div for + icon
image
image.png871×212 8 KB

This is the table creation code -
image
image.png1040×658 26.7 KB

Please help me out.

Thanks

#2

Hi @adutta

Could you please add the remaining settings to this demo https://jsfiddle.net/rwk8dnzy/?

I added your button logic but there is something missing.

Also please specify the version Handsontable/framework that you use.

#3

Hi @aleksandra_budnik looks like there is some issue with react-dom. Not sure how to resolve this.
I have reproduced the issue here - https://codesandbox.io/p/sandbox/hy6y98
And also I got the issue. So when I’m giving overflow as auto to the parent div of the table component, then the table is not displayed.

Here is my expectation -
Initially, as I had only 1 column both the column and the button “Add Column” it will show side-by-side. But as I keep on adding new columns the width will grow. I want to give the horizontal scroll only to the table div and want the Add Column button to be displayed at the rightmost part of the screen.

Can you please check how this can be achieved?

Thanks

#4

Hi @adutta

Thank you for sharing the demo. I see what is up.

You need to ensure that .table-content has explicit width and height set (e.g., via CSS or inline styles). Without defined dimensions, the overflow: auto rule won’t take effect properly, and table won’t be displayed.

#5

But if we set the height and width explicitly then the “Add Column” button will always be at the right side of the specified width.
Is it possible to update the width of the container every time we add a new column and then fix it once it reaches a limit?

#6

Setting up max-width would not work (just like setting no width at all). The only way would be to alter the CSS width value via JS upon the beforeCreateCol hook.

#7