Friday, June 27th, 2008

dragtable: drag-and-drop reorderable columns for an HTML table

Category: Component, JavaScript

<p>Dan Vanderkam has announced a new component dragtable:

Over the past several years, Stuart Langridge’s sorttable Javascript library has found widespread use. It’s easy to see why. Just add 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.

Once you have the JavaScript in place, you can simply add a class="draggable", and you can even work with both via class="draggable sortable"

Take a peak at a test bed, and the open source project.

Related Content:

10 Comments »

Comments feed TrackBack URI

fantabulous!

Comment by sandro — June 27, 2008

awesome stuff. i love it. and the beauty, it’s MIT licensed! :)

Comment by shadedecho — June 27, 2008

Dojo already has this for dojox.Grid in trunk…
http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/grid/tests/test_grid_column_reorder.html

Comment by psychcf — June 27, 2008

@psychcf-1. it requires Dojo, which is fine except not everyone uses it. dragtable is standalone == more accessible. 2. in my browser the dojo grid sorting and dragging stuff seems incredibly slow. It takes >1sec after a ‘drop’ to update the table. Not so with dragtable.

Comment by shadedecho — June 27, 2008

@shadedecho: Yeah, I can understand the benefits. I probably should have said “also” instead of “already”, I realized that after I posted it but couldn’t edit my comment.

Comment by psychcf — June 27, 2008

Nice and simple, I like it. Some constructive criticism: make the drag cancellable with the escape key or pressing of the second mouse button, and also consider changing the visualization of the dragging so that you drag a translucent column and the header edge where the column will be inserted is highlighted (this way it’s way clearer just where you’re dragging the column to).

Comment by Joeri — June 27, 2008

Great. I second Joeri’s suggestions. I would also add that the drag should be constrained to a horizontal plane.

Comment by Alex Duffield — June 28, 2008

Extremely useful and easy to implement. Please add some coloring so that the user knows where the column will appear.

Comment by Alex — June 30, 2008

Some time ago i´ve developed a similar script for personal use and decided to post it on the web.
If anyone cares to take a look theres the url to my version:
http://bytes.com/forum/thread750692.html

Regards,
Romulo

Comment by graargh — September 11, 2008

thanks Romulo, I didn’t figure out how to get this script to work with dynamically generated table, but yours works out of the box :-)

Comment by lballard — May 8, 2009

Leave a comment

You must be logged in to post a comment.