JSFiddle - React, Tailwind, and code Playground

by Parag Bhayani

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>

  <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>
          <td>Tiger Nikola Nixon</td>
        </tr>
      </tbody>
    </table>
  </div>

  <br>

  <div id="add">
    <button>Add row</button>
  </div>
</body>

</html>

CSS

.hide {
  display: none;
}

JavaScript

$(document).ready(function() {
  /* Formatting function for row details - modify as you need */
  function format(d) {
    console.log(d);
    // `d` is the original data object for the row
    return '<table cellpadding="4" cellspacing="0" border="0" style="padding-left:50px;">' +
      '<tr>' +
      '<td>Name:</td>' +
      '<td>' + d[0] + '</td>' +
      '</tr>' +
      '<tr>' +
      '<td>Full Name:</td>' +
      '<td>' + d[4] + '</td>' +
      '</tr>' +
      '<tr>' +
      '<td>Extra info:</td>' +
      '<td>And any further details here (images etc)...</td>' +
      '</tr>' +
      '</table>';
  }

  var table = $('#example').DataTable({
    "columnDefs": [{
        "targets": [4],
        "visible": false,
        "searchable": 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", "James Bond Larry"
    ]).draw().node();

    console.log(node);
    $(node).addClass('result-row').hide().fadeIn('normal');
  };

  $('#add').click(function() {
    appendRow();
  });

  $('#example tbody').on('click', '.result-row', function() {
    var tr = $(this).closest('tr');
    var row = table.row(tr);

    if (row.child.isShown()) {
      // This row is already open - close it
      row.child.hide();
      tr.removeClass('shown');
    } else {
      // Open this row
      row.child(format(row.data())).show();
      tr.addClass('shown');
    }
  });
});