dragtable: Visually reorder all your table columns
class=sortable to a
table tag and its column headers automatically support click to sort. Pretty slick.
But sometimes sorting just isn’t enough. What if you want to focus on just one or two of the columns in a table? In a client-side application you could drag the columns you care about next to each other. Why not in a web application?
Enter dragtable. Like sorttable, it teaches HTML tables a new trick through a simple
class attribute. Here’s a sample:
Drag the column headings to rearrange the data in this table. This is a plain old HTML table with
kMaxDHTMLGoodness, use sorttable and dragtable on the same table! Just set
To make the columns of a table reorderable, just follow these three easy steps:
- Include the library by putting this in your document’s HEAD:
- Mark the table whose column headers you want to be draggable by
giving it a class of “draggable”:
That’s it! Your table will instantly become interactive.
Which browsers does dragtable work with?
These are just the browsers I’ve checked. If you try dragtable on
a browser not listed here, please let me know whether it works. dragtable
should work for at least 99% of all web surfers.
|Firefox 3 RC2||Yes|
dragtable keeps forgetting my column ordering!
If you set an id on your table, dragtable will save all column reorderings for that table in a cookie and replay them the next time you visit the page. If you don’t want it to do this, either 1. don’t set an id or 2. set
How does dragtable distinguish a click from a drag?
This should only be relevant if you’re using dragtable together with sorttable. If a user clicks a column header and then moves the mouse some amount, dragtable assumes they want to rearrange the columns. If they don’t move the mouse very much, dragtable considers it a click and sorttable will take it as a cue to sort on that column. The exact cutoff is a 10 pixel radius, but you can customize this by calling:
somewhere on your page.
I found a bug/have a feature request
I’ve closed the comments below due to spam. If you have issues to report, please do so on the issue tracker.