JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<div id="control-panel">
            <div id="checkbox-filter-div"><input type="checkbox" id="checkbox-filter" /> Free Handset</div>
            <div id="dropdown-filter-div">Offers/Gifts: </div>
</div>

<table id="example" class="display" cellspacing="0" width="100%">
     <thead>
            <tr>
                <th>+</th>
                <th>head1</th>
                <th>head2</th>
                <th>head3</th>
                <th>head4</th>
                <th>Filter1-gift</th>
                <th>Filter2-upfrnt</th>
                <th>Filter3-mnthly</th>
            </tr>
        </thead>
        <tbody>

            <tr data-child-value="Free TV">
                <td class="details-control"></td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="handsetcost">£364.00 upfront</span>
                    <br><span class="amount">£10.10 per month</span></td>
                <td>Free TV</td>
                <td>£364.00</td>
                <td>£10.10</td>
            </tr>

            <tr data-child-value="Free TV">
                <td class="details-control"></td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£40.40 per month</span></td>
                <td>Free TV</td>
                <td>£0.00</td>
                <td>£40.40</td>
            </tr>

            <tr data-child-value="Free TV">
                <td class="details-control"></td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£30.30 per month</span></td>
 ...

CSS

#control-panel {
  border: 1px solid black;
  padding: 10px;
  margin-bottom: 15px;
  overflow: hidden;
}

#dropdown-filter-div {
  float: right;
  width: 50%;
  text-align: right;
}

#checkbox-filter-div {
  float: left;
  width: 50%;
}

.dataTables_filter {
display: none;
} 

table {
  border: 1px solid black;
}

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

JavaScript

// This function is for displaying data from HTML "data-child-value" tag in the Child Row.
function format(value) {
      return '<div>Hidden Value: ' + value + '</div>';
  }

// Initialization of dataTable and settings.
  $(document).ready(function () {
      var dataTable = $('#example').DataTable({
       bLengthChange: false,
       "pageLength": 5,
       "pagingType": "simple",
       "order": [[ 7, "asc" ]],
       "columnDefs": [
            {
                "targets": [ 5 ],
                "visible": false,
                "searchable": true
            },
            {
                "targets": [ 6 ],
                "visible": false,
                "searchable": true
            },
            {
                "targets": [ 7 ],
                "visible": false,
                "searchable": true
            }
        ],

// Dropdown filter function for dataTable from hidden column number 5 for filtering gifts.
       initComplete: function () {
            this.api().columns(5).every(function () {
                var column = this;
                var select = $('<select><option value="">Show all</option></select>')
                    .appendTo($("#control-panel").find("div").eq(1))
                    .on('change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                    $(this).val());
                    column.search(val ? '^' + val + '$' : '', true, false)
                        .draw();
                });
                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>')
                });
            });
        }
    });

// This function is for handling Child Rows.
    $('#example').on('click', 'td.details-control', function () {
          var tr = $(this).closest('tr');
          var row = dataTable.row(tr);

          if (row.child.isShown()) {
              // This row is already open - close it
             ...