JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.1.1/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.1.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.1.1/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.1.1/js/buttons.html5.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<title>
  Test</title>https://jsfiddle.net/04r1805e/2/#

<body>
  <div class="header">
    <div class="content_header">
      <h1>Title</h1>
    </div>
    <p style="clear: both;padding-top: 0px;"></p>https://jsfiddle.net/04r1805e/1/#
  </div>

  <table id="table_id" class="cell-border display" cellpadding="0" cellspacing="0" border="0" width="100%">

    <thead>
      <tr>
        <th colspan="13">Informations</th>
        <th colspan="5">Checks</th>
      </tr>

      <tr>
        <th>_</th>
        <th>Customer</th>
        <th>options</th>
        <th>Site</th>
        <th>col4</th>
        <th>col5</th>
        <th>col6</th>
        <th>col7</th>
        <th>col8</th>
        <th>col9</th>
        <th>col10</th>
        <th>col11</th>
        <th>col12</th>
        <th>col13</th>
        <th>col14</th>
        <th>col15</th>
        <th>col16</th>
        <th>col17</th>
      </tr>
    </thead>

    <tfoot>
      <tr>
        <th>_</th>
        <th>Customer</th>
        <th>options</th>
        <th>Site</th>
        <th>col4</th>
        <th>col5</th>
        <th>col6</th>
        <th>col7</th>
        <th>col8</th>
        <th>col9</th>
        <th>col10</th>
        <th>col11</th>
        <th>col12</th>
        <th>col13</th>
        <th>col14</th>
        <th>col15</th>
        <th>col16</th>
        <th>col17</th>
      </tr>
   ...

JavaScript

//Function call after change on datatable
function popoverFunction() {
  $('td[class*="_tests"]').popover({
    placement: 'left',
    trigger: 'hover',
    html: true
  });
  $('td[class*="_infos"]').popover({
      trigger: "manual",
      html: true,
      placement: "left"
    })
    .on("mouseenter", function() {
      var _this = this;
      $(this).popover("show");
      $(".popover").on("mouseleave", function() {
        $(_this).popover('hide');
      });
    }).on("mouseleave", function() {
      var _this = this;
      setTimeout(function() {
        if (!$(".popover:hover").length) {
          $(_this).popover("hide");
        }
      }, 30);
    });
}

$(document).ready(function() {
  //Init / Configure datatable
  var table = $('#table_id').DataTable({
    initComplete: function() {
      this.api().columns().every(function() {
        var column = this;
        var select = $('<select><option value="">all</option></select>')
          .appendTo($(column.footer()).empty())
          .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>')
        });
      });
    },
    aLengthMenu: [
      [6, 25, 50, 100, -1],
      [6, 25, 50, 100, "All"]
    ],
    iDisplayLength: 6,
    responsive: true,
    stateSave: true,
    "dom": '<"top"Biflp>rt<"bottom"iflp>',
    buttons: [
      'colvis', {
        extend: 'copyHtml5',
        orientation: 'landscape',
        pageSize: 'A3',
        exportOptions: {
          columns: ':visible'
        }
      }, {
        extend: 'csvHtml5',
        orientation: 'landscape',
        pageSize: 'A3',
        exportOptions: {
          columns: ':visible'
        }
      }, {
        extend:...