Today, I learned about how to add a filter widget to the table created via Tablesorter.
Tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TROW. But if you need to add a feature to filter the table, you can use the filter widget. The filter widget adds a row of input boxes to the top of the table, one for each column. You can type into these boxes to filter the table. The filter widget also works with child rows.
In the table below, I have created a table of 12 rows and 4 columns. You have an option to add in a filter query in the table. For e.g. in the below table you search for a number, let's say 5507 in the FastCar column, it will filter out the rows that have $5507 in them.
I also added the zebra widget to the table. The zebra widget adds a zebra effect to the rows of the table. It is a simple way to make the table more readable.
| Region | FastCar | RapidZoo | SuperGlue |
|---|---|---|---|
| Middle | FCIDM2015Q1 | RZIDM2015Q1 | SGIDM2015Q1 |
| Joseph | $ 423 | $ 182 | $ 255 |
| Lawrence | $ 1,908 | $ 1,642 | $ 2,593 |
| Maria | $ 1,502 | $ 1,969 | $ 3,408 |
| Matt | $ 1,170 | $ 1,093 | $ 2,039 |
| North | FCIDN2015Q1 | RZIDN2015Q1 | SGIDN2015Q1 |
| Joseph | $ 3,643 | $ 2,846 | $ 1,574 |
| Lawrence | $ 3,456 | $ 2,658 | $ 1,685 |
| Maria | $ 3,235 | $ 2,616.99 | $ 1,612.33 |
| Matt | $ 3,868 | $ 2,926 | $ 1,254 |
| West | FCIDW2015Q1 | RZIDW2015Q1 | SGIDW2015Q1 |
| Joseph | $ 5,507 | $ 3,186 | $ 4,882 |
| Lawrence | $ 4,082 | $ 4,272 | $ 6,124 |
| Maria | $ 5,520 | $ 4,461 | $ 4,872 |
| Matt | $ 5,737 | $ 4,598 | $ 4,233 |
| Category | HTML / JS / CSS / JQUERY |
| Credits | Rob Garrison |
| Date | February 11th, 2025 |
| Codepen | NA |