JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<table id="example" class="display nowrap" cellspacing="0" width="100%">
  <thead>
    <tr>            
      <th>Item 1</th>
      <th>Item 2</th>
      <th>Item 3</th>
      <th>Item 4</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>            
      <td>data 1a</td>
      <td>data 1b</td>
      <td>data 1c</td>
      <td>data 1d</td>
      <td class="arrow"></td>
    </tr>
    <tr>            
      <td>data 2a</td>
      <td>data 2b</td>
      <td>data 2c</td>
      <td>data 2d</td>
      <td class="arrow"></td>
    </tr>
  </tbody>
</table>

CSS

@import url('//cdn.datatables.net/1.10.2/css/jquery.dataTables.css');
.sorting:last-child {background: transparent!important;}
td.arrow {display: flex;}
td.arrow:after {content: "\f054";font-family: FontAwesome;margin: auto;}
tr.shown td.arrow:after {content: "\f078";margin: auto;}
.tabinner {margin: 0;padding:0;border-spacing: 0;}
.tabinner thead tr th {text-align: left;font-weight:normal;font-size:12px;}

JavaScript

function format(value) {
  return '<table border="0" width="100%" class="table tabinner">\
            <thead>\
              <tr>\
                <th>FUND</th>\
                <th>AGRMNT</th>\
                <th>PROD</th>\
              </tr>\
            </thead>\
            <tbody>\
              <tr>\
                <td>DYN 2025 K</td>\
                <td>IDSA</td>\
                <td><div class="lei">FX</div></td>\
              </tr>\
            </tbody>\
          </table>';
}
$(document).ready(function () {
  var table = $('#example').DataTable({});
  // Add event listener for opening and closing details
  $('#example').on('click', 'td.arrow', 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(tr.data())).show();
      tr.addClass('shown');
    }
  });
});