DataTables with nested table

DataTables with nested table

by jordan_josh3184

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.0.0/js/dataTables.rowReorder.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/rowreorder/1.0.0/css/rowReorder.dataTables.css">
<small>Related to <a href="https://stackoverflow.com/q/60941206/1407478" target=_blank>Stackoverflow: nested table with datatables</a>
 </small>
 <hr>
 <table id="example" class="table table-striped">
        <thead>
            <tr>
                <th>Image</th>
                <th>Date</th>
                <th>TC NAME</th>
                <th>NS FLOW</th>
                <th>SN FLOW</th>
                <th>NS FLOW</th>
                <th>SN FLOW</th>
                <th>NS FLOW</th>
                <th>SN FLOW</th>
            </tr>
        </thead>
        <tbody>

            <tr>
                <td>721</td>
                <td>3/15/20</td>

                <td>
                    <table id="example1" class="table table-nostriped">
                        <tr>
                            <td>TC1</td>
                        </tr>
                        <tr>
                            <td>TC2</td>
                        </tr>
                        <tr>
                            <td>TC3</td>
                        </tr>
                    </table>

                </td>

                <td>
                 <table class="table table-nostriped">
                        <tr>
                            <td>100</td>
                        </tr>
                        <tr>
                            <td>300</td>
                        </tr>
                        <tr>
                            <td>600</td>
                        </tr>
                    </table>
                </td>

                <td>
                 <table class="table table-nostriped">
                      ...

CSS

table.dataTable td table thead {
  display: none;
}

JavaScript

const columns = [
  { title: '' },
]
let table = $('#example').DataTable({
  createdRow: function(row) {
    $(row).find('td table')
      .DataTable({
        columns: columns,
        dom: 'tf'
      })
  }
})