Sorting a HTML Table With jQuery Quicksand

Question

This is my HTML table

<table class="table table-condensed">
      <thead>
        <tr>
          <th class="">ID</th>
          <th class="">Name</th>
          <th class="">Skill</th>
        </tr>
      </thead>
      <tbody id="leaderboard" data-bind="foreach: ArrayOfPlayers">
        <tr>
          <td data-type="id" data-bind="text: id"></td>
          <td data-bind="text: name"></td>
          <td data-type="skill" data-bind="text: skill"></td>
        </tr>
      </tbody>
    </table>

Quicksand:

// Custom sorting plugin
(function($) {
 $.fn.sorted = function(customOptions) {
var options = {
  reversed: true,
  by: function(a) { return a.text(); }
};
$.extend(options, customOptions);
$data = $(this);
arr = $data.get();
arr.sort(function(a, b) {
  var valA = options.by($(a));
  var valB = options.by($(b));
  if (options.reversed) {
    return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;                             
  } else {         
    return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;     
  }
});
return $(arr);
};
})(jQuery);


$(window).bind("sortByRank",
function() {

// get the first collection
var $leaderboard = $('#leaderboard');

// clone leaderboard to get a second collection
var $data = $leaderboard.clone();

var $filteredData = $data.find('tr');

// if sorted by rank
var $sortedData = $filteredData.sorted({
    by: function(v) {
      return parseFloat($(v).find('td[data-type=skill]').text());
    }
});

// finally, call quicksand
$leaderboard.quicksand($sortedData, {
    duration: 1000,
    easing: 'easeInOutQuad'
});

});

I have borrowed the quicksand code from their documentation: http://razorjack.net/quicksand/demos/one-set-clone.html

It works for a list like in the example but when I try to sort this table the elements disappear.

When I execute the following $sortedData contains the elements in the correct order.

var $sortedData = $filteredData.sorted({
    by: function(v) {
      return parseFloat($(v).find('td[data-type=skill]').text());
    }
});

The code breaks down when I call quicksand.

$leaderboard.quicksand($sortedData, {
    duration: 1000,
    easing: 'easeInOutQuad'
});

There are no errors in chrome's developer console.

Any ideas how I'd go about solving this? Also any tips regarding how I could debug JavaScript problems like these in the future will be appreciated!

Edit: I realized the tr tag requires a data-id attribute. Now sorting is happening but while the animation is running the styling of the table breaks. After the animation finishes it works again.