TableFilter is a lightweight JavaScript enhancement to standard DHTML tables, allowing a filtered view of the data by column values. It has no external JavaScript dependencies, and a very quick, unobtrusive installation procedure.
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.
I began writing this after using Stuart Langridge’s excellent sorttable in a number of quick & dirty admin tools. I wanted something that satisfied the principles of unobtrusive DHTML, and which allowed me to add functionality without much effort.
TableFilter is in its initial version, so if anyone finds any bugs, or has any suggestions, I’d love to hear about them.
March 13th, 2006 at 3:43 pm
Very nice. We were just struggling with some sorting/filtering UI questions at work the other day. We currently use dropdowns with the different options at the top of the tables. Not only is this clumsy, but it doesn’t exactly follow the standard column-header/arrow convention. I like what you’ve got. My only criticism might be that it’s unclear to the user that sorting/filtering is available. Especially the latter. When clicking on the item in the table, I wouldn’t expect filtering to take place. Unfortunately the other suggestions I can think of are all much less elegant.
March 14th, 2006 at 4:54 am
For the filtering, I was toying with the idea of just adding a little button to one corner or the other of each cell, but instead just went with title attributes, which should give you mouseover text.
If I get the time to play with this some more, I’d love to give it a few options as to how it displays the filterability. I’m not particularly happy either with the reset button at the bottom of the table; I could never get the example CSS set in a way I really liked.