Using cell renderers with autoColumnSize in React

Tags: #<Tag:0x00007efc64b04598> #<Tag:0x00007efc64b04430>
#1

I need to use cell renderers in my React application. But the issue seems to be that cell renderers doesn’t play nice with autoColumnSize, which I also really need to use.

Are there ways to use both, or some workaround to apply conditional classes to cells? I am only adding styling or class names for background coloring in my renderers and should be able to rely on the default column width calculation in HoT.

Also what am I doing wrong here: https://codesandbox.io/s/zealous-lake-51bo0q?file=/src/App.tsx
The values in the column with cell renderer doesn’t show?

#2

Hi @mottosson

That’s true, autoColumnSize and autoRowSize can’t be currently used with component-based renderer, we mention it here: https://handsontable.com/docs/react-data-grid/cell-renderer/#declare-a-custom-renderer-as-a-component

Using the renderer just for background change isn’t necessary, instead you can use cells option and get the same result while still being able to use auto size options. Here’s an example:

https://jsfiddle.net/aszymanski/sduz9nhx/

#3

Thanks @adrian.szymanski. I’ll try it out.

Do you know if there are any difference in perfomance between using cells function or renderer? Should be more or less the same, right?

#4

There shouldn’t be any noticeable difference.

#5

Are there any difference in when a cell renderer runs vs when a cells function runs?

I’m trying to get cellMeta in the cells function, but that triggers crash due to too much recursion. I don’t understand why getCellMeta triggers another run of the cell function. Any idea how to resolve that issue?

https://jsfiddle.net/op9ds3f6/ (check your regular browser console for error message, not the jsfiddle console)

#6

Hi @mottosson

The solution here is to use another hook to get the cell meta, for example afterRender: https://jsfiddle.net/aszymanski/qf3hzmo9/

Also, you need to provide specific row and column indexes for getCellMeta as it contains many information and will result in crash if you would get all of them at the same time.

#7

Hm, that’s not quite what I had in mind. I need to check the cell meta for each cell. Preferrably on render, Like it would be great to have a afterCellRender(row, col, cellMeta) or something like that. I want to conditionally set background colors depending on the value of the cell and compared to a field on the metadata of each cell. That’s why I originally wanted to use cell renderers.

#8

I see, so it looks to me like you would need something called cell dependencies here. We have a blog entry (with the examples) that might be helpful in your case: https://handsontable.com/blog/expand-your-app-with-cell-dependencies

#9

Cell dependencies is a solution for a different problem I have, so thank you for that. I don’t think that’s a solution for this issue however.

After using the cells method for a bit I’ve come to the conclusion that it is not working at all.

Since it runs for every cell in the table, not just visible cells, it gets really slow with just a few rows and columns. This is unfortunately stopping me from moving forward.

Or are there a any other way to solve this? Since cell renderers is also out of the picture I don’t have any other ideas right now.

It get the feeling that HoT doesn’t quite work well with React at the moment. Unless you really tread down the happy path. So many workarounds and bugs. It’s unfortunate :confused:

I think I really need cell renderers to solve my problem… But without autoColumnSize it’s not a satisfying solution still.

EDIT: I think there might have snuck in a table.render() in a hot loop causing the performance to drop. Still cells function caused a crash when I’m hiding the table, so I don’t want to use that anyway.

What I have noticed however is that adding cell renderers to column settings does work in my simple case. Just adding a class to the cell element in a renderer does not seem to cause any problems and autoColumnSize still seems to work. I would like to add the renderer to the entire table, but that does not work for some reason…

I am using a couple useRef:s to store table settings and my own cell meta. Feels a bit clunky, but if it works it works I guess.

#10

Hi @mottosson

That’s correct, if you use custom renderer inside columns and not as a component, then auto size options will work fine.

And if you’d like to attach the renderer to the whole table, it’s also possible to do it this way. Here’s an example: https://jsfiddle.net/aszymanski/7g0yh63r/

You can also narrow the renderer to the specific rows or cells by using conditional statements.

#11

Oh, I see. Thanks a lot!

#12