JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/searchpanes/1.2.0/css/searchPanes.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/searchpanes/1.2.0/js/dataTables.searchPanes.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/scroller/2.0.3/js/dataTables.scroller.min.js"></script>
<div class="content-container">
  <h2 class="head-of-editor">Filtering settings:</h2>
  <div class="checkBoxes"></div>
  <br />
  <a class="button button-clear" id="createFilter" href="#">Create filter</a><br><br>
</div>

<table class="custom-style" id="test1">
  <thead class="table-head">
    <tr>
      <th>Station code</th>
      <th>Station name</th>
      <th>Station type</th>
      <th>Description</th>
      <th>Belongs to production resource(s)</th>
      <th>Main production resource</th>
      <th></th>
    </tr>
  </thead>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>
    </td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>
    </td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>
    </td>
  </tr>
</table>

JavaScript

addSpliting('');

function addSpliting(val) {
 
  if(val != '') {
      $("#test1").DataTable({
        destroy: true,
        searchPanes: {
          layout: 'columns-4',
        },
        dom: 'Pfrtip',
        columnDefs: [{
          searchPanes: {
            show: true,
          },
          targets: val
        }]
      });
  }
  else {
      $("#test1").DataTable({
        destroy: true
      });
  }
}

function setFilters() {
  
   $("table thead tr th").each(function(index) {

      var boxes = `<label>
								    <input type="checkbox" class="checkbox" id="${index}"/>
                    ${$(this).text()}
                    </label>`
      if ($(this).text() != "") $(".checkBoxes").append(boxes);
   });
}

setFilters();

$("#createFilter").on("click", function() {
   var filters = [];
  
   $('.checkbox:checked').each(function () {
      filters.push(parseInt($(this).attr('id')));
   });
  
   addSpliting(filters);
});