JSFiddle - React, Tailwind, and code Playground

HTML

<div id="grid"> </div>

CSS

.t-wpr {
    font-family:Verdana, Geneva, sans-serif;
    font-size:11px;    
    overflow:auto;
    position:relative;
}

.t-hd,
.t-bd {
    table-layout:fixed;
}

.t-hd th,
.t-bd td {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;    
    -o-text-overflow:ellipsis;    
    /*-moz-binding: url( 'bindings.xml#ellipsis' );*/
    padding:0 5px;
}


.t-hd th {
    height:16px;
    background:url(../img/bg.png) repeat-x 0px -500px;    
    border-right:1px solid #BCBCBC;
    text-align:center;
    font-weight:bold;
    cursor:pointer;
    padding-right:3px;
}

.t-hd th.t-selected, /* fixes background blinking */
.t-hd th:hover {
    background-position:0px -516px;
}

.t-hd th.t-selected {
    cursor:col-resize; /* fixes cursor blinking */
}

.t-bd {
    background:url(../img/bg_grid.png);    
}

.t-bd td {
    height:18px;
    border-right:1px solid #ddd;    
}


/* resize */
.t-hd-resizer {
    float:right;
    height:100%;
    margin:-2px -5px -2px 0;
    cursor:col-resize;
}

#t-hd-resize-helper {
    position:absolute;
    top:0px;
    border:1px solid #777;
    cursor:col-resize;
}

JavaScript

$.widget("ui.tsort", {
    
    
    _init: function()
    {
        var self = this
        , options = self.options
            
        , bd_wpr = (self.bd_wpr = self.element.addClass('t-bd-wpr')) // table body wrapper
        , bd = (self.bd = $('<table class="t-bd" cellpadding="0" cellspacing="0" />').prependTo(bd_wpr)) // table body
        , wpr = (self.wpr = bd_wpr.wrap('<div class="t-wpr" />').parent()) // tsort wrapper
        , hd_wpr = (self.hd_wpr = $('<div class="t-hd-wpr" />').prependTo(wpr)) // table header wrapper
        , hd = (self.hd = $('<table class="t-hd" cellpadding="0" cellspacing="0"/>').prependTo(hd_wpr)) // table header
        ;
        
        // set intial stylings
        wpr.css({
            width: options.width,
            height: options.height
        });
        
        /*wpr.click(function(){
            var td = self.hd.find('td:first');
            
            td.width(td.width() + 30);
            hd.width(hd.width() + 30);
            
        });*/
        
        
        // initialize options.order
        if (options.order === null)
        {
            options.order = [];
            for (var i = 0; i < options.model.length; i++)
                options.order.push(i);
        }
        
        //console.info(options);
        
        self.construct(options.model, options.order);    
        
        if (options.url !== null)
            $.get(options.url, self._queryString(), function(data) {
                    self.populate.apply(self, [data]);
                }, 'json'
            );
        
        if(options.data !== null) {
           self.populate.apply(self, [options.data]);
        }
        // scroll the header and the body synchronously    
        bd.scroll(function(){
            hd.scrollLeft(bd.scrollLeft());
        });
            
        (self.options.draggableColumns && $.fn.sortable && self.makeColumnsDraggable());
        
        (self.options.resizableColumns && $.fn.draggable &&...