react component in columnDefs render function responsive

toneswitch

hullo everyone, I have dynamically created a button in createdCell function using ReactDOM.render. However, when i view the page in mobile display, the element renders as [object object]. I found out the solution is to use columnDefs render function, But how do i render a component using ReactDOM.render there?

code i'm using right now for the button :

    'targets' : [8]
     createdCell: (td, cellData, rowData, row, col) => {
            ReactDOM.render(  <button
                           onClick={() => this.props.getDelCartItem({ rowID: rowData.RowID, code: 
                            rowData.ProdCode })}
                            data-toggle='tooltip' data-placement='right' title='Delete Item From Cart'
                            className='btn btn-sm btn-danger'>
                            <i className="fas fa-times fa-lg"></i>
                              </button>
                              , td);
    }

colin

Hi @toneswitch ,

It would be better to use columns.render for that - see here.

Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Cheers,

Colin

toneswitch

Hey @colin , thanks for taking the time to answer that. sorry if i was vague, But my application is in react js and i need to render a button inside datatables which calls a react function. I've tried to recreate the problem here : https://jsfiddle.net/xrtbcw70/2/
. thing is when i resize the browser the rendered component gets changed. My goal is to be able to call a react function through a button when the browser is resized or mobile browsers. You can see in the fiddle when i resize the browser, the actual data gets rendered and not the dynamic button. I hope my explanation is clear.

allan

Hi,

So the problem here is that Responsive doesn't use the nodes from the original cell - rather it recreates the data to display using the render callback (and without passing it through createdCell). But that's not what you want in this case since you are working with DOM nodes.

Try using responsive.details.renderer set to be listHiddenNodes. That is an experimental option to have Responsive use the nodes rather than create new ones).

Allan

toneswitch

@allan Thank u much! you're a lifesaver

lfernandosilva32

@toneswitch, can you please share the code solution for this case? I'm facing the exactly same problem!

colin

The key here was Allan's line:

Try using responsive.details.renderer set to be listHiddenNodes. That is an experimental option to have Responsive use the nodes rather than create new ones).

There are examples on that page on how to set that renderer.

lfernandosilva32

Sorry @colin, I just was missing to use ( ) to have it working

    //...
       responsive: {
            details: {
            renderer: $.fn.dataTable.Responsive.renderer.listHiddenNodes()
          }
       },

Now it works properly. Thanks!

percyquilla

hi i have the same problem but it happens when i use colReorder
Example here: https://jsfiddle.net/15sjw3cz/47/

colin

We'll reply in your other thread,

Colin