Hello one and all. Today’s bit of code: an updated and enhanced version of the popular JavaScript library TableKit, created by Andrew Tetlaw at Millstream. TableKit gives you the ability to turn any HTML table into a dynamic object, capable of being intelligently sorted by any column, resizable columns, and even in-place editing, by simply adding “sortable”, “resizable”, and “editable” to the table’s class tag.
I won’t go into extensive detail on why this is awesome. Here’s a little demo to play with though, to get the point. Click on column headers (in-line editing is not included for this, but you can find more about that at the link above):
| First Name | Last Name | Age | Teacher |
|---|---|---|---|
| Bill | Smith | 12 | Thompson |
| Joe | Cool | 11 | Wright |
| Amy | Rogers | 12 | Wright |
| Susan | Thompson | 13 | Greggs |
After including prototype.js and tablekit.js, all I had to do was define the table like this:
<table class="sortable resizable" width="500">
At this point, the table should be sortable, and you should be able to resize the columns by dragging the barrier between the column headers. You’ll notice alternating row colors remain alternating. All the formatting (including sort color, the up/down arrows, alternating rows) are all defined as CSS properties, so you can modify them easily. We’ll get to the CSS later on.
While that’s cool (and it IS damn cool, admit it), it isn’t why I’m bothering to stay up late and write a post. I extended this library to give it a new property – “linkable”. It combines the “ConvertTableRowtoHyperlink” (CTRtH) script published a few years back and rolls it into the function of TableKit. The script will also scan all rows of a given table for the first link it comes across. It then creates a function which highlights the row on mouseOver, returns to previous state on mouseOut (preserving the pretty alternating colors created by TableKit). Clicking anywhere on the row will take you to the link. If it finds more than one link, it takes the one furthest to the left. Personally, I think lots of links in a single table isn’t the best plan, but if you want it to give up on rows with more than one link rather than picking the furthest left, there’s instructions on line 90 of the script on how to do this.
Added benefit! In the old CTRtH, you had to explicitly give the ID of each table, invoke separately, and ask the script to do the row conversion. This broke with a number of things, including AJAX updates (ended up including the JS in a partial on one project). Mostly though, it meant I couldn’t have a nice, clean table with TableKit and CTRtH running in tandem. So, I spent a flight from DC to Denver figuring out what was conflicting where, and getting the two to play nicely. Now you have an extended TableKit, which will also happily convert table rows to links when given the property “linkable”, like this:
<table class="sortable resizable linkable" width="600">
| First Name | Last Name | Age | Search Engine |
|---|---|---|---|
| Bill | Smith | 12 | |
| Joe | Cool | 11 | Yahoo |
| Amy | Rogers | 12 | Bing |
| Susan | Thompson | 13 |
Usage
Alright, down to business.
1) Download prototype.js and my new tablekit.js file. Include these in your header, ideally.
2) Make sure you add sortable, resizable, or linkable to the CSS class of any table you want to behave this way. You can give it an ID, but you don’t have to. However, like with many JS functions, if you have multiple elements with the same ID, you’ll only affect the first one. If you don’t give it an ID, one will be assigned in sequential order.
3) Here’s what you’ll need to add to your CSS to make it look like mine and behave as you’d expect. You’ll almost certainly want to change the colors, but other than that you should be good, I’ve tried to keep the CSS as minimal as possible so as not to interfere with your other stuff.. Notice the up and down arrows are also just background elements, so point them at your own up.png/down.png location.
/**********Table Sorting Stuff****************/
tr.rowodd {
}
tr.roweven {
background-color: #F2F2F2;
}
tr.highlight {
background-color: #F2F29F;
cursor: pointer;
}
tr a{
text-decoration: none;
}
.sortcol {
cursor: pointer;
padding-right: 20px;
background-repeat: no-repeat;
background-position: right center;
}
.sortasc {
background-color: #DDFFAC;
background-image: url(images/up.png);
}
.sortdesc {
background-color: #B9DDFF;
background-image: url(images/down.png);
}
.nosort {
cursor: default;
}
th.resize-handle-active {
cursor: e-resize;
}
div.resize-handle {
cursor: e-resize;
width: 2px;
border-right: 1px dashed #1E90FF;
position:absolute;
top:0;
left:0;
}
/********* END Table Sorting Stuff *********/
