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 FILTER_STYLE = document.getElementById("filter-style");

function updateFilter(elem) {
  let input = elem.value;
  if (input.length === 0) {
    // don't filter if empty
    FILTER_STYLE.innerHTML = "";
    return;
  }
  // escape anything problematic
  input = CSS.escape(input);
  // generate CSS
  FILTER_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;
    }
    table tbody tr { display: none; }
  `;
}