Nested Table rows do not render properly

[billy_degraaf]

Hello,

I have already opened a thread about this issue, but I thought I had it resolved. Today I encountered the same problem once again. This is the closed thread about the problem.

Nested Rows HTML renderer

I am using the Nested Rows plugin for my HOT. I would like to edit the Columns prop to set a column as renderer: html and some other columns as editor: false. I got this working on a normal version without the nested rows plugin with no problems. It seems to me like i can’t use the columns property when using the nested rows plugin. I am using the react wrapper and this is the values I pass in the prop: columns={[ { editor: false }, { …

To help you debug I have created a git repo with the exact problem I am encountering.

Billydg/Handsontable-React-template

Please be noted it takes some refreshes on the page for the problem to happen. Sometimes the page even gives an error message, please ignore that.

The real problem which happens is that you can clearly see in the console.log that 53 items are served to the table, but only 45 render. This happens about every 10 refreshes.

Here is a video showing the problem, using the provided git repo:

Screen Capture on 2019-11-26 at 16-22-44.mov (video)

I hope you can give me some insights as to why this might be occurring.

Have a nice day!

[aleksandra_budnik]

Thank you for sharing all the resources. I will test it out locally.

[aleksandra_budnik]

It looks like we’re missing these records (which are in the middle of the list)

The fact that they are missing from the middle makes me really curious. I will ask our collegue to check this out on his device.

[billy_degraaf]

yes really interesting, thank you for keeping me up to date!

[aleksandra_budnik]

Hey @billy_degraaf

this task was very mysterious with the rows missing from the middle of the grid so I’ve ask for help. Here’s the information from our developer:

It seems that the client problem appears when getData function ones returns one result (e.g. sampleData ) and then return a different result (e. g. sampleData2 ). But the root of this problem is a double getData call in the componentDidMount. If we trigger it only once the problem doesn’t happen.

componentDidMount(){
    this.props.getData().then(()=>{ //these fakes some async actions to redux that are happening in my application
      this.setState({nestedTableData : this.items(this.props.data)})
    })
}

[billy_degraaf]

That seems more like a fix to make the table work, instead of actually fixing the table. But no worries, I thank you for your hard work into giving me a solution for this problem.

Have a good day.