Drag and drop sorting of table columns with jQuery

Question

I'm using jQuery to drive my AJAX UI. I have a table of data, and I want to allow the user to reorder the columns in the table by dragging and dropping them. I'd like the user to be able to grab the header for a column and move it. The row of data underneath should follow. Note that I'm not interested in sorting the data or in reordering rows, but in allowing the user to change the order of the columns.

Is there an existing solution? I tried using the standard jQuery sortable call on the <th> elements, but of course that doesn't work. I browsed through the jQuery plugins site and didn't find anything. Will I need to write a jQuery plugin?

Edit: Note that jQuery, Dojo, etc. (the free ones) are really the only option for a JS framework. I can't get a license for anything commercial like ExtJS.

Answer 1

If you are willing to pay for a license you might try Ext JS instead of just jQuery. There are some pretty powerful grid features that include what you are trying to do.

http://www.extjs.com/deploy/dev/examples/grid/array-grid.html

Answer 2

You should try Dragtable by Danvk

I found this question while searching for a fix to a bug in it though. It doesn't like tables positioned in horizontally scrolling panels.

Aside from this it's fantastic.