JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jq-3.7.0/dt-2.0.2/datatables.min.css">
<script src="https://cdn.datatables.net/2.0.0/js/dataTables.min.js"></script>
<script src="https://raw.githack.com/vedmack/yadcf/master/2.0/jquery.dataTables.yadcf-2.0.js"></script>
<script src="https://raw.githack.com/vedmack/yadcf-showcase/master/war/resources/sources/deep.txt"></script>

  <button id="GO">
  GO
  </button>
    <table cellpadding="0" cellspacing="0" border="0" class="display" id="entrys_table" width="100%">
      <thead>
        <tr>
          <th width="20%">Rendering engine</th>
          <th width="25%">Browser</th>
          <th width="25%">Platform(s)</th>
          <th width="15%">Engine version</th>
          <th width="15%">CSS grade</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>

CSS

.hide {
	display: none;
}

.inuse, .ui-slider-range .inuse, .yadcf-filter-range-number-slider .inuse {
	background: #8BBEF0;
}

.yadcf-filter-reset-button {
	display: inline-block;
}

.yadcf-filter-reset-button.range-number-slider-reset-button{
	position: relative;
	top: -6px;	
}

.yadcf-filter {
	padding-right: 4px;
	padding-left: 4px;
	padding-bottom: 3px;
	padding-top: 3px;
}

.yadcf-filter > option{
    background: white;
}

.ui-autocomplete .ui-menu-item { 
	font-size:13px;
}

#ui-datepicker-div { 
	font-size:13px;
}
.yadcf-filter-wrapper {
	display: inline-block;
	white-space: nowrap;
	margin-left: 2px;
}

.yadcf-filter-range-number {
	width: 40px;
}

.yadcf-filter-range-number-seperator {
	margin-left: 10px;
	margin-right: 10px;
}

.yadcf-filter-range-date {
	width: 80px;
}

.yadcf-filter-range-date-seperator {
	margin-left: 10px;
	margin-right: 10px;
}

.yadcf-filter-wrapper-inner {
	display: inline-block;
	border: 1px solid #ABADB3;
}

.yadcf-number-slider-filter-wrapper-inner {
	display: inline-block;
	width: 200px;
	margin-bottom: 7px;
}

.yadcf-filter-range-number-slider .ui-slider-handle {
	width: 10px;
	height: 10px;
	margin-top: 1px;
}

.yadcf-filter-range-number-slider .ui-slider-range {
	position: relative;
	height: 5px;
}

.yadcf-filter-range-number-slider {
	height: 5px;
	margin-left: 6px;
	margin-right: 6px;
}

.yadcf-filter-range-number-slider {
    overflow: visible;
}

.yadcf-number-slider-filter-wrapper-inner .yadcf-filter-range-number-slider-min-tip {
	font-size: 13px;
	font-weight: normal;
	position: absolute;
	outline-style: none;
}

.yadcf-number-slider-filter-wrapper-inner .yadcf-filter-range-number-slider-max-tip {
	font-size: 13px;
	font-weight: normal;
	position:absolute;
	outline-style: none;
}

.yadcf-number-slider-filter-wrapper-inner .yadcf-filter-range-number-slider-min-tip-inner {
	position:absolute;
	top: 11px;
}

.yadcf-number-slider-filter-wrapper-inner .yadcf-filter-range-number-slider-max-tip-inner...

JavaScript

$(function () {
  'use strict';

  let oTable2 = $('#entrys_table').DataTable({
    stateSave: true,
    responsive: true,
    ajax: "https://raw.githack.com/vedmack/yadcf-showcase/master/war/resources/sources/deep.txt",
    columns: [{
      "data": "engine"
    }, {
      "data": "browser"
    }, {
      "data": "platform.inner"
    }, {
      "data": "platform.details.0"
    }, {
      "data": "platform.details.1"
    }]
  });

  yadcf.init(oTable2, [{
    column_number: 0
  }, {
    column_number: 1,
    filter_type: "text",
    exclude: true,
    exclude_label: '!(not)'
  }, {
    column_number: 2,
    filter_type: "auto_complete"
  }, {
    column_number: 3,
    filter_type: "range_number",
    ignore_char: "-"
  }, {
    column_number: 4
  }],{externally_triggered: true});


$("#GO").on('click', function() {
	yadcf.exFilterExternallyTriggered(oTable2);
});

});