JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Age</th>
            <th>Salary</th>
          </tr>
        </thead>



        <tbody>
          <tr class="result-row">
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>61</td>
            <td>$3,120</td>
          </tr>
          <tr class="detail-row hide">
            <td><p>Full Name: Tiger Nikola Nixon</p></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          
        </tbody>
      </table>
    </div>
    
    <br>
    <br>
    <br>
    <br>
    
    <div id="add"><button>Add row</button></div>
  </body>
</html>

CSS

.hide{
  display:none;
}

JavaScript

$(document).ready( function () {
  var table = $('#example').DataTable({
    "bSort": false,
    /* the problem is here, it won't work if I enable sorting*/
  });
  
  function appendRow() {
            var t = $('#example').DataTable();                        
           
            var node = t.row.add([
                "James Bond",
              "Spy","55","$9000"
                ]).node();

            var node2 = t.row.add([
              "<p>Full Name: James Bond Larry</p>",
                null,
                null,
                null
                ]).draw().node();

            $(node2).addClass('detail-row hide');
                
            $(node).addClass('result-row').hide().fadeIn('normal');
        };
  
  $('#add').click(function(){
    appendRow();
  });
  
  $('#example tbody').on('click','.result-row',function(){
            var tr = $(this).next('.detail-row');
            if(tr.hasClass('hide')){
                tr.removeClass('hide');
            }else{
                tr.addClass('hide');
            }
        });
  
} );