JSFiddle - React, Tailwind, and code Playground

by whelkaholism

HTML

<table>
  <thead>
    <tr data-bind="sorter: Sorter">
      <th><input data-bind="textInput: Name"/></th>
      <th><input data-bind="textInput: Code"/></th>
    </tr>
  </thead>
 <tbody>
    <tr>
      <td>Name 1</td>
      <td>Code 1</td>
    </tr>
    <tr>
      <td>Name 2</td>
      <td>Code 2</td>
    </tr>
  </tbody>
</table>

CSS

.sorter { display: flex; flex-direction: column;}
.sorter .up:before { content: 'Up' }
.sorter .clear:before { content: 'Clear' }
.sorter .down:before { content: 'Down' }

JavaScript

if (typeof (ko.getBindingsForNode) == 'undefined')
 {
     ko.getBindingsForNode = function(el)
     {
         return ko.bindingProvider['instance'].getBindings(el, ko.contextFor(el));
     };
 };

 if (typeof (ko.getBindingValueForNode) == 'undefined')
 {
     ko.getBindingValueForNode = function(el, binding)
     {
         var bindings = ko.getBindingsForNode(el);

         return bindings && bindings[binding] && ko.unwrap(bindings[binding]);
     };
 };

if (typeof (Node.prototype.wrap) == 'undefined')
{
    Node.prototype.wrap = function(wrapper)
    {
        // creating a temporary element to contain the HTML string ('wrapper'):
        var temp = document.createElement('div'),
            // a reference to the parent of the first Node:
            parent = this.parentNode,
            // a reference to where the newly-created nodes should be inserted:
            insertWhere = this.previousSibling,
            // caching a variable:
            target;

        // setting the innerHTML of the temporary element to what was passed-in:
        temp.innerHTML = wrapper;

        // getting a reference to the outermost element in the HTML string passed-in:
        target = temp.firstChild;

        // a naive search for the deepest node of the passed-in string:        
        while (target.firstChild)
        {
            target = target.firstChild;
        }

        target.appendChild(this);

        // inserting the created-nodes either before the previousSibling of the first
        // Node (if there is one), or before the firstChild of the parent:
        parent.insertBefore(temp.firstChild, (insertWhere ? insertWhere.nextSibling : parent.firstChild));
    }
}

if (typeof (NodeList.prototype.wrap) == 'undefined')
{
    NodeList.prototype.wrap = function(wrapper)
    {
        // creating a temporary element to contain the HTML string ('wrapper'):
        var temp = document.createElement('div'),
...