Demo

Demo for table-filter, a tiny npm package for filtering an HTML table with source code available on GitHub. Try filtering the table below.

Search:

Showing 5 items of 5.

First	Second	Third
Lorem Ipsum	Yes	2026-01-05
Consectetur adipiscing elit	No	2026-08-07
Sed do eiusmod	No	2026-07-05
Tempor incididunt ut labore	Yes	2026-04-08
Tempor incididunt ut labore	Yes	2026-04-08

Code

Code used for the demo above:

<search>
  <form>
    <div>
      <label for="table-search-input">Search:</label>
    </div>
    <div>
      <input type="search" id="table-search-input" placeholder="Filter the table...">
    </div>
  </form>
</search>

<table id="search-table">
  <caption>Showing <span id="visible-items-counter">5</span> items of 5.</caption>
  <thead>
    <tr>
      <th>First</th>
      <th>Second</th>
      <th>Third</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Yes</td>
      <td>2026-01-05</td>
    </tr>
    <tr>
      <td>Consectetur adipiscing elit</td>
      <td>No</td>
      <td>2026-08-07</td>
    </tr>
    <tr>
      <td>Sed do eiusmod</td>
      <td>No</td>
      <td>2026-07-05</td>
    </tr>
    <tr>
      <td>Tempor incididunt ut labore</td>
      <td>Yes</td>
      <td>2026-04-08</td>
    </tr>
    <tr>
      <td>Tempor incididunt ut labore</td>
      <td>Yes</td>
      <td>2026-04-08</td>
    </tr>
  </tbody>
</table>

<script type="module">
  import { filterTable } from "https://cdn.jsdelivr.net/npm/@febog/table-filter@1.0.0/filter.js";
  const input = document.getElementById("table-search-input");
  input.addEventListener("input",
    e => filterTable("search-table", e.target.value, "visible-items-counter"));
</script>

Go back to the homepage.