HTML Table Filter Generator

HTML Table Filter Generator is no longer maintained, it is now replaced by the TableFilter project. Don't hesitate to check the demos out in their new location along with exhaustive documentation in the project's WIKI.

Description

This script adds to any html table a "filter by column" feature that enables users to filter and limit the data displayed within a long table. It even works on tables with uneven rows. The script automatically adds a filter grid bar at the top of the desired table. Users can use the following operators to filter columns containing numeric data: <, <=, >, >=.

Version: 2.5.1
License type: MIT License

Support this project:

Main features

Open source and completely free HTML table enhancer:

Convert a regular HTML table into an advanced grid component providing:
- Advanced columns filtering model
- Sorting and pagination facilities
- Complete selection model
- Extended keyboard navigation
- Inline cell or row editing
- Row insertion or deleting
- And even more behaviors...
Attach to an existing HTML table
Integration with any server-side technology as this is a pure client-side solution
Callbacks for all events, and delegates for most actions
Based on plain javascript, that is, independent from any javascript framework but compatible with any of them (no for..in, no overriding $() etc.)
Exhaustive documentation and API
Valuable support provided under a Premium request

What's new?

TableFilter is finally available!

This script is now being replaced by TableFilter. There will be no longer updates to this library. If you haven't used this script before, you can safely switch to TableFilter. If you already used this library in the past, check the demos out and read the documentation in the WIKI to understand the changes occurred to the configuration options and public API. In addition, you can now consult the ES6 source code documentation in the docs section.

Enjoy the next generation of the HTML Table Filter Generator!

Filter operators

In order to perform advanced searches, you can use the following filter operators in the text-box filters:

Operator	Description	Type	Example
<	Values lower than search term are matched	number	<1412
<=	Values lower than or equal to search term are matched	number	<=1412
>	Values greater than search term are matched	number	>1412
>=	Values greater than or equal to search term are matched	number	>=1412
=	Exact match search: only the whole search term(s) is matched	string / number	=Sydney
*	Data containing search term(s) is matched (default operator)	string / number	*Syd
!	Data that doesn't contain search term(s) is matched	string / number	!Sydney
{	Data starting with search term is matched	string / number	{S
}	Data ending with search term is matched	string / number	}y
\|\|	Data containing at least one of the search terms is matched	string / number	Sydney \|\| Adelaide
&&	Data containing search terms is matched	string / number	>4.3 && <25.3
[empty]	Empty data is matched		[empty]
[nonempty]	Data which is not empty is matched		[nonempty]
rgx:	A regular expression is used to match data		rgx:de$

How to implement the filter grid bar

First you need to include the script's javascript file (tablefilter.js) in the head section of your web page

	<script type="text/javascript" language="javascript" src="TableFilter/tablefilter.js"></script>

and make sure that the table you'd like to make filterable has a unique id.

Here you have an example of a regular html table:

From	Destination	Road Distance (km)	By Air (hrs)	By Rail (hrs)
Sydney	Adelaide	1412	1.4	25.3
Sydney	Brisbane	982	1.5	16
Sydney	Canberra	286	.6	4.3
Sydney	Melbourne	872	1.1	10.5
Adelaide	Perth	2781	3.1	38
Adelaide	Alice Springs	1533	2	20.25
Adelaide	Brisbane	2045	2.15	40

Below the same table with a filtering grid generated automatically (id="table1"):

From	Destination	Road Distance (km)	By Air (hrs)	By Rail (hrs)
Sydney	Adelaide	1412	1.4	25.3
Sydney	Brisbane	982	1.5	16
Sydney	Canberra	286	.6	4.3
Sydney	Melbourne	872	1.1	10.5
Adelaide	Perth	2781	3.1	38
Adelaide	Alice Springs	1533	2	20.25
Adelaide	Brisbane	2045	2.15	40

There 3 different ways to generate the filter grid bar:

invoke the setFilterGrid function:

<script language="javascript" type="text/javascript">
	var tf = setFilterGrid("table1");
</script>

add a filterable class to desired table (unobtrusive method):

<table id="table1" cellspacing="0" class="mytable filterable" >

instantiate a TF object:

<script language="javascript" type="text/javascript">
	var tf01 = new TF('table1');
	tf01.AddGrid();
</script>

If your document contains several tables (like this page), it is important to define unique ids, otherwise the script will not work properly.

The setFilterGrid() function or the TF class accepts 2 additional parameters that will be explained in the next tables. In the example below, by specifing a row number as a "reference" row, we tell the function which row to use in order to generate the right number of filters:

From	Destination	Road Distance (km)	By Air (hrs)	By Rail (hrs)
This is the table caption
Sydney	Adelaide	1412	1.4	25.3
Sydney	Brisbane	982	1.5	16
Sydney	Canberra	286	.6	4.3
Sydney	Melbourne	872	1.1	10.5
Adelaide	Perth	2781	3.1	38
Adelaide	Alice Springs	1533	2	20.25
Adelaide	Brisbane2045		2.15	40

var tf02 = setFilterGrid("table2",2);

var tf02 = new TF("table2",2);
tf02.AddGrid();

Here we have specified row number 2, that is the third row from the top. The 1st row is number 0. Since the 1st row doesn't contain the right number of columns, we need to use the second parameter of the function in order to calculate the right number of columns and also to define from which row should start the filtering process. Note that merged cells (<td colspan="2">) are simply skipped.

By default, the script adds text boxes (<input>). As you will see in the next example, you can also decide to not display a filter or use drop-down lists (<select>) instead of text boxes:

From	Destination	Road Distance (km)	By Air (hrs)	By Rail (hrs)
This is the table caption
Sydney	Adelaide	1412	1.4	25.3
Sydney	Brisbane	982	1.5	16
Sydney	Canberra	286	.6	4.3
Sydney	Melbourne	872	1.1	10.5
Adelaide	Perth	2781	3.1	38
Adelaide	Alice Springs	1533	2	20.25
Adelaide	Brisbane	2045	2.15	40

To do that you just need to declare a literal object (configuration object) in which you specify which filters should be displayed as drop-down lists or simply hidden:

<script language="javascript" type="text/javascript">
	var table3Filters = {
		col_0: "select",
		col_4: "none",
		btn: true
	}
 	var tf03 = setFilterGrid("table3",2,table3Filters);
</script>

<script language="javascript" type="text/javascript">
	var table3Filters = {
		col_0: "select",
		col_4: "none",
		btn: true
	}
	var tf03 = new TF("table3",2,table3Filters);
	tf03.AddGrid();
</script>

You can name the configuration object as you want, but don't forget to add it to the parameters of the setFilterGrid() function or TF class. It is important to respect the syntax and naming convention as shown above. There are only 2 values: "none" hides the text box for the designated column and "select" creates a drop-down list with only 1 occurrence of each cell data. Similarly to row designation, here the first column is column number 0: col_0.

The button "go" in the grid can also be changed. By adding the btn_text property with a desired value, you can modify the text of the button. You will find an exhaustive list of properties in the documentation page.

Documentation

For more information about the script configuration check the documentation page.

Last thing...

I hope you will find this script useful. Feel free to use and change this script, however I will be grateful if you could inform me about any usage or modification.

Search results