How to apply ellipses/word wrap on custom renderers?

Questions
,
1

So i was trying to toggle word wrap on custom renderers but I am not able to.
Demo: Handsontable example - JSFiddle - Code Playground

2

Hi @abhay.gupta

We introduced the textEllipsis option in Handsontable 16.0 so there’s no longer need to do this as a custom solution: Options API reference - JavaScript Data Grid | Handsontable

3

but will this work for custom renderers?

4

It’s a global option so you don’t have to declare it additionally in custom renderer.

5

Actually the issue that I was facing was that when I tried using word wrap with custom renderers, it wasn’t working as expected. So will the same issue occur with this new option?

6

@adrian.szymanski here’s a demo: handsontable - StackBlitz

I tried the ellipses option in this with and without custom renderer (comment/uncomment the custom renderer passed as child to HotColumn) and you can see that both word wrap and textEllipsis options only work when when custom renderer is not being used.

7

@abhay.gupta

I’ll look into it and get back to you tomorrow.

8

Hello, any update on this?

9

Hi @abhay.gupta

I got the confirmation form our developers that it’s a correct behavior, and the textEllipsis option will be overridden by the custom renderer. However, there is an option to make it work with custom renderers. Here’s an example: handsontable (duplicated) - StackBlitz . That’s the key part:

const CustomTextRenderer = (props) => {

const { value, cellProperties} = props;

const className = cellProperties.textEllipsis ? ‘htTextEllipsis’ : ‘’;

return

{value}
;

};