JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.css">
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.css">
<table id="data" class="table table-striped">
    <thead>
      <tr>
        <th>More Info</th>
        <th>Score*</th>
        <th>Team Wallet</th>
        <th>Team Name/ID</th>
        <th>Direct referrals</th>
        <th>Total team</th>
        <th>Deposit</th>
        <th>Claimed</th>
        <th>Airdrop send</th>
        <th>Airdrop recived</th>
        <th>Join Team</th>
        
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

CSS

td.details-control  {
    background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center !important;
    cursor: pointer;
}
tr.dt td.details-control {
    background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center center;
}

JavaScript

function format ( d ) {
    return 'Full name: '+d.player+' '+d.ranking+'<br>'+
        'Salary: '+'Hello'+'<br>'+
        'The child row can contain any data you wish, including links, images, inner tables etc.';
}
    $(document).ready(function () {
      $('#data').DataTable({
        "pageLength": 25,
        ajax: {
        url: 'https://api.npoint.io/489a65aa031a55c3ec22'
        },
        columns: [
          {data: 'null', "class":'details-control', orderable: false, "defaultContent": ''},
          {data: 'ranking', searchable: false},
          {data: 'player',orderable: false, render: $.fn.dataTable.render.ellipsis()},
          {data: 'id',orderable: false, searchable: false},
          {data: 'referrals', searchable: false},
          {data: 'total_structure', searchable: false},
          {data: 'deposits', searchable: false},
          {data: 'payouts', searchable: false},
          {data: 'airdrop_send', searchable: false},
          {data: 'airdrop_recived', searchable: false},
          {data: 'player', "mRender": function(data, type, full) {
            return '<a class="btn btn-info btn-sm" href=https://drip.community/faucet?buddy=' +  data + '>' + 'Join team' + '</a>';}}
        ],
        "order": [[1, 'dsc']]
      });
    });
    $.fn.dataTable.render.ellipsis = function () {
    return function ( data, type, row ) {
        return type === 'display' && data.length > 10 ?
            data.substr( 0, 4 ) +'…'+ data.substr( -4 ) :
            data;
    }
    // Array to track the ids of the details displayed rows
    var detailRows = [];
 
    $('#data tbody').on( 'click', 'tr td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = dt.row( tr );
        var idx = $.inArray( tr.attr('id'), detailRows );
 
        if ( row.child.isShown() ) {
            tr.removeClass( 'details' );
            row.child.hide();
 
            // Remove from the 'open' array
            detailRows.splice( idx, 1 );
       ...