CODEWITHSUNDEEP
jqueryjquery-uihtml-tablejquery-ui-sortable
CodeVirtuoso
CodeVirtuoso

Reputation: 6438

JS jQuery - Make HTML Table columns sortable (by drag'n'drop)

I have a very simple HTML table, to which jQuery sortable is applied so that user can reorder rows by drag'n drop:

http://jsfiddle.net/umRJr/201/

What I'm trying to do without success is have this same table sortable by columns too. That is, to allow user to drag'n drop columns too.

How can this be done?

Any ideas appreciated, whether with js, jQuery or just conceptual.

Upvotes: 1

Views: 6759

Answers (3)

Clarence Liu
Clarence Liu

Reputation: 4019

Well if you didn't know sortable works in a grid mode (left to right), so it's possible to have columns with floating divs and a set width.

You could rework your interface to toggle between a sort row and sort column mode. In column mode you'd use divs to wrap each column, which can be a single column table. Then you could re-order your columns, then toggle back to the row sort mode to sort the rows. It'd be kind of cool.

Upvotes: 0

CodeVirtuoso
CodeVirtuoso

Reputation: 6438

I've found a super-simple, pure-js library that does just that:

http://www.danvk.org/wp/dragtable/

It's pure javascript and doesn't need jQuery.

Upvotes: 2

ninty9notout
ninty9notout

Reputation: 1116

Though I don't have a complete solution for you, I do have something that will help you achieve your goal.

I did a quick Google search regarding sorting columns and came across this plugin which sorts the columns.

http://jebaird.com/dev/project/dragtable/demo.htm

Since you already know how to sort rows, I'm sure you can apply your code - after this plugin has been applied to order both rows and columns.

Hope this help.

Good luck with your project.

Upvotes: 1

Related Questions