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>

CSS

table {
    width:100%;
    height: 10%;
    margin:0;
    border-spacing: 0px;
    border-collapse: collapse;
}
th, td {
    border: 1px solid #ccc;
    margin:0;
    padding:10px;
    -moz-user-select: none;
}
th {
    background:#f1f1f1;
    border-bottom: 1px solid #999;
}
.__selected {
    outline:1px solid #0094F7;
}
.contextmenu {
    position:absolute;
    top:0;
    left:0;
    margin:0;
    padding:5px;
    border:1px solid #ccc;
    border-radius:5px;
    background:#fff;
    font-family:arial;
    font-size:11px;
    z-index:1000;
}
.contextmenu li {
    list-style:none;
    padding:2px 5px;
    cursor:pointer;
}
.contextmenu li:hover {
    background:#0094F7;
    color:#fff;
    border-radius:5px;
}

JavaScript

(function ($) {
    "use strict";

    $.executeCommand = function (command, target) {
        console.log(command);
        switch (command) {
            case 'merge_row':

                break;
            case 'merge_col':

                break;
            case 'insert_row_above':
                target.find('.__selected').each(function () {
                    var row = $(this).parent();
                    var clone = row.clone();
                    clone.find('td,th').removeClass('__selected').html("");
                    clone.insertBefore(row);
                });
                break;
            case 'insert_row_below':
                target.find('.__selected').each(function () {
                    var row = $(this).parent();
                    var clone = row.clone();
                    clone.find('td,th').removeClass('__selected').html("");
                    clone.insertAfter(row);
                });
                break;
            case 'insert_column_after':
                var rows = target.find('tr');
                var selected = target.find('.__selected');
                var plist = [];
                selected.each(function(){
                    if($.inArray($(this).index(), plist)<0)
                    plist.push($(this).index());
                });               
                $.each(plist, function(i, p){
                    rows.each(function(j, row){
                       var col = $(row).find('td,th').eq(p);
                       col.clone().removeClass('__selected').html("").insertAfter(col); 
                    });
                });
                break;
            case 'insert_column_before':
                var rows = target.find('tr');
                var selected = target.find('.__selected');
                var plist = [];
                selected.each(function(){
                    if($.inArray($(this).index(), plist)<0)
                    plist.push($(this).index());
                });         
  ...