06.12.08
Draggable Table Columns
Inspired by the sorttable library, I’ve done some Javascript hacking over the last day and created dragtable, a complementary library which lets you drag column headers around to rearrange HTML tables. A demo will make everything clear:
|
Drag the column headers to rearrange the table. dragtable is incredibly easy to use. To make a table rearrangeable, just add class=draggable to the table tag. And, if you set class="draggable sortable", you can have a table that’s simultaneously sortable and rearrangable! For more details and a download link, check out the dragtable page.
I’m calling this v0.9 since I’m sure there are plenty of bugs and tweaks left to make. I’d love to get some feedback, so take it for a spin and tell me what you think!
Update: I’ve added full-column dragging and bumped the version to 1.0. Head on over to the dragtable, grab a copy, and let me know what you think!
Craig said,
June 12, 2008 at 5:34 am
Very cool. Live updating would be sweet, and is sort of what I expected as I dragged.
danvk said,
June 12, 2008 at 8:58 am
Yeah, I wanted to start with something functional. Next up will be dragging the whole column (rather than just the header) and then maybe some kind of live updating.
Ryan said,
June 12, 2008 at 10:25 am
I wouldn’t make the whole column draggable, people will want to be able to select the text.
danvk said,
June 12, 2008 at 10:40 am
I should have been clearer — you’ll still drag the header. But instead of just showing the header floating around the page as you drag, it will show the entire column moving. The ultimate goal would be something like what Craig described. People have done live updates before — http://tool-man.org/examples/sorting.html is similar, only with lists instead of columns.
Martin said,
June 23, 2008 at 8:32 am
Loved the example, just what I am looking for.
The only problem is the js file is not there to download.
Any idea what’s happened?
danvk said,
June 23, 2008 at 8:50 am
Thanks for the catch, Martin! I’ve fixed the link, you should be able to download dragtable.js now.
Martin said,
June 26, 2008 at 12:24 pm
Using this code, works a treat, so far.
I notice the underlying html is not modified so that when the page is refreshed it reverts to the original column layout.
Is there a way of preserving the new layout when a page is refreshed or you move to a new page (for printing for example), perhaps by giving each column a unique identifier and the storing the order they are put in and those variable checked first when the page refreshes/changes else going to the default layout?
Javscript is not my strongest area so maybe I’m not seeing the wood for the trees but I can’t pick out where the column references are in the code.
Any ideas?
danvk said,
June 26, 2008 at 12:46 pm
Martin — you’re right, this is certainly a drawback of dragtable (and sorttable). The right solution is to store a cookie for each table that remembers the column ordering and the sorting. I think this is more of a version 1.5 or 2.0 kind of feature, but I’ve gone ahead and created an issue for it on my google code page: http://code.google.com/p/dragtable/issues/detail?id=3
Colin said,
June 28, 2008 at 7:11 pm
This is very good. How do you get the column to visually follow the mouse?
On my table when I drag a column nothing changes visually until I release the mouse button.
Colin said,
June 30, 2008 at 4:39 pm
I have a table with 8 columns and everything drags correctly.
On another page I have a table with 11 columns and it seems that the drag result is often random - and I can’t drag column 11 at all.
Is there a limit to the number of columns I can have in my table?