Nested Rows table does not rerender

Tags: #<Tag:0x00007fd2c1242b10>
#1

Hello,

I am using the React Wrapper for HOT. The data in my nested rows table is equal to the state of the React Component. That means that when the state changes the entire table should update. For me the table does not rerender or only rerenders after I click on the expand/collapse buttons. The video shows my problem. Is there a known issue regarding this problem or is there a mistake on my end?

As you can see the table only shows the full dataset when I press the collapse button on a row.

I hope someone can help me out.

1 Like
#2

Hi,

Sorry but the video doesn’t say much how you load the data. Can you attach an example made with codesandbox or stackblitz so we can debug it?

Thanks
Wojciech

#3

I will try! Is there a codesandbox default react table I can use?

#4

Sorry, we don’t have one yet. You can fork one of our examples: https://handsontable.com/docs/7.2.2/frameworks-wrapper-for-react-hot-column.html or you can use our default JSFiddle for issues with React: https://jsfiddle.net/handsoncode/c6rgz08x/

#5

This is the main code I use. You can atleast use this to review the way I handle the data, state and the handsontable. I will try to recreate a working example as well.

#6

Here is another better example of my code in jsfiddle using the nested row example

https://jsfiddle.net/z0sqLeh5/2/

#7

I have provided a working demo

#8

Hi, sorry for the late answer. And thank you for the demo, it helped a lot to understand your use case.

Are you sure this would work in React? hotSettings are not stored in the state, so they are not updated. One of the properties is a reference to something in the state that changes on component mount but should it be recognized as a change? Static property was created before the change and copied deeper.

IMO the most efficient way would be to set data attribute to use nestedTableData directly from the state and leave hotSettings as static property that never changes: https://jsfiddle.net/7pdvq45L/

#9

I guess that tackles the issue in the jsfiddle. The main issue I am having, which I can’t really recreate in the fiddle is a huge amount of data. As showing in my video in the original post, the table doesn’t render properly the first time, only after I click on the collapse/expand buttons.

Thank you for your help so far!

#10

Hey @billy_degraaf

can you reatach the video or send it via weTransfer ?

#11

Here is a google drive link to the video.

#12

Following this because I just had two requests for this feature

#13

Thank you for sharing the video @billy_degraaf Does it help if you add renderAllRows: true to the table settings?

#14

Hey @aleksandra_budnik,

It did not seem to change the behaviour.

#15

I would need a demo then. After debugging the issue I should be able to know more.

#16

Here is a video showing some more details of the code. I will try my best to recreate the bug in a demo. A notable detail is that the dataset is not big by any means.

1 Like
#17

I got the problem fixed finally. I added some extra setState functions inside the componentDidUpdate function of react. This somehow fixed the bug and made the table render correctly.
Thank you for all the effort!

I ended up creating a react HOT template for bootstrapping the handsontable. Fork the repo to see the most default react handsontable for future testing etc.

#18

And thank you for effort to share the investigation results, Billy. I’m glad to see this solved.