TableFilter

Problem

When viewing large tables of data via a web interface, it's often desirable to limit the visible rows to a single column's value. This can be done very efficiently through backend coding, but can require knowledge of programming languages and more access to a server environment than many users have or want.

In the case where the data set is large enough to be unwieldy, but not so large or business-critical to need a multi-tiered system to manage this filtering, it may be good enough to just do all filtering on the client side.

Solution

TableFilter is a lightweight JavaScript solution to this problem, with no external dependencies and a quick installation procedure. It can be downloaded here.

There are two demos available to illustrate the effects of this script on static HTML tables: demo one (standalone) and demo two (with sorttable).

How to use TableFilter:

Download the tablefilter.js script.
Make sure the table to be filtered has an id:
```
<table id="some_id">
```

Add the tablefilter script:

<script type='text/javascript' src='tablefilter.js'></script>

Set up the script to initialize the table when the page loads.

<script type='text/javascript'>
//<![CDATA[
  function tablefilter_init() {
    TableFilter.makeFilterable( 'some_id', 0 );
  }

  addEvent( window, 'load', tablefilter_init );
//]]>
</script>

Optional: Add CSS styling for the reset button. The following is just an example; feel free to modify as needed.

.tablefilter_reset {
  background-color: #eeeeee;
  color: #666666;
  text-decoration: underline;
  cursor: pointer;
}

Unobtrusive DHTML

While today's web design tends to shy away from tables, they remain the simplest way to display a legitimate table of data, be it static hand-coded HTML or simple views into a database.

A major driving goal in building the TableFilter code was to allow the filtering functionality to work on a normal HTML table, while requiring nothing more of the HTML writer than the addition of an ID to the table and a very small snippet of JavaScript.

This JavaScript also will not cause breakage of standard DHTML functionality on browsers which do not support JavaScript at all. The filtering functionality won't be added, obviously, but at least the table will display as it always has.

Acknowledgements

Thanks to Stuart Langridge for his very useful sorttable JavaScript. I've used this for quick & dirty admin tools quite a few times now, and it inspired me to write this as a companion script.