JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.0/css/responsive.dataTables.min.css">
<script src="https://cdn.datatables.net/responsive/2.2.0/js/dataTables.responsive.min.js"></script>
<div id="test">
  <table>
    <thead>
      <tr>
        <td></td>
        <td>H1</td>
        <td>H2</td>
        <td>H3</td>
        <td>H4</td>
        <td>H5</td>
        <td></td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td>D1</td>
        <td>D2</td>
        <td>D3</td>
        <td>D4</td>
        <td>D1</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>D1</td>
        <td>D2</td>
        <td>D3</td>
        <td>D4</td>
        <td>D1</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>D1</td>
        <td>D2</td>
        <td>D3</td>
        <td>D4</td>
        <td>D1</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>D1</td>
        <td>D2</td>
        <td>D3</td>
        <td>D4</td>
        <td>D1</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>D1</td>
        <td>D2</td>
        <td>D3</td>
        <td>D4</td>
        <td>D1</td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

CSS

td.control, td.control-mytext {
  background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;
  cursor: pointer;
}

tr.shown td.control {
  background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;
}

div.slider {
  display: none;
}


table.dataTable tbody td.no-padding {
  padding: 0;
}

JavaScript

function format ( d ) {
    // `d` is the original data object for the row
    return '<div class="slider">'+
        '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
            '<tr>'+
                '<td>Full name:</td>'+
                '<td>OK</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Extension number:</td>'+
                '<td>OK</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Extra info:</td>'+
                '<td>And any further details here (images etc)...</td>'+
            '</tr>'+
        '</table>'+
    '</div>';
}

var tbl = $("#test table").DataTable({
  responsive: {
    'details': {
      'type': 'column',
      'target': 9
    }
  },
  'columnDefs': [
  {
    'data': null,
    'defaultContent': '',
    'className': 'control-mytext',
    'orderable': false,
    'targets': 0
  }],
  'columns': [{
    'data': null
  }, {
    'data': 0
  }, {
    'data': 1
  }, {
    'data': 2
  }, {
    'data': 3
  }, {
    'data': 4
  },{
    'data': 5
  }, ],
  'select': {
    'style': 'multi',
    'selector': 'td:not(.control)'
  }
});
tbl.on('click', 'tr td.control-mytext', function() {
  var tr = $(this).closest('tr');
  var row = tbl.row(tr);

  if (row.child.isShown()) {
    tr.removeClass('shown');
    $('div.slider', row.child()).slideUp( function () {
      row.child.hide();
      
    } );
  } else {
    row.child( format(row.data()), 'no-padding' ).show();
    tr.addClass('shown');
    $('div.slider', row.child()).slideDown();
  }
});