JSFiddle - React, Tailwind, and code Playground

by mgibsonbr

HTML

Target of plugin
<table id="mytt" border="1">
    <tr>
        <th data-width="100">Header 1</th>
        <th data-width="200">Header 2</th>
        <th data-width="150">Header 3</th>
    </tr>
</table>
<br/>
Regular table, with static colgroup (control)
<table border="1">
    <colgroup>
        <col width="100"/>
        <col width="200"/>
        <col width="150"/>
    </colgroup>
    <tr>
        <th data-width="100">Header 1</th>
        <th data-width="200">Header 2</th>
        <th data-width="105">Header 3</th>
    </tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>7</td><td>8</td><td>9</td></tr>
</table>

JavaScript

$.fn.treetable = function(options) {
        return this.each(function() {
            var tabela = $(this).addClass("ui-widget");
            var colgroup = $('<colgroup/>');
            tabela.find("td,th").each(function() {
                treetable_addColumn($(this)).appendTo(colgroup);
            });
            colgroup.appendTo(tabela);
        });
    };
    function treetable_addColumn(th,options) {
        var down = false;
        var pos = 0;
        var width = th.data("width");
        var basewidth = width;
        function stop() { down = false; basewidth = width; }
        var col = $('<col width="' + width + '"/>');
        th.attr("unselectable","on").css("-moz-user-select","none")
            .mousedown(function(e) { down = true; pos = e.pageX; })
            .mouseup(stop).mouseout(stop)
            .mousemove(function(e) {
                if ( down ) {
                    width = basewidth + (e.pageX - pos);
                    col.attr("width",width);
                }
            });
        return col;
    }

$("#mytt").treetable()
    .append("<tr><td>1</td><td>2</td><td>3</td></tr>")
    .append("<tr><td>4</td><td>5</td><td>6</td></tr>")
    .append("<tr><td>7</td><td>8</td><td>9</td></tr>");