Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Fixed Width Sortable Tables Row with jQueryUI

DZone's Guide to

Fixed Width Sortable Tables Row with jQueryUI

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

When you use jQuery UI sortable function on a table I've noticed that it will collapse the width of the row you're dragging which can lead to a strange user experience. In this tutorial we are going to see how you can use a helper function to change the width of dragging rows back to the original width.

Have a look at the demo to see the difference.

Demo

jQuery Sortable is part of the jQuery UI library which can be found below.

jQuery Sortable

To define a table to have sortable rows all you have to do is apply the sortable method to the parent element of the row, which normal would be the table itself or ideally the table body.

<table>
<thead>
<tr>
<th>Film</th>
<th>Date</th>
<th>Rating</th>
</tr>
</thead>

<tbody>
<tr>
<td>The Shawshank Redemption</td>
<td>1994</td>
<td>9.2</td>
</tr>
</tbody>
</table>

Then you can make the table body rows sortable by using the following jQuery code.

$('table tbody').sortable();

One of the options you can use on the sortable method is helper property where you can define a function to run when dragging the display. Therefore we simply need to create a function that will reset the width of the table row by simply using the function below.

$('table tbody').sortable({
    helper: fixWidthHelper
}).disableSelection();

function fixWidthHelper(e, ui) {
    ui.children().each(function() {
        $(this).width($(this).width());
    });
    return ui;
}

Demo


Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
html5 ,jquery

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}