0.4kb Fast Table Filter Plugin - jQuery filter-table.js

A super tiny (0.4kb minified) jQuery table filter plugin to quickly search table rows & filter tabular data based on user input.

How to use it:

1. Create an input filed to filter your HTML table:

<input type="text" placeholder="Search Table" id="contact-filter">
<table id="contact-table">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

2. Load the minified version of the filter-table.js plugin after the latest jQuery.

<script src="jquery.slim.min.js></script>
<script src="filter-table.js"></script>

3. Call the function on the HTML table and specify the selector of the filter input. That's it.

$(function(){
  $('#contact-table').filterTable('#contact-filter');
});

Changelog:

2020-08-15

• header rows excluded from the search.

---

This awesome jQuery plugin is developed by novelja. For more Advanced Usages, please check the demo page or visit the official website.