Adding hideable columns to plain HTML Tables using Prototype

I present to you a bit of Javascript code which enables users to change which columns should be visible or hidden in plain HTML tables. It is built using Prototype 1.6.

Click here to see a simple demo. You can grab the javascript code and default style from the demo page.

You enable the behaviour like this:

new AdjustableTableFields($('your-table-id'));

Note that the demo page enables the behaviour by table class name (in a ‘dom:loaded’ event handler).

There’s a few options for you to enjoy:

Add an attribute named “cookie-name” to your table element to have the browser remember the selected columns:

<table class="adjustable-table" cookie-name="demo">

Add an attribute named “unhidable” to the right th element to ensure the user cannot hide a certain column:

<th unhidable="true">ID</th>

Add an attribute named “display-name” to the right th element to use a different name on the checkbox than the TH content:

<th display-name="Fav. Dict.">Favorite Dictator</th>

That’s all there is to it, have fun!