Datatables responsive plugin displays Reactstrap (Bootstraps 4) buttons as objects

Question

Good day, I'm running a server side datatable script in my React js app and i managed to get it to display my reactstrap buttons like so:

"columnDefs": [
   {
     "targets": 4,
     "data": null,
     "createdCell": function (td, cellData, rowData, row, col){
       return _this.datatableButtons(td);
    }
  }
]
datatableButtons(td) {
  ReactDOM.render( 
    <ButtonGroup>
      <Button className="btn-icon btn-icon-only" color="primary" title="Edit Branch">
       <i className="pe-7s-pen btn-icon-wrapper"> </i>
      </Button>
      <Button className="btn-icon btn-icon-only" color="warning" title="Activate Branch">
       <i className="pe-7s-switch btn-icon-wrapper"> </i>
      </Button>
      <Button className="btn-icon btn-icon-only" color="danger" title="Delete Branch" onClick={() => this.deleteBranch()}>
       <i className="pe-7s-trash btn-icon-wrapper"> </i>
      </Button>
    </ButtonGroup>, td);
}

This is great, but whenever i test it for it's responsive view it doesn't display the buttons anymore but shows this instead [object Object] on all the hidden table rows. I'd love to know if there is a solution to this.

Answer 1

I managed to solve it by adding this code:

      'responsive': {
        details: {
            renderer: function ( api, rowIdx, columns ) { 
                var data = $.map( columns, function ( col, i ) {
                  if(col.columnIndex == 3) {
                    var result = '';
                    if (col.hidden) {
                      result = '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                                  '<td>'+
                                    '<ul class="dtr-details">'+
                                      '<li>'+
                                        '<span class="dtr-title">'+col.title+':'+'</span>&nbsp;&nbsp;&nbsp;';

                        if($.trim(col.data.activate).toUpperCase() == 'ACTIVE')
                          result += '<label class="switch"><input type="checkbox" name="active" value="active" checked /><span class="slider"></span></label>';
                        else
                          result += '<label class="switch"><input type="checkbox" name="active" value="active" /><span class="slider"></span></label>';

                          result += '</li>'+
                                  '</ul>'+
                                '</td>'+
                              '</tr>';
                    }
                    return result;
                  }else if(col.columnIndex == 4) {
                    return col.hidden ?
                          '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                              '<td>'+
                                '<ul class="dtr-details">'+
                                  '<li>'+
                                    '<span class="dtr-title">'+col.title+':'+'</span>&nbsp;&nbsp;&nbsp;'+
                                    '<div class="btn-group">'+
                                      '<button type="button" class="btn btn-icon btn-icon-only btn-primary" title="Edit Branch"><i class="pe-7s-pen btn-icon-wrapper"> </i></button>'+
                                      '<button type="button" class="btn btn-icon btn-icon-only btn-danger delete_branch" id="del_'+col.rowIndex+'"><i class="pe-7s-trash btn-icon-wrapper"> </i></button>'+
                                    '</div>'+
                                  '</li>'+
                                '</ul>'+
                              '</td>'+
                          '</tr>' :
                          '';
                  } else {
                    return col.hidden ?
                          '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                              '<td>'+
                                '<ul class="dtr-details">'+
                                  '<li>'+
                                    '<span class="dtr-title">'+col.title+':'+'</span>'+
                                    '<span class="dtr-data">'+col.data+'</span>'+
                                  '</li>'+
                                '</ul>'+
                              '</td>'+
                          '</tr>' :
                          '';
                  }  
                } ).join('');

                return data ?
                    $('<table/>').append( data ) :
                    false;
            }
        }
      }

I used vanilla bootstrap instead