Contact us


This jQuery plugin adds real time Google-like column filtering capabilities to a regular Html table. This is an open source project released under The MIT License (MIT).

The PicNet Table Filter is used in production in several PicNet projects so it has been tested production ready. The table filter was born out of our Visual Analytics (Mouse Eye Tracking) project and has received great feedback.


Was this plugin useful for you?

PicNet - Google+

The PicNet Table Filter is free, so we appreciate if you would help out - let us know how you've used the table filter in your project by writing a review on Google+


Example of Use: PicNet Stock Screener

PicNet Stock Screener

The PicNet Stock Screener is a show case of the PicNet Orchestra, PicNet Table Filter and our software engineering capabilities, it allows you to select stocks based on multiple search criteria, something that takes a long time to do manually in particular if the process needs to be repeated.


Getting Started

The easiest way to get started is to download the release and have a look at the tablefilter_demo.htm included in the release.

To use this plugin you need to add a scripts reference to:

Example:

<script type="text/javascript" src="Scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="Scripts/picnet.table.filter.js"></script>

Or (For Production Code - Packed)

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/picnet.table.filter.min.js"></script>

This plugin will then create the filters in a row in the THEAD element of the table so add this if it is not already there.

<table id='demotable'>
	<thead>
		<tr><th>Col1</th><th>Col2</th><th>Col3</th></tr>
	</thead>
	<tbody>
		<tr><td>Value 1</th><th>Value 2</th><th>Value 3</th></tr>
		....
	</tbody>
</table>

Hook in your table when the document is loaded.

$(document).ready(function() {
	$('#demotable').tableFilter();
});

Search Features

The Quick Find feature supports the following features.

Name Example
AND Expressions red AND blue
OR Expressions red OR blue
Quotes (Phrases) "red and blue"
Groups red AND (blue OR green)
NOT Expressions red AND NOT (blue OR green)
Numeric Expressions
Equals
Not Equals
Greater Than
Greater Than or Equals
Less Than
Less Than or Equals
(Only works on numeric values)
= 150
!= 150
> 150
>= 150
< 150
<= 150

Filter Types

Currently the picnet.table.filter.js only supports two kinds of filters. The first and default is 'text' which just produces a text box for context sensitive text matches. The second is 'ddl', this produces a drop down list that allows the selection of a single item in that list. To specify the filter type simply add filter-type='ddl' in the header cell of the required column.

To disable the filtering on that column set filter='false'

<table id='demotable'>
	<thead>
		<tr><th>Col1</th><th>Col2</th><th filter-type='ddl'>Col3</th></tr>        
	</thead>
	<tbody>
		<tr><td>Value 1</th><th>Value 2</th><th>Value 3</th></tr>        
		....
	</tbody>
</table>

Options

We can also pass an options object to control some basic behaviours of the tableFilter. The current supported options are.

  • additionalFilterTriggers: These are additional input controls that will be hooked in to the filter code. Currently only type='text' and type='checkbox' controls are supported.
  • clearFiltersControls: Controls that onclick will clear all of the filter values (including additionalFilterTriggers).
  • filterDelay (Default 200ms): The delay (in milliseconds) from the moment a key down event occurs that filtering begins.
  • selectOptionLabel (Default 'Select...'): The select text in drop down lists that is displayed.
  • matchingRow: function(state, tr, textTokens) { ... } These event will allow you to determine wether a matching row is actually correctly matching. This event will be called when a row is considered to have matched the filter, returning false will override this assumtion and hide the row from the results.
  • filteringRows: function(filterStates) { ... } This event is called before filtering begins. Note: Filtering cannot be cancelled with this event;
  • filteredRows: function(filterStates) { ... } This event is called after filtering is completed.
  • enableCookies saves the filter states between browser sessions. Default state is 'true'.

Example 1: Adding an additional whole row filter

Lets suppose that appart from having column filters we also want to have a quick find style filter that matches any cell in a row. To do this simply add the textbox to the additionalFilterTriggers array.

<head>
	...
	<script type="text/javascript">
		$(document).ready(function() {
			// Initialise Plugin
			var options = {
				additionalFilterTriggers: [$('#quickfind')]
			};
			$('#demotable').tableFilter(options);
		});
	</script>
</head>
<body>
	Quick Find: <input type="text" id="quickfind"/>
	<table id='demotable'>
		<thead>
			<tr><th>Col1</th><th>Col2</th><th>Col3</th></tr>
		</thead>
		<tbody>
			<tr><td>Value 1</th><th>Value 2</th><th>Value 3</th></tr>
			...
		</tbody>
	</table>
	...

Example 2: Adding an additional checkbox filter

Let's suppose that we have a Boolean column that we want to filter. The best way to do this will be to add a checkbox filter so let's do this. We will keep the quick find filter to show how to have multiple additional filters.

<head>
	...
	<script type="text/javascript">
		$(document).ready(function() {
			 // Initialise Plugin
			var options = {
                                                                      additionalFilterTriggers: [$('#onlyyes'), $('#quickfind')],
                                                                      matchingRow: function(state, tr, textTokens) {
                                                                    if (!state || state.id != 'onlyyes') { return true; }
		                        return state.value != true || tr.children('td:eq(2)').text() == 'yes';
				}
			};
			 $('#demotable').tableFilter(options);
		});
	</script>
</head>
<body>    
	Only Show Yes: <input type="checkbox" id="onlyyes"/>
	<br/>
	Quick Find: <input type="text" id="quickfind"/>
	<table id='demotable'>        
		<thead>
			<tr><th>Col1</th><th>Col2</th><th>Boolean Col3</th></tr>
		</thead>
		<tbody>
			<tr><td>Value 1</th><th>Value 2</th><th>yes</th></tr>
			...
		</tbody>
	</table>
	...

Example 3: Clear filters

Having a clear filters button comes in very handy, especially when you have a table with a larger number of columns. To add this functionality simply add your clickable control to the clearFiltersControls array.

<head>
	...
	<script type="text/javascript">
		$(document).ready(function() {        
			// Initialise Plugin
			var options = {
				clearFiltersControls: [$('#cleanfilters')],            
			};
			$('#demotable').tableFilter(options);
		});
	</script>
</head>
<body>
	<a id="cleanfilters" href="#">Clear Filters</a>
	<br/>    
	<table id='demotable'>        
		<thead>
			<tr><th>Col1</th><th>Col2</th><th>Col3</th></tr>        
		</thead>
		<tbody>
			<tr><td>Value 1</th><th>Value 2</th><th>Value 3</th></tr>        
			...
		</tbody>
	</table>
	...	

Example 4: Apply new filter values

When changing the filter values with JavaScript the filtering doesn't trigger automatically. To apply the new filter value use the tableFilterApplyFilterValues() method as seen below.

<head>
	...
	<script type="text/javascript">
		$(document).ready(function() {
			// Initialise Plugin
			var options = {
				additionalFilterTriggers: [$('#quickfind')]
			};
			$('#demotable').tableFilter(options);
		});
	</script>
</head>
<body>
    <input type="submit" value="Set Quick Find filter and refresh table" 
           onclick="$('#quickfind').val('new filter value'); $('#demotable').tableFilterApplyFilterValues();"/>
       <br>
	Quick Find: <input type="text" id="quickfind"/>
	<table id='demotable'>
		<thead>
			<tr><th>Col1</th><th>Col2</th><th>Col3</th></tr>
		</thead>
		<tbody>
			<tr><td>Value 1</th><th>Value 2</th><th>Value 3</th></tr>
			...
		</tbody>
	</table>
	...

Example 5: Refresh table data

When adding or changing the table rows with JavaScript the cache of table rows need to be refreshed. To refresh the cache use the tableFilterRefresh() method as seen below.

<head>
	...
	<script type="text/javascript">
		$(document).ready(function() {
			// Initialise Plugin
			var options = {
				additionalFilterTriggers: [$('#quickfind')]
			};
			$('#demotable').tableFilter(options);
		});
    
		function addNewTableRow() {
			....
		}
	</script>
</head>
<body>
    <input type="submit" value="Add a new table row" 
           onclick="addNewTableRow(); $('#demotable').tableFilterRefresh();"/>
       <br>
	<table id='demotable'>
		<thead>
			<tr><th>Col1</th><th>Col2</th><th>Col3</th></tr>
		</thead>
		<tbody>
			<tr><td>Value 1</th><th>Value 2</th><th>Value 3</th></tr>
			...
		</tbody>
	</table>
	...

Known Limitations

  • More custom filter types needed (such as multi select lists, radio lists, etc)
  • No support for custom additional filters other than checkbox.

Featured In