JSFiddle - React, Tailwind, and code Playground

HTML

<table id="myTable">
  <tr class="header">
    <th>Имя: <input type="text" placeholder="Поиск..."><span>×</span></th>
    <th>Страна: <input type="text" placeholder="Поиск..."><span>×</span></th>
    <th>Статус: <input type="text" placeholder="Поиск..."><span>×</span></th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Германия</td>
    <td>Город</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Швеция</td>
    <td>Столица</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Великобритания</td>
    <td>Столица</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Германия</td>
    <td>Гоорд</td>
  </tr>
</table>

CSS

.header input {
  background-position: 10px 12px;
  /* Расположите значок поиска */
  background-repeat: no-repeat;
  /* Не повторяйте изображение значка */
  width: 100%;
  /* Полная ширина */
  font-size: 16px;
  /* Увеличить размер шрифта */
  padding: 10px 15px 10px 20px;
  /* Добавить немного отступов */
  border: 1px solid #ddd;
  /* Добавить серую границу */
  box-sizing: border-box;
}

.header input+span {
  position: absolute;
  right: 0px;
  bottom: 23%;
  display: inline-block;
  height: 19px;
  width: 19px;
  border: 2px solid rgba(33, 110, 243, 0.44);
  border-radius: 50%;
  background-color: #fff;
  line-height: 19px;
  text-align: center;
  transform: scaleX(0);
  transition: transform .4s ease;
  cursor: pointer;
  color: red;
}

JavaScript

table = document.getElementById('myTable');
// Делегирование обработчика для полей ввода
table.addEventListener('input', fResultFilter);
// Назначение обработчиков для кнопок очистки
[...table.querySelectorAll('.header input + span')].forEach(function(el) {
  el.addEventListener('click', function(ev) {
    ev.target.previousElementSibling.value = '';
    ev.target.previousElementSibling.dispatchEvent(new Event('input', { bubbles: true }));
  });
});

function fResultFilter(ev) {
  // Скрытие/показ кнопок очистки
  ev.target.nextElementSibling.style.transform = (ev.target.value != '') ? 'scaleX(1)' : '';
  // Получаем все строки, кроме заголовка
  let aTRs = [...table.querySelectorAll('tr:not(.header)')];
  // Получаем значения всех полей поиска
  let aSearch = [...table.querySelectorAll('th > input')];
  // Прогоняем строки через цепочку фильтров
  aTRs.filter(function(el) {
    if (el.children[0].textContent.search(new RegExp(`${aSearch[0].value}`, 'i')) < 0) {
      el.style.display = 'none';
      return false;
    } else {
      return true;
    }
  }).filter(function(el) {
    if (el.children[1].textContent.search(new RegExp(`${aSearch[1].value}`, 'i')) < 0) {
      el.style.display = 'none';
      return false;
    } else {
      return true;
    }
  }).filter(function(el) {
    if (el.children[2].textContent.search(new RegExp(`${aSearch[2].value}`, 'i')) < 0) {
      el.style.display = 'none';
      return false;
    } else {
      // Показываем только нужные строки
      el.style.display = '';
      return true;
    }
  });
}