JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th></th>
            <th data-search-index="0">Name</th>
            <th data-search-index="0">Position</th>
            <th data-search-index="0">Primary Office</th>
            <th data-search-index="0">Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th></th>
            <th data-search-index="0">Name</th>
            <th data-search-index="0">Position</th>
            <th data-search-index="0">Primary Office</th>
            <th data-search-index="0">Salary</th>
        </tr>
    </tfoot>
</table>

CSS

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

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>All Offices:</td>' +
            '<td>' + d.allOffices + '</td>' +
            '</tr>' +
            '</table>';
    }

$(document).ready(function () {
    
    var mdata = [
      {
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "allOffices":"Edinburgh, New York, San Francisco",
      "extn": "5421"
    },
    {
      "name": "Garrett Winters",
      "position": "Accountant",
      "salary": "$170,750",
      "start_date": "2011/07/25",
      "office": "Tokyo",
      "allOffices":"Edinburgh, New York, San Francisco",
      "extn": "8422"
    },
    {
      "name": "Ashton Cox",
      "position": "Junior Technical Author",
      "salary": "$86,000",
      "start_date": "2009/01/12",
      "office": "San Francisco",
      "allOffices":"Edinburgh, New York, San Francisco",
      "extn": "1562"
    }
]

    var table = $('#example').DataTable({
        data: mdata,
            "columns": [{
            "className": 'details-control',
                "orderable": false,
                "data": null,
                "defaultContent": ''
        }, {
            "data": "name"
        }, {
            "data": "position"
        }, {
            "data": "office"
        }, {
            "data": "salary"
        }],
            "order": [
            [1, 'asc']
        ]
    });
    
     $('#example tfoot th').each( function () {
        var title = $('#example thead th').eq( $(this).index() ).text();
      ...