JSFiddle - React, Tailwind, and code Playground

by George Shevchenko

HTML

<table id="dataTable">
  <tr class="dataRow">
    <th>Статус</th>
    <th>Имя
      <input type="text" id="filter-input" value="" />
    </th>
  </tr>

  <tr class="dataRow">
    <td>Администратор</td>
    <td>Георгий Шевченко</td>
  </tr>

  <tr class="dataRow">
    <td>Модератор</td>
    <td>XenForo</td>
  </tr>

  <tr class="dataRow">
    <td>Гость</td>
    <td>Вася Пупкин</td>
  </tr>

</table>

CSS

tr:first-child > th {
  font-weight: bold;
}

th,
td {
  border-bottom: 1px solid #ddd;
  padding: 15px;
  text-align: left;
  font-weight: normal;
}

input,
input:active,
input:focus {
  background: whitesmoke;
  border: 1px solid lightgray;
  border-radius: 4px;
  margin-left: 2px;
  outline: none;
}

JavaScript

var filter = $("#filter-input");

jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
    return function( elem ) {
        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

filter.keyup(function(e) {
  var niddle = $(this).val();
  $('#dataTable tr:not(:first)').filter(function() {
    if (!$(this).find('td:eq(1)').is(':Contains("' + niddle + '")')) {
      return true;
    } else {
      $(this).show();
      return false;
    }
  }).hide();
});