JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<table id="sortableTable">
    <thead>
        <tr data-bind="foreach: columns">
            <th data-bind="text: $data"></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: rows">
        <tr data-bind="foreach: $data.Values">
            <td data-bind="value: $data" class="sortableHandle">	<span data-bind="text: $data"></span>

                <input type="text" style="display:none;" data-bind="value: $data" />
            </td>
        </tr>
    </tbody>
</table>
<input id="hfResult" data-bind="value: ko.toJSON($root)" />

CSS

th {
    font-weight:bold;
}
td, th {
    padding:5px;
}

JavaScript

var data = {
    
        "List": [{
        "Values": ["Col1Item0", "Col2Item0", "Col3Item0"]
    }, {
        "Values": ["Col1Item1", "Col2Item1", "Col3Item1"]
    }, {
        "Values": ["Col1Item2", "Col2Item2", "Col3Item2"]
    }, {
        "Values": ["Col1Item3", "Col2Item3", "Col3Item3"]
    }, {
        "Values": ["Col1Item4", "Col2Item4", "Col3Item4"]
    }, {
        "Values": ["Col1Item5", "Col2Item5", "Col3Item5"]
    }]
};
var model = {
    rows: ko.observableArray(data.List)
}

var onReady = function () {
    ko.applyBindings(model);

    //Enable sortable
    $('#sortableTable tbody').sortable({
        helper: fixHelper,
        handle: $('.sortableHandle'),
        cursor: 'move',
        stop: saveItemOrder
    });
    console.log('reorder initialized');

}

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

function saveItemOrder() {
    $('#hfResult').val(ko.toJSON(this));
}

$(document).ready(onReady);