Custom rendered cells get removed on horizontal scroll

Tags: #<Tag:0x00007efc6505c748> #<Tag:0x00007efc6505c130>
#1

Hey,

We’re increasingly using custom cell renderers to provide a more rich user experience, however we’re noticing a bit of a blocking issue around horizontal scroll.

The issue is that custom cell renderers don’t appear to be rendering consistently.

I created a simple example. I’m aware I’m using render still but I believe it’s still an issue even if we used create root here.

Are we simply just implementing this incorrectly or is this an actual issue. For the example just scroll back and fourth a few times and you will be able to recreate the issue.

https://codesandbox.io/p/sandbox/hansontable-cutom-cell-render-scroll-8764j5?file=%2Fsrc%2FApp.js

Cheers, James

#2

Hi @james.dale

This issue was caused by two things. First, the render method you were using in your custom renderers doesn’t seem to work well with our calculation logic. When I changed it to injecting HTML element directly to TD element as it is shown in our documentation, then the button doesn’t disappear. Second, the height was changing on scroll because by default rows and columns virtualization is enabled and visible row height was calculated to the heighest currently visible cell.

Now, there are few options how to handle it. You can either disable it by setting renderAllColumns={true} but that might have negative impact on the performance, similar can be achieved by enabling autoRowsSize={true} but this also might affect performance. In this case I think the most efficient way would be to set fixed row height to the highest element in the row.

Of course, you can try either of this options. Here’s your example with rowHeights set to the fixed value: https://jsfiddle.net/handsoncode/rhxc9t6s/

#3

Hi @adrian.szymanski

Cheers for responding.

I see that it’s an issue around render, any plan to address this in the future? Maybe as part of this RFC https://github.com/handsontable/handsontable/discussions/10767? For both render and createRoot?

I did also think about using renderToString but don’t think thats the right solution here. Injecting HTML is all well and good for things like the button example but the dev experience kinda sucks when it comes to more complex components.

Cheers, James

#4

@james.dale

Yes, I hope that will solve all kinds of similar problems with React methods, but I didn’t want to mention it yet as it has to yet to be tested and implemented. I’ll let you know once it’s done and released.

#5

I’m looking forward to that :champagne:

In the end I did as you suggested, and works well.

Cheers for the help as always.

#6

@james.dale

I’ll keep you updated. I’m glad that we’ve found solution for the time being and I’ll close this topic now.

#7