JSFiddle - React, Tailwind, and code Playground

by fekkyDev s

HTML

<div class="table-wrapper">
    <table id="table">
        <tbody>
            <tr>
                <td class="gray">Zagreb</td>
                <td class="gray">Kinshasa</td>
                <td class="gray">Kishinev</td>
                <td class="gray">Krakow</td>
                <td class="gray">Lima</td>
                <td class="gray">Lisbon</td>
            </tr>
            <tr>
                <td>Zagreb</td>
                <td>Kinshasa</td>
                <td>Kishinev</td>
                <td>Krakow</td>
                <td>Lima</td>
                <td>Lisbon</td>
            </tr>
            <tr>
                <td>Zagreb</td>
                <td>Kinshasa</td>
                <td>Kishinev</td>
                <td>Krakow</td>
                <td>Lima</td>
                <td>Lisbon</td>
            </tr>
            <tr>
                <td>Zagreb</td>
                <td>Kinshasa</td>
                <td>Kishinev</td>
                <td>Krakow</td>
                <td>Lima</td>
                <td>Lisbon</td>
            </tr>
            <tr>
                <td>London</td>
                <td>Los Angeles</td>
                <td>Luxembourg</td>
                <td>Madrid</td>
                <td>Manila</td>
                <td>Mexico</td>
            </tr>
            <tr>
                <td>Milan</td>
                <td>Montreal</td>
                <td>Mumbai</td>
                <td>Nairobi</td>
                <td>Nicosia</td>
                <td>New York</td>
            </tr>
            <tr>
                <td>Osaka</td>
                <td>Oslo</td>
                <td>Ottawa</td>
                <td>Paris</td>
                <td>Prague</td>
                <td>Riga</td>
            </tr>
            <tr>
                <td>Rome</td>
                <td>Rotterdam</td>
                <td>Salvador</td>
                <td>Samarkand</td>
                <td>Sydney</td>
                <td>Singapore</td>
            </tr>
           ...

CSS

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 30px 0 40px 0;
}
td {
    border: 1px #aaa solid;
    box-sizing:
}
#new-table {
    display: none;
}
.gray {
    background: #aaa;
}

JavaScript

$(document).ready(function (e) {
    var $table = $("#table");

    var startW = 0;    var startW_neighbor = 0;
    var td_index_neighbor = 0;
    var ui_minColWidth = 0;

    $table.find(" td").resizable({
        handles: 'e s w n',
        minWidth: 30,
        alsoResize: 'table',
        start: function (event, ui) {
            ui_minColWidth = $(this).resizable("option", "minWidth");
            startW = $(this).width();
            td_width = ui.element.width();
            startW_neighbor = ui.element.parents('.table-wrapper').find('table#table').width();
            startMouseX = event.pageX;
        },
        stop: function (event, ui) {

        },
        resize: function (event, ui) {;
            var mouseDiff = event.pageX - startMouseX;
            console.log(td_width, ui.element.width())
            if (ui.element.width() == td_width && mouseDiff < 0) {;
                $('table').width(table_width);
                
            }
            td_width = ui.element.width();
            table_width = $('table').width()

        }
    });
});