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

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 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

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