HTML drag and drop sortable tables

Question

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 script.aculo.us provides but i ran into some cross-browser issues with them.

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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. :-)

Answer 5

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.

Answer 6

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

<table id="myTable">
<thead>
<tr><th>ID></th><th>Name</th><th>Details</th></tr>
</thead>
<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>
</tbody>
<table>

and then in the javascript

$('.sort').sortable({
    cursor: 'move',
    axis:  'y',
    update: function(e, ui) {
     href = '/myReorderFunctionURL/';
     $(this).sortable("refresh");
     sorted = $(this).sortable("serialize", 'id');
     $.ajax({
      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.

Answer 7

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
}

$(".sort").sortable({
  cursor: 'move',
  axis: 'y',
  stop: sort
});

works for me, with the same markup.

Answer 8

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.