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><input type="checkbox" id="checkAll"></th>
            
            <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>
</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 '<div class="slider"><table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
            '<tr>' + 
            '<td><input type="checkbox" id="checkIdElement">Full name:</td>' +
            '<td>' + d.name + '</td>' +
            '</tr>' +
            '<tr>' +
            '<td><input type="checkbox" id="checkIdElement">Parameter 1:</td>' +
            '<td class="extNo">' + d.extn + '</td>' +
            '</tr>' +
            '<tr>' +
            '<td><input type="checkbox" id="checkIdElement">Parameter 2:</td>' +
            '<td>' + d.allOffices + '</td>' +
            '</tr>' +
            '</table></div>';
    }

$(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 details = [];
    var table = $('#example').DataTable({
        data: mdata,
          columns: [
              {
					'render': function (data, type, full, meta){
						return '<input type="checkbox" id="rowRecord">';
					},
					'targets': 0,
					'searchable':false,
					'orderable':false,
			},
              
              {
            className: 'details-control',
            orderable: false,
            data: null,
           ...