I was working with a html table where I need to filter two things. One is there is a table with data and when we click on column header and a filter grid will be displayed in which we can see a textbox and below that there are check boxes. I am looking a solution like when we type on the textbox, the checkboxes will filtered by the text input and after that click on OK button the table will be filtered.

 [![Filter table grid](https://i.sstatic.net/EDCLRm5Z.png)](https://i.sstatic.net/EDCLRm5Z.png)

Code is like shown below

      @page
      @model IndexModel
      @{
         ViewData["Title"] = "Home page";
       }

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <style>
   table {
    margin: 0 auto;
    margin-top: 20px;
    width: 100%;
    position: relative;
    overflow: auto;
    overflow-y: overlay;
}

th,
thead {
    position: sticky;
    top: 0;
    border: 1px solid #dddddd;
    background-color: #1f2d54;
    text-align: center;
    color: white;
    table-layout: fixed;
    word-break: break-word;
    height: 45px;
}

.filter {
    position: absolute;
    width: 20vw;
    height: 40vh;
    display: none;
    text-align: left;
    font-size: small;
    z-index: 9999;
    overflow: auto;
    background: #ffffff;
    color: #1f2d54;
    border: 1px solid #dddddd;
}

    .filter input {
        margin: 5px !important;
        padding: 0 !important;
        width: 10%;
    }

input.largerCheckbox {
    margin: 5px;
    padding: 0;
    width: 13px;
    height: 13px;
}

input[type='checkbox'] {
    vertical-align: middle;
    position: relative;
    bottom: 1px;
}

<table style='padding: 8px;'>
<tr>
    <th index=0>
        Email
        <div class="filter"></div>
    </th>
    <th index=1>
        Name
        <div class="filter"></div>
    </th>
    <th index=2>
        Level
        <div class="filter"></div>
    </th>
    <th index=3>
        Location
        <div class="filter"></div>
    </th>
 </tr>

<tr>
    <td>Email 1</td>
    <td>Name 1</td>
    <td>Level 1</td>
    <td>Location 2</td>
</tr>
<tr>
    <td>Email 1</td>
    <td>Name 1</td>
    <td>Level 1</td>
    <td>Location 1</td>
</tr>
<tr>
    <td>Email 2</td>
    <td>Name 1</td>
    <td>Level 2</td>
    <td>Location 1</td>
</tr>
<tr>
    <td>Email 3</td>
    <td>Name 2</td>
    <td>Level 2</td>
    <td>Location 1</td>
</tr>
<tr>
    <td>Email 3</td>
    <td>Name 3</td>
    <td>Level 1</td>
    <td>Location 2</td>
</tr>
<tr>
    <td>Email 1</td>
    <td>Name 2</td>
    <td>Level 2</td>
    <td>Location 1</td>
 </tr>

<script>

$(document).ready(function () {
    $("table th").click(function () {
        showFilterOption(this);
    });
});

var arrayMap = {};

function showFilterOption(tdObject) {
    var filterGrid = $(tdObject).find(".filter");
    if (filterGrid.is(":visible")) {
        filterGrid.hide();
        return;
    }
    $(".filter").hide();

    var index = 0;
    filterGrid.empty();
    var allSelected = true;

    filterGrid.append('<div><input id="searchtext" type="text" placeholder="Search" style="width: 70% !important"></div>');
            
    filterGrid.append('<div><input id="all" type="checkbox" style="width: 10% !important" checked>All</div>');

    var $rows = $(tdObject).parents("table").find("tr");
    var values = [];
            
    $rows.each(function(ind, ele)
    {
        if (ind > 0)
        {
            var currentTd = $(ele).children()[$(tdObject).attr("index")];
            if (!values.includes(currentTd.innerHTML))
            {
                values.push(currentTd.innerHTML);
                var div = document.createElement("div");
                div.classList.add("grid-item");
                var str = $(ele).is(":visible") ? "checked" : "";
                if ($(ele).is(":hidden"))
                {
                  allSelected = false;
                }
                div.innerHTML = '<br><input type="checkbox" ' + str + " >" + currentTd.innerHTML;
                filterGrid.append(div);
                arrayMap[index] = ele;
                index++;
             }
        }
    });
           
    if (!allSelected) {
        filterGrid.find("#all").removeAttr("checked");
    }

    filterGrid.append('<div style="text-align: center"><input id="close" type="button" value="Close" style="width: 40%"/><input id="ok" type="button" value="Ok" style="width: 40%"/></div>');
    filterGrid.show();

    var $stxt = filterGrid.find("input[type='text']");
    var $closeBtn = filterGrid.find("#close");
    var $okBtn = filterGrid.find("#ok");
    var $checkElems = filterGrid.find("input[type='checkbox']");
    var $gridItems = filterGrid.find(".grid-item");
    var $all = filterGrid.find("#all");

    $closeBtn.click(function () {
        filterGrid.hide();
        return false;
    });

    $("#searchtext").on('input', function () {
                        
    });
            
    $okBtn.click(function () {
        filterGrid.find(".grid-item").each(function (ind, ele) {
            if ($(ele).find("input").is(":checked")) {
                $(arrayMap[ind]).show();
            }
            else {
                $(arrayMap[ind]).hide();
            }
        });

        filterGrid.hide();
        return false;
    });

    $checkElems.click(function (event) {
        event.stopPropagation();
    });

    $gridItems.click(function (event) {
        var chk = $(this).find("input[type='checkbox']");
        $(chk).prop("checked", !$(chk).is(":checked"));
    });

    $all.change(function () {
        var chked = $(this).is(":checked");
        filterGrid.find(".grid-item [type='checkbox']").prop("checked", chked);
    });

    filterGrid.click(function (event) {
        event.stopPropagation();
    });

    return filterGrid;
   }

 </script>