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?
Cyril said,
November 17, 2008 at 4:16 am
Hi,
This is a very smooth and easy to use, but when the table is long & hidden in scrolling DIV the Drag does not work. :(
Can i find any solution here.
Brad said,
December 8, 2008 at 2:12 pm
I have the same issue- works great, except when the table is wide enough that I need to scroll. Then if I try to grab the rightmost column, it instead selects whatever column occupied that space before I scrolled.
Does that make sense? If your table scrolls horizontally, the javascript doesn’t detect that the columns have moved, so you end up dragging the column that used to be there.
Erwin said,
December 17, 2008 at 6:17 pm
Hi,
I have added a fix for the horizontal scroll of table when the total table width is greater than the screen size. I’m not sure if I have done it perfectly, but so far it seems to be working just fine.
I added this code to dragMove (You can get the getPosition() from this site: http://hartshorne.ca/2006/01/23/javascript_cursor_position/):
// erwin (scroll page horizontally) START
var cursorObject = getPosition(event);
var cursorPosX = cursorObject.x;
var windowOffsetX = screen.width + document.body.scrollLeft;
if ((windowOffsetX-cursorPosX) <= 100)
document.body.scrollLeft += 5;
else if ((cursorPosX-document.body.scrollLeft) <= 100)
document.body.scrollLeft -= 5;
// erwin (scroll page horizontally) END
LePirlouit said,
May 23, 2011 at 12:57 am
Hi danvk,
I want to contribute to this project,
I have solved issue nr 23 about the colspan.
please add me to the project developpers.
brad said,
October 25, 2011 at 7:44 pm
two things i am after:
1. is it possible to lock down one column?
2. how would u add a visual indicator to show where the new column is while being dragged (perhaps something like highlighting the border between the two columns )
otherwise it works great! thanks!