JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <!-- filter a table with dynamically generated CSS. genius or madness? -->
  <!-- by @guregu -->
  <head>
    <style id="filter-style"></style>
  </head>
  <form onsubmit="return false;">
    <label for="filter-input">filter:</label> <input id="filter-input" type="search" placeholder="try 'love' or 'beatles'" oninput="return updateFilter(this),false;">
  </form>
  
  <table>
    <thead>
      <th>artist</th><th>album</th><th>title</th>
    </thead>
    <tbody>
      <tr data-artist="The Beatles" data-album="Yellow Submarine" data-title="All You Need is Love">
        <td>The Beatles</td><td>Yellow Submarine</td><td>All You Need Is Love</td>
      </tr>
      <tr data-artist="The Beatles" data-album="Yellow Submarine" data-title="Yellow Submarine">
        <td>The Beatles</td><td>Yellow Submarine</td><td>Yellow Submarine</td>
      </tr>
      <tr data-artist="Haddaway" data-album="The Album" data-title="What Is Love">
        <td>Haddaway</td><td>The Album</td><td>What Is Love</td>
      </tr>
      <tr data-artist="Jay-Z" data-album="Watch the Throne" data-title="No Church In The Wild">
        <td>Jay-Z</td><td>Watch the Throne</td><td>No Church In The Wild</td>
      </tr>
      <tr data-artist="Led Zeppelin" data-album="Led Zeppelin II" data-title="Whole Lotta Love">
        <td>Led Zeppelin</td><td>Led Zeppelin II</td><td>Whole Lotta Love</td>
      </tr>
      <tr data-artist="Ratatat" data-album="Classics" data-title="Wildcat">
        <td>Ratatat</td><td>Classics</td><td>Wildcat</td>
      </tr>
    </tbody>
  </table>
</html>

CSS

table {
  width: 100%;
  table-layout: fixed;
}

JavaScript

const style = document.getElementById("filter-style");

function updateFilter(elem) {
	let input = elem.value;
  if (input.length == 0) {
  	// empty means no filter
  	style.innerHTML = "";
    return;
  }
  // escape quotes
  input = input.replace(/\x22/g, '\\\x22');
	input = input.replace(/\x27/g, '\\\x27');
  // generate CSS
	style.innerHTML = "table tbody tr[data-title*='" + input + "' i], table tbody tr[data-album*='" + input + "' i], table tbody tr[data-artist*='" + input + "' i] { display: revert; }\ntable tbody tr { display: none; }";
}