DataTables with FixedColumns

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet" href="https://datatables.net/release-datatables/media/css/dataTables.bootstrap4.css">
<link rel="stylesheet" href="https://datatables.net/release-datatables/extensions/FixedColumns/css/fixedColumns.bootstrap4.css">
<script src="https://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script src="https://datatables.net/release-datatables/media/js/dataTables.bootstrap4.js"></script>
<script src="https://datatables.net/release-datatables/extensions/FixedColumns/js/dataTables.fixedColumns.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div id='ClientTouchesLogTable'>
      <table id="table_1" class="table table-hover table-sm text-nowrap">
      <thead>    
      <tr>        
        <th >account_name</th>
        <th  >contact_person</th>       
        <th  >2020-09-17</th>       
        <th  >2020-09-16</th>      
        <th  >2020-09-15</th>      
        <th  >2020-09-10</th>    
        <th  >2020-09-09</th> 
      </tr>
      </thead>
      <tbody>              
      <tr>
        <td  >Company A</td>
        <td  >Tom</td>
        <td  ></td>
        <td  >P2</td>                 
        <td  >IBO</td>  
        <td  ></td>
        <td >EO</td>
        </tr>
        <tr>
        <td  >company B</td>
        <td  >Jack</td>
        <td  >IB2</td>
        <td  ></td>
        <td  >IBO</td>  
        <td  >IB2</td>
        <td  ></td>
        </tr>
        </tbody>
     </table>
</div>

CSS

#ClientTouchesLogTable {
          display:none;
      }
.empty-cols { display: none; }

JavaScript

$(document).ready(function() {
   var table =$('#table_1').DataTable({
      "ordering": false,
        scrollX:        true,
        scrollCollapse: true,
         fixedColumns: {
              leftColumns: 2
          },
      "pagingType": "full_numbers",
      "initComplete": function() {
          $("#ClientTouchesLogTable").css("display", "block");
      }
  });

function filterEmptyCols(){
      // display all cells first
      $('.empty-cols').removeClass("empty-cols");
      var headers = document.getElementsByClassName("dataTable")[0];
      var cols = headers.getElementsByTagName("th");
      var tbody = document.getElementsByClassName("dataTable")[1];
      var rows = tbody.getElementsByTagName("tr");
      for (col=0; col < cols.length; col++) {
          var remove = 1;
          // the first row is a hidden header row
          for (row = 1; row < rows.length; row++) {
              var cells = rows[row].cells;
              if (cells[col].innerHTML == "") { remove++;}
          }
          if (remove == rows.length) {
              cols[col].classList.add("empty-cols"); // hide headers
              for (row = 1; row < rows.length; row++) { // hide cells
                  rows[row].cells[col].classList.add("empty-cols");
              }
          }
      }
      // adjust column width
      $(headers).width("100%");
      $(tbody).width("100%");
   }

  var searchInput = document.getElementsByClassName("dataTables_filter")[0].getElementsByTagName("input")[0];
  $(searchInput).on("keyup", function(){
      filterEmptyCols()
  });


  })