JSFiddle - React, Tailwind, and code Playground

by Nick Karnik

HTML

<script src="http://quocity.com/colresizable/js/colResizable-1.3.min.js"></script>
<table id="MatrixTable" width="100%">
    <tbody>
        <tr>
            <th>header</th>
            <th>header</th>
            <th>header</th>
        </tr>
        <tr>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
        </tr>
        <tr>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
        </tr>
        <tr>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
        </tr>
    </tbody>
</table>

CSS

table, td, th {
    border: 1px solid black;
}

table tr {
    height:50px;
}

JavaScript

$(function () {

    //var onSampleResized = function (e) {
    //    var table = $(e.currentTarget); //reference to the resized table
    //};

    var onSampleResized = function (e) {
        var columns = $(e.currentTarget).find("td");
        var rows = $(e.currentTarget).find("tr");
        var Cloumnsize;
        var rowsize;
        columns.each(function () {
            Cloumnsize += $(this).attr('id') + "" + $(this).width() + "" + $(this).height() + ";";
        });
        rows.each(function () {
            rowsize += $(this).attr('id') + "" + $(this).width() + "" + $(this).height() + ";";
        });
        document.getElementById("hf_columndata").value = Cloumnsize;
        document.getElementById("hf_rowdata").value = rowsize;
    };

    /*$("#MatrixTable").colResizable({
        onResize: onSampleResized
    });*/

    $("#MatrixTable tr").resizable();
    $("#MatrixTable td").resizable();



});