Tables

 function format () {
  return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
    '<tr>'+
      '<td>Full name:</td>'+
      '<td>Name...</td>'+
    '<tr>'+
    '<tr>'+
      '<td>Extension number:</td>'+
      '<td>123</td>'+
    '<tr>'+
    '<tr>'+
      '<td>Extra info:</td>'+
      '<td>And any further details here (images etc)...</td>'+
    '<tr>'+
  '</table>';
 }

 $(document).ready(function() {
   var table = $('#expendable-data-table').DataTable({
   "className":  'details-control',
   "order": [[0, 'asc']],
   "aLengthMenu": [[20, 30, 50, 75, -1], [20, 30, 50, 75, "All"]],
   "pageLength": 20,
   "dom": '<"row align-items-center justify-content-between top-information"lf>rt<"row align-items-center justify-content-between bottom-information"ip><"clear">'
  });

  $('#expendable-data-table tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );
    if ( row.child.isShown() ) {
      row.child.hide();
      tr.removeClass('shown');
    }
    else {
      row.child( format(row.data()) ).show();
      tr.addClass('shown');
    }
   });
 });

<script src="assets/plugins/data-tables/jquery.datatables.min.js"></script>
<script src="assets/plugins/data-tables/datatables.bootstrap4.min.js"></script>