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

$(document).ready(function() {

    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.';
    }

    $.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);
        } else {
            tr.addClass('details');
            row.child(format(row.data())).show();

            // Add to the 'open' array
            if (idx === -1) {
                detailRows.push(tr.attr('id'));
            }
        }
    });




    var dt = $('#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
            },
            {
               ...