JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text">
<table>
  <tbody>
    <tr>
      <td class="id">1</td>
      <td class="text">Stereo MC's</td>
      <td class="text">Show Your Light</td>
    </tr>
    <tr>
      <td class="id">2</td>
      <td class="text">Richard Willis & Jeff D Moseley</td>
      <td class="text">The Storm In Me</td>
    </tr>
    <tr>
      <td class="id">3</td>
      <td class="text">Kaskade feat. Martina Sorbara</td>
      <td class="text">Fire In Your New Shoes</td>
    </tr>
    <tr>
      <td class="id">4</td>
      <td class="text">U2</td>
      <td class="text">Sleep Like A Baby Tonight</td>
    </tr>
    <tr>
      <td class="id">5</td>
      <td class="text">Foals</td>
      <td class="text">London Thunder</td>
    </tr>
    <tr>
      <td class="id">6</td>
      <td class="text">Stereo MC's</td>
      <td class="text">We Belong In This World Together</td>
    </tr>
    <tr>
      <td class="id">7</td>
      <td class="text">Rudimental feat. Anne-Marie & Will Heard</td>
      <td class="text">Rumour Mill</td>
    </tr>
    <tr>
      <td class="id">8</td>
      <td class="text">Parov Stelar</td>
      <td class="text">The Sun</td>
    </tr>
    <tr>
      <td class="id">9</td>
      <td class="text">Mark Ronson & Bruno Mars</td>
      <td class="text">Uptown Funk</td>
    </tr>
  </tbody>
</table>

CSS

* {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}

body {
  font: 14px/1 Arial, sans-serif;
  margin: 20px;
}

input {
  width: 300px;
  padding: 5px;
}

table {
  margin-top: 10px;
  border-collapse: collapse;
  border-spacing: 5px;
}

  table td {
    padding: 0 1em;
    line-height: 2em;
    white-space: nowrap;
    border: 1px solid #aaa;
  }

  table td.id {
    width: 10px;
    text-align: center;
  }

  table td.id.selected {
    position: relative;
  }

  table td.id.selected:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-top: 14px solid transparent;
    border-right: 6px solid steelblue;
    border-bottom: 14px solid transparent;
  }

  table td.text.selected {
    color: white;
    background: steelblue;
  }

JavaScript

(function() {

  "use strict";



  var input = document.querySelector("input"),
      table = document.querySelector("table"),

      idCellSelector = "td.id",
      textCellsSelector = "td.text",
      selectedClassName = "selected";



  input.addEventListener("input", function() {
    var rows = makeArray(table.querySelectorAll("tr")),
        value = this.value;

    updateRowsSelection(rows, value);
    sortRows(rows);
  }, false);



  function updateRowsSelection(rows, value) {
    rows.forEach(function(row) {
      var cells = makeArray(row.querySelectorAll(textCellsSelector)),
          idCell = row.querySelector(idCellSelector);

      cells.forEach(function(cell) {
        if (cellHasMatches(cell, value) && value) {
          cell.classList.add(selectedClassName);
        } else {
          cell.classList.remove(selectedClassName);
        }
      });

      if (isRowSelected(row)) {
        idCell.classList.add(selectedClassName);
      } else {
        idCell.classList.remove(selectedClassName);
      }
    });
  }

  function sortRows(rows) {
    var selectedRows = [],
        unselectedRows = [];

    rows.sort(function(a, b) {
      return getRowId(a) > getRowId(b);
    });

    rows.forEach(function(row) {
      if (isRowSelected(row)) {
        selectedRows.push(row);
      } else {
        unselectedRows.push(row);
      }
    });

    selectedRows.concat(unselectedRows).forEach(function(row) {
      row.parentNode.appendChild(row);
    });
  }



  function makeArray(object) {
    return Array.prototype.slice.call(object);
  }

  function cellHasMatches(cell, value) {
    return cell.textContent.toLowerCase().indexOf(value.toLowerCase()) != -1;
  }

  function getRowId(row) {
    return +row.querySelector(idCellSelector).textContent;
  }

  function isRowSelected(row) {
    var cells = makeArray(row.querySelectorAll(textCellsSelector));

    return cells.some(function(cell) {
      return cell.classList.contains(selectedClassName);
    });
 ...