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 an accepted answers - jump to answer

Answers

  • colincolin Posts: 4,647Questions: 0Answers: 815

    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 17

    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: 49,486Questions: 1Answers: 7,278 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 :)

Sign In or Register to comment.