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

Tags: #<Tag:0x00007fee3418ef78> #<Tag:0x00007fee3418ee38>

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

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.

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?

Hi @griffinv1234

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

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