Sortable table using knockout.js and jqueryUI

Question

I'm trying to create a sortable table using knockout.js and jqueryUI but not sure if I'm using a wrong approach. I'm using the following JSON structure for my data: ``` { "columns":[ "Header 1", "Header 2", "Header 3" ], "rows":[ { "Values":[ "Col1Item0", "Col2Item0", "Col3Item0" ] }, { "Values":[ "Col1Item1", "Col2Item1", "Col3Item1" ] }, { "Values":[ "Col1Item2", "Col2Item2", "Col3Item2" ] }, { "Values":[ "Col1Item3", "Col2Item3", "Col3Item3" ] }, { "Values":[ "Col1Item4", "Col2Item4", "Col3Item4" ] }, { "Values":[ "Col1Item5", "Col2Item5", "Col3Item5" ] } ] } ``` I have no problem binding this to the table and displaying it. I can enable sortable using jqueryUI sortable event, but when it's time to collect the results I'm stuck. I found some resources on how to sort the list but nothing on sorting the table. The expected outcome of the sort would be a re-arranged JSON structure I provided with the correct sort order. I've attempted using ko.toJSON(this) to save the result in the hi…

Accepted Answer

I have a sortable binding here: github.com/rniemeyer/knockout-sortable. It let's you replace foreach: myData with sortable: myData and keeps your up-to-date with the current order in the UI.

You can also pass options in like:

```
<tbody data-bind="sortable: { data: rows, options: { handle: '.sortableHandle', cursor: 'move' } }">
```

Or configure global defaults like:

```
ko.bindingHandlers.sortable.options.handle = ".sortableHandle";
```

Here is your sample updated to use it: http://jsfiddle.net/rniemeyer/fC2DT/

Sortable table using knockout.js and jqueryUI

Solution

Problem