JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table-editor" id="table1">
    <colgroup class=""></colgroup>
    <colgroup class=""></colgroup>
    <colgroup class=""></colgroup>
    <colgroup class=""></colgroup>
    <colgroup class=""></colgroup>
    <tbody>
      <tr class="highlighted-row">
        <td>•</td>
        <td>•</td>
        <td>•</td>
        <td>•</td>
        <td>•</td>
      </tr>
      <tr class="normal-row">
        <td>•</td>
        <td>•</td>
        <td>•</td>
        <td>•</td>
        <td>•</td>
      </tr>
      <tr class="normal-row">
        <td>•</td>
        <td>•</td>
        <td>•</td>
        <td>•</td>
        <td>•</td>
      </tr>
    </tbody>
</table>
<input id="addcol" type="button" value="Add Column" />
<input id="remcol" type="button" value="Reomve Column" />
<input id="addrow" type="button" value="Add row" />
<input id="remrow" type="button" value="Remove row" />

CSS

.table-editor {
    border: 1px solid #ccc;
    table-layout:fixed;
    line-height: 11px;
    border-collapse:collapse;
    overflow-x:auto;
    cursor:default;
}
.table-editor td,.normal-row{
    border: 1px solid #ccc;
    border-bottom-color:#eeeeee;
    width:10px;
    height:11px;
    text-align:center;
    border: 1px solid #ccc;
}

.highlighted-row{
    background-color:#ededed;
}

.hover{
    background-color:#ededed;
}

JavaScript

$('#addcol').click(function() {
    var $tablerow = $('table.table-editor').find('tr');
    count = 0;

    $tablerow.each(function(index, value){
        count += 1;
        //alert('Working on row: ' + count);
        var $listitem = $(this);
        //alert('ListItem: ' + $listitem.index());
        n = parseInt($listitem.index());
        //alert('Value of n: ' + n);
        var $newRow = $("<td>" + n + "</td>");
        $("table.table-editor tr:eq(" + n + ")").append($newRow);
    });
});

$('#remcol').click(function() {
    var $tablerow = $('table.table-editor').find('tr');
    
    $tablerow.each(function(index, value){
        $("table.table-editor tr:eq("+index+") td:eq(-1)").remove();
    });
});

$('#addrow').click(function() {
    $('table.table-editor').append("<tr></tr>");
    $('table.table-editor tr:eq(0) td').each(function(index, value){
        $("table.table-editor tr:eq(-1)").append("<td>"+index+"</td>");
    });
});

$('#remrow').click(function() {
    $('table.table-editor tr:eq(-1)').remove();
});