JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css">
<body>
<table id="brands" cellpadding="0" cellspacing="0" border="0" width="100%">
  <thead>
    <tr>
      <th>Year</th>
      <th>Brand</th>
      <th>Sales details</th>
    </tr>
  </thead>
  <tbody>
      <tr>
          <td>2011</td>
          <td>Nokia</td>
          <td>click</td>
      </tr>
      <tr>
          <td>2014</td>
          <td>Samsung</td>
          <td>click</td>
      </tr>
      <tr>
          <td>2010</td>
          <td>Alcatel</td>
          <td>click</td>
      </tr>
      <tr>
        <table id="brandse" cellpadding="0" cellspacing="0" border="0" width="100%">
  <thead>
    <tr>
      <th>Year</th>
      <th>Brand</th>
      <th>Sales details</th>
    </tr>
  </thead>
  <tbody>
      <tr>
          <td>2011</td>
          <td>Nokia</td>
          <td>click</td>
      </tr>
      <tr>
          <td>2014</td>
          <td>Samsung</td>
          <td>click</td>
      </tr>
      <tr>
          <td>2010</td>
          <td>Alcatel</td>
          <td>click</td>
      </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Year</th>
      <th>Brand</th>
      <th>Sales details</th>
    </tr>
    
  </tfoot>
</table>
      </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Year</th>
      <th>Brand</th>
      <th>Sales details</th>
    </tr>
    
  </tfoot>
</table>
</body>

JavaScript

function format ( d, id ) {
    return '<table id="'+id+'" "cellpadding="0" cellspacing="0" border="0" width="100%">'+
        '<thead>'+
        '<tr>'+
            '<th>Phones</th>'+
            '<th>Laptops</th>'+
            '<th>MP3</th>'+
        '</tr>'+
        '</thead>'+
        '<tbody>' +
            '<tr>'+
                '<td>100</td>'+
                '<td>200</td>'+
                '<td>300</td>'+
            '</tr>'+
            '<tr>'+
                '<td>1000</td>'+
                '<td>2000</td>'+
                '<td>3000</td>'+
            '</tr>'+
            '<tr>'+
                '<td>10000</td>'+
                '<td>20000</td>'+
                '<td>30000</td>'+
            '</tr>'+
        '</tbody>' +
    '</table>';
}

$(document).ready(function(){
    var table = $('#brands').DataTable( {
        "paging": false,
        "searching": true,
        "info": true,
        "ordering": true
    });
     var table = $('#brandse').DataTable( {
        "paging": false,
        "searching": true,
        "info": true,
        "ordering": true
    });

    var oT = [];

    var sTableSettings = {
            "paging": true,
            "searching": true,
            "info": true,
            "ordering": true
        };

    // Add event listener for opening and closing details
    $('#brands tbody').on('click', 'td', function () {
        var tr = $(this).closest('tr');
        
        var row = table.row( tr );

        var cellIdx = table.cell( this ).index().columnVisible;
        
        if (cellIdx == 2){
        
            var rowIdx = table.cell( this ).index().row;
            sTableId = "nestedTable_" + rowIdx;

            if ( row.child.isShown() ) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
                oT[rowIdx].fnDestroy();
            }
            else {
                // Open this row
                row.child(...