JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html
  xmlns:mso="urn:schemas-microsoft-com:office:office"
  xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"
>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=yes"
    />
    <script
      src="https://code.jquery.com/jquery-3.5.1.min.js"
      integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
      crossorigin="anonymous"
    ></script>
    <!-- CSS Styles -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/css/bootstrap-select.min.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Assistant:300,400,700&amp;subset=hebrew"
      rel="stylesheet"
    />
    <link
      href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css"
      rel="stylesheet"
    />
    <link
      href="https://cdn.datatables.net/select/1.2.7/css/select.dataTables.min.css"
      rel="stylesheet"
    />
    <link
      href="https://cdn.datatables.net/scroller/1.5.1/css/scroller.dataTables.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.datatables.net/colvis/1.1.2/css/dataTables.colVis.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"
      integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ=="
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
     ...

CSS

.filter {
        position: absolute;
        border: solid 1px;
        background-color: white;
        width: 100%;
        right: 0;
        display: none;
      }
      .arrow {
        border: solid black;
        border-width: 0 3px 3px 0;
        display: inline-block;
        padding: 5px;
        margin-left: 15px;
      }
      .down {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
      }
      #datatable {
        font-family: Arial, Helvetica, sans-serif;
        border-collapse: collapse;
        width: 100%;
      }
      #datatable th {
        min-width: 180px;
        position: relative;
      }
      #datatable td,
      #datatable th {
        border: 1px solid #ddd;
        padding: 8px;
      }

      #datatable tr:nth-child(even) {
        background-color: #f2f2f2;
      }

      #datatable tr:hover {
        background-color: #ddd;
      }

      html {
        zoom: 80%;
      }

JavaScript

var datatable;
var liHtml;
var arrayMap = {};
var inputClicked = false;
var okBtn = false;
var arrowDown;
// $("input.searchflag").click(function(){
//     showFilterOption(this);
//   });

$(document).ready(function () {
  // After the input field has loaded into the body, add the onclick function.
  //  Once the input field is clicked, call showFilterOption function to read all the tds' data and show it as a filter value.
  // Disable the sorting method when clicking on the input.
  $("body").on("click", ".arrow", function (event) {
    // The input has been clicked.
    // checkInputClicked(true);
    arrowDown = this;
    showFilterOption(arrowDown);
  });

  // call loadDatatable function
  loadDatatable();
});
function loadDatatable() {
  var deferred = $.Deferred();
  datatable = $("#datatable").DataTable({
      columnDefs: [{ targets: 10, visible: false }],
      // Initialize the datatable header.
      initComplete: function () {
        var table = this.api();
        var headers = $(this[0]).find("thead tr").children();
        // For each header, append an input so it can be used for filtering the table.
        $(headers).each(
          column =>
            (table
              .column(column)
              .header().innerHTML += `<i class="arrow down"></i><div class="filter"></div>`)
        );
      }
    });
}

function showFilterOption(arrowDown) {
  var thObject = $(arrowDown).closest("th");
  var filterGrid = $(thObject).find(".filter");

  if (filterGrid.is(":visible")) {
    filterGrid.hide();
    return;
  }

  $(".filter").hide();
  var filterValues = [];
  // var index = 0;
  filterGrid.empty();
  var allSelected = true;
  filterGrid.append(
    '<div><input id="search" type="text" placeholder="Search"></div><div><input id="all" type="checkbox" checked>Select All</div>'
  );
  // dollar sign together with the variable makes a distinction between regular vars and jQuery objects.
  // var $rows = $(thObject).parents("table").find("tbody...