[GH #7566] Row height issue when using react custom renderer

Tags: #<Tag:0x00007f8b1dc3cf80> #<Tag:0x00007f8b1dc3cda0>
#1

Hi,

I’m having an issue with react custom renderer. It seems that, if rendered cell content is bigger, than rest of the row, row height (row numbers, cell selection) is incorrect. I’ve tried to recreate this in sandbox (https://codesandbox.io/s/modest-lewin-gu2o41). image
Scroll is also seems to behave strangely. If I open cell editor, then scroll to the right, then to the left, it starts to look like this image
I’ve tried to replace react renderer with TextRenderer and it worked fine.

I’m also having the same issue with react custom editor (also in sandbox). Example in the docs suggests using absolute positioning for the editor, but I need to render it inside the cell. I was able to do this with react portal. But row height seems to be incorrect as well.image
Am I doing this wrong? Is there even a way to render react editor inside table cell?

Thanks

#2

Hi @griffinv1234

This is a problem related to this issue: https://github.com/handsontable/handsontable/issues/7566

If you set a custom renderer as a function inside columns it works correctly: https://codesandbox.io/s/nostalgic-jang-tivt86

We will try to focus on this issue as soon as possible. I’ll update you.

#3

Hi

Thanks for the answer. I’m not quite sure I understand what you mean by “set a custom renderer as a function inside columns”. Can you, please, elaborate further. The provided sendbox seems identical to the one I sent you. Am I missing something?

#4

Hi @griffinv1234

I’m sorry, it looks like I pasted wrong example. Here you can see what I meant:

https://jsfiddle.net/aszymanski/wt35gq8y/

#5

@adrian.szymanski Hi, can you tell me this problem is resolved? i have handsontable: “12.3.3” version

#6

Hi @pabear666

the main issue https://github.com/handsontable/handsontable/issues/7566 is still open (we did not fix it yet). However, me or @adrian.szymanski will update you as soon as we publish an official fix.

1 Like
#7

Hi, I am also running into this issue.

The react custom renderer feature is unfortunately almost unusable with these bugs.

Cell selection & scrolling is very buggy when using custom react renderer.

Also the suggestion from @adrian.szymanski is not helpful, as the renderer function inside columns does not allow to render react components / JSX, but you have to stick to plain old javascript.

#8

Hi @tim.fischer

We understand, that it’s problematic, and I hope it will be fixed as soon as possible. We will update this thread once it’s done.