react component in columnDefs render function responsive

react component in columnDefs render function responsive

toneswitchtoneswitch Posts: 3Questions: 1Answers: 0

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);
    }

This question has accepted answers - jump to:

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • toneswitchtoneswitch Posts: 3Questions: 1Answers: 0
    edited May 2019

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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

  • toneswitchtoneswitch Posts: 3Questions: 1Answers: 0

    @allan Thank u much! you're a lifesaver :)

  • lfernandosilva32lfernandosilva32 Posts: 3Questions: 1Answers: 1

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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.

  • lfernandosilva32lfernandosilva32 Posts: 3Questions: 1Answers: 1
    Answer ✓

    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!

  • percyquillapercyquilla Posts: 3Questions: 0Answers: 0
    edited June 2021

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    We'll reply in your other thread,

    Colin

Sign In or Register to comment.