I would like a ... - Tailwind AI

Patrick Smith
<body class="bg-gray-100 font-sans leading-normal tracking-normal h-screen flex items-center justify-center">
  <div class="bg-white shadow-lg rounded-lg p-8 max-w-4xl w-full">
    <h1 class="text-2xl font-bold mb-6 text-center">Filterable Data Table</h1>
    <div class="mb-4">
      <input type="text" id="filter-input" class="w-full p-2 border rounded" placeholder="Type to filter...">
    </div>
    <div class="overflow-x-auto">
      <table class="min-w-full bg-white">
        <thead>
          <tr>
            <th class="py-2 px-4 border-b">Name</th>
            <th class="py-2 px-4 border-b">Age</th>
            <th class="py-2 px-4 border-b">Email</th>
          </tr>
        </thead>
        <tbody id="data-table">
          <tr>
            <td class="py-2 px-4 border-b">John Doe</td>
            <td class="py-2 px-4 border-b">28</td>
            <td class="py-2 px-4 border-b">john.doe@example.com</td>
          </tr>
          <tr>
            <td class="py-2 px-4 border-b">Jane Smith</td>
            <td class="py-2 px-4 border-b">34</td>
            <td class="py-2 px-4 border-b">jane.smith@example.com</td>
          </tr>
          <tr>
            <td class="py-2 px-4 border-b">Alice Johnson</td>
            <td class="py-2 px-4 border-b">29</td>
            <td class="py-2 px-4 border-b">alice.johnson@example.com</td>
          </tr>
          <tr>
            <td class="py-2 px-4 border-b">Bob Brown</td>
            <td class="py-2 px-4 border-b">45</td>
            <td class="py-2 px-4 border-b">bob.brown@example.com</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <script>
    document.getElementById('filter-input').addEventListener('input', function() {
      const filter = this.value.toLowerCase();
      const rows = document.querySelectorAll('#data-table tr');
      rows.forEach(row => {
        const cells = row.querySelectorAll('td');
        const match = Array.from(cells).some(cell => cell.textContent.toLowerCase().includes(filter));
        row.style.display = match ? '' : 'none';
      });
    });
  </script>
</body>
I would like a datatable that is filterable
