Responsive tables and data set via data attribute is missing details expander

rutger1413

When setting data using the data option, the details expand icon does not appear. Clicking on the first column will show the details with the collapsed columns. I am using dynamic number of columns and also rendering the table headers dynamically in php.

  $.getJSON('URL', function(return_data) {
      table = $('#table').DataTable({
        responsive: true,
        searching: false,
        ordering:  false,
        paging: false,
        info: false,
        data:return_data.table_data
      });
  });

<table id="table" class="table table-striped table-hover responsive compact cell-border" cellspacing="0" >
   <thead>
      <tr>
        <th colspan="{{count($rows)+1}}" style="text-align: center; "><h4>SOMETHING</h4>    </th>
</tr>
<tr>
    <th>One</th>
      @foreach ($rows as $row)
     <th>{{$row->data}}</th>
     @endforeach
</tr>
</thead>
<tbody>
</tbody>
</table>