How to use React component as custom renderer in cells option

Getting help Questions
,
1

Hello,

I’m trying to use a custom renderer to render a React component like the below example. However, the table would not return anything. Could you guide me the proper way to handle this?

FYI, I cannot use HotColumn like below example, because I’m using cells option which overrides HotColumn.

2

Hi @hjeong1200

Custom renderer declared as a component can’t be used like this, it has to be declared in a HotColumn to work correctly.

3

Hi @adrian.szymanski,

Thank you for the answer.
Do you have any feature plans for it to be added?

4

@hjeong1200

Currently we are working on refactoring our React wrapper so this behavior might change in the future. I will update you if that behavior will change after we implement it.

1 Like
5

I was able to create a custom renderer that took a callback function that returned a react element. The params of the callback can be all the data from the source and it renders the element.

My renderer function is defined like this

const renderReactFn = (cb: (data: unknown) => ReactElement) => function(instance, TD, row) {
    const data = instance.getSourceDataAtRow(row)

    const container = document.createElement('div');
    const root = ReactDOM.createRoot(container);
    const el = cb(data);
    root.render(el);

    TD.innerHTML = '';
    TD.appendChild(container);
    TD.style.backgroundColor = 'transparent';
    // ... do other stuff
    return TD;
}

Lastly, in my column definition you can do something like this:

{
    renderer: renderReactFn((data) => {
        // do something with the data...
        return <MyComponent />;
    })
}

This might not be the most ideal solution but it’s working for us.

Edit: changed element to a div so that the browser doesn’t complain about block elements being within inline elements.

6

Hi @danibrear

Thank you for sharing this solution, we really appreciate it.

1 Like