JSFiddle - React, Tailwind, and code Playground

by ajai jothi

HTML

ROW AND COLUMN RESIZABLE
<table>
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>4</th>
            <th>4</th>
        </tr>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>4</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </tbody>
    </thead>
</table>
<br>COLUMN RESIZABLE
<table>
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>4</th>
            <th>4</th>
        </tr>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>4</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
               ...

CSS

table {
    width:100%;
    height: 10%;
    margin:0;
    border-spacing: 0px;
    border-collapse: collapse;
}
th, td {
    border: 1px solid #ccc;
    margin:0;
    padding:10px;
}
th {
    background:#f1f1f1;
    border-bottom: 1px solid #999;
}

JavaScript

(function ($) {
    "use strict";
    $.fn.tableResizable = function (prop) {
        var styles = {
            maincontainer: {
                position: "relative"
            },
            colDragStyle: {
                position: "absolute",
                top: 0,
                left: 0,
                zIndex: 100,
                width: "5px",
                cursor: "w-resize"
            },
            rowDragStyle: {
                position: "absolute",
                top: 0,
                left: 0,
                zIndex: 100,
                height: "5px",
                cursor: "s-resize"
            }
        };

        var rowResize = true;
        var colResize = true;
        if (typeof prop === 'object') {
            rowResize = prop.hasOwnProperty('row') ? prop.row : true;
            colResize = prop.hasOwnProperty('column') ? prop.column : true;
        }

        $(this).each(function (elmIndex, tableElm) {
            var i, col, w, celm, row, h, relm,
            position = {},
            table = {
                elm: $(tableElm),
                col: $(tableElm).find('th'),
                rows: $(tableElm).find('tr')
            },
            DD_Container = table.elm.wrap('<div class="resizable-container"/>').parent(),

                eventHandler = {
                    resetDragPosition: function () {
                        DD_Container.find('.drag_col').each(function (i, dc) {
                            col = table.col.eq(i);
                            $(dc).css('left', col.position().left + col.outerWidth() - 2).height(table.elm.height());
                        });
                        DD_Container.find('.drag_row').each(function (i, dr) {
                            row = table.rows.eq(i);
                            $(dr).css('top', row.position().top + row.outerHeight() - 2).width(table.elm.width());
                        });
                    },

                    colInit: function (event) {
           ...