JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
<table id="data" class="table table-striped">
    <thead>
      <tr>
        <th>More Info</th>
        <th>Score*</th>
        
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

JavaScript

function format ( d ) {
      // `d` is the original data object for the row
      return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
          '<tr>'+
              '<td>Full name:</td>'+
              '<td>'+d.name+'</td>'+
          '</tr>'+
          '<tr>'+
              '<td>Extension number:</td>'+
              '<td>'+d.extn+'</td>'+
          '</tr>'+
          '<tr>'+
              '<td>Extra info:</td>'+
              '<td>And any further details here (images etc)...</td>'+
          '</tr>'+
      '</table>';
  }
    $(document).ready(function () {
      $('#data').DataTable({
        "pageLength": 25,
        responsive: true,
        ajax: '/api/data',
        columns: [
          {data: 'null', className: "dt-control", orderable: false, "defaultContent": ''},
          {data: 'ranking', searchable: false},
          
        ],
        "order": [[1, 'dsc']]
      });
    });
    $.fn.dataTable.render.ellipsis = function () {
    return function ( data, type, row ) {
        return type === 'display' && data.length > 10 ?
            data.substr( 0, 2 ) +'…'+ data.substr( -4 ) :
            data;
    }
      // Add event listener for opening and closing details
      $('#data tbody').on('click', 'td.dt-control', 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');
          }
      } );
  } );
  
   
};