ActsAsTreeTable: a jQuery Plugin

NOTE: ActsAsTreeTable has been renamed to treeTable. Please read jQuery treeTable 2.0 to see what has changed.

Lately, I have started doing more and more with JavaScript. I’ve developed some useful snippets that I use in a new project that I am currently working on. One of these snippets is something that I have been looking for since a long time: a good way of displaying a collapsable tree in a table. If you don’t understand what I mean then you should open your favorite file explorer in your operating system. Almost all of these applications have a way of displaying a directory structure in a tabular format. The leftmost column commonly shows a tree of your directories with several columns on the right containing additional information on your files and folders, and each directory can be expanded/collapsed. This is what I wanted to display in a web browser, using a table.

After jotting down the structure and design on a piece of paper I downloaded the latest version of jQuery, read some documentation on authoring plugins and started coding. And now, twenty-four hours later, this is the result:

My very first jQuery plugin! ActsAsTreeTable allows you to turn a column in your table into a tree. The plugin has been made as unobtrusively as possible and I have posted it to the jQuery plugin index as ActsAsTreeTable 1.0. To make it as easy as possible to start using the plugin I have also written some documentation. You will also find several examples in this documentation.

NOTE: ActsAsTreeTable has been renamed to treeTable. Please read jQuery treeTable 2.0 to see what has changed.