Ever wanted to have an HTML drag and drop sortable table in which you could sort both rows and columns? I know it's something i'd die for. There's a lot of sortable lists going around but finding a sortable table seems to be impossible to find.

I know that you can get pretty close with the tools that provides but i ran into some cross-browser issues with them.


How about sorttable? That would seem to fit your requirements nicely.

It's rather easy to use - load the sorttable Javascript file, then, for each table you want it to make sortable, apply class="sortable" to the <table> tag.

It will immediately understand how to sort most types of data, but if there's something it doesn't, you can add a custom sort key to tell it how to sort. The documentation explains it all pretty well.

David Precious
Except that there's no dragging nor dropping. I need to be able to sort the table the way i want it row by row, and not by some rule.
Ah, sorry, my bad.
David Precious
+1  A: 

I recommend Sortables in jQuery. You can use it on list items or pretty much anything, including tables.

jQuery is very cross-browser friendly and I recommend it all the time.

I couldn't get the jQuery sortable to work in a table. It just drags the whole table around or individual cells. But no row based dragging.

If you don't mind Java, there is a very handy library for GWT called GWT-DND check out the online demo to see how powerful it is.

I don't mind Java but someone else might :) But seriously, Java feels a bit heavy.
Using Java because you want a sortable table seems like using a sledgehammer to hammer in a screw.
David Precious
+1  A: 

I've used dhtmlxGrid in the past. Among other things it supports drag-and-drop rows/columns, client-side sorting (string, integer, date, custom) and multi-browser support.

Response to comment: No, not found anything better - just moved on from that project. :-)

You used it in the past.. Does that mean that you found something better ;) I spent some time digging into it and it seems to be everything i wanted. Thanks for the help!
+1  A: 

Most frameworks (Yui, MooTools, jQuery, Prototype/Scriptaculous, etc.) have sortable list functionality. Do a little research into each and pick the one that suits your needs most.

+2  A: 

I've used jQuery UI's sortable plugin with good results. Markup similar to this:

<table id="myTable">
<tbody class="sort">
<tr id="1"><td>1</td><td>Name1</td><td>Details1</td><tr>
<tr id="2"><td>2</td><td>Name1</td><td>Details2</td><tr>
<tr id="3"><td>3</td><td>Name1</td><td>Details3</td><tr>
<tr id="4"><td>4</td><td>Name1</td><td>Details4</td><tr>

and then in the javascript

    cursor: 'move',
    axis:  'y',
    update: function(e, ui) {
     href = '/myReorderFunctionURL/';
     sorted = $(this).sortable("serialize", 'id');
      type: 'POST',
      url: href,
      data:  sorted,
      success: function(msg) {
       //do something with the sorted data

This POSTs a serialized version of the items' IDs to the URL given. This function (PHP in my case) then updates the items' orders in the database.

David Heggie

David Heggie's answer was the most useful to me. It can be slightly more concise:

var sort = function(event, ui) {
  var url = "/myReorderFunctionURL/" + $(this).sortable('serialize');
  $.post(url, null,null,"script");  // sortable("refresh") is automatic

  cursor: 'move',
  axis: 'y',
  stop: sort

works for me, with the same markup.

+2  A: 

Read what he says:

"Ever wanted to have an HTML drag and drop sortable table in which you could sort both rows and columns"

Columns AND Rows. Nothing out there does that. Everyone here is way off.