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!
