JSFiddle - React, Tailwind, and code Playground

by nachiket

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/combo?2.9.0/build/datatable/assets/skins/sam/datatable.css">
<script src="http://yui.yahooapis.com/combo?2.9.0/build/yahoo-dom-event/yahoo-dom-event.js&amp;2.9.0/build/dragdrop/dragdrop-min.js&amp;2.9.0/build/element/element-min.js&amp;2.9.0/build/datasource/datasource-min.js&amp;2.9.0/build/datatable/datatable-min.js"></script>
<div class="yui-skin-sam" id="datatable"></div>

CSS

.custom-class {
    opacity: 0.6;filter:alpha(opacity=60);
    color:blue;
    border: 2px solid gray;
}

#datatable tr {
     cursor: pointer;
}

JavaScript

YAHOO.example.Data = {
    bookorders: [
        {id:"po-0167", date:new Date(1980, 2, 24), quantity:1, amount:4, title:"A Book About Nothing"},
        {id:"po-0783", date:new Date("January 3, 1983"), quantity:null, amount:12.12345, title:"The Meaning of Life"},
        {id:"po-0297", date:new Date(1978, 11, 12), quantity:12, amount:1.25, title:"This Book Was Meant to Be Read Aloud"},
        {id:"po-1482", date:new Date("March 11, 1985"), quantity:1, amount:3.5, title:"Read Me Twice"},
        {id:"po-1483", date:new Date("April 11, 1986"), quantity:11, amount:3.5, title:"Read Me Twice"},
        {id:"po-1484", date:new Date("March 11, 1987"), quantity:111, amount:3.5, title:"Read Me Twice"},
        {id:"po-1485", date:new Date("March 11, 1988"), quantity:22, amount:3.5, title:"Read Me Twice"},
        {id:"po-1486", date:new Date("March 11, 1989"), quantity:222, amount:3.5, title:"Read Me Twice"},
        {id:"po-1487", date:new Date("March 11, 1990"), quantity:33, amount:3.5, title:"Read Me Twice"},
        {id:"po-1488", date:new Date("March 11, 1991"), quantity:44, amount:3.5, title:"Read Me Twice"},
        {id:"po-1489", date:new Date("March 11, 1998"), quantity:55, amount:3.5, title:"Read Me Twice"},
        {id:"po-1480", date:new Date("March 11, 1997"), quantity:66, amount:3.5, title:"Read Me Twice"},
        {id:"po-1490", date:new Date("March 11, 1996"), quantity:77, amount:3.5, title:"Read Me Twice"},
        {id:"po-1498", date:new Date("March 11, 1995"), quantity:88, amount:3.5, title:"Read Me Twice"},
        {id:"po-1497", date:new Date("March 11, 1993"), quantity:99, amount:3.5, title:"Read Me Twice"}
    ]
}
    
YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.ReorderRows = function() {
        var Dom = YAHOO.util.Dom,
            Event = YAHOO.util.Event,
            DDM = YAHOO.util.DragDropMgr,
            myColumnDefs = [
                {key:"id"},
                {key:"date", formatter:"date"},
             ...