JSFiddle - React, Tailwind, and code Playground

HTML

<table id='table1'></table>
<br/>
<table id='table2'></table>
<br/>
<table id='table3'></table>
<br/>
<table id='table4'></table>

CSS

table {
    border-collapse: collapse;
}
table tr td {
    border:1px solid #FF0000;
    padding: 5px 20px;
}

JavaScript

$.widget("test.grid", {
    options: {
        rows: []
    },   
    _drawRow: function (r) {
        this.element.append("<tr><td>" + r.join("</td><td>") + "</td></tr>");
    },    
    addRow: function (r) {
        this.options.rows.push(r);
    },
    draw: function () {
        this.element.empty();

        for (var i = 0; i < this.options.rows.length; i++) {
            this._drawRow(this.options.rows[i]);
        }
    }
});

$("#table1").grid();
$("#table2").grid();
$("#table3").grid({rows: [["table 3 cell 1", "table 3 cell 2"]]});
$("#table4").grid({rows: [["table 4 cell 1", "table 4 cell 2"]]});

$("#table1").grid("addRow", ["table 1 cell 1", "table 1 cell 2"]);
$("#table2").grid("addRow", ["table 2 cell 1", "table 2 cell 2"]);

$("#table1").grid("draw");
$("#table2").grid("draw");
$("#table3").grid("draw");
$("#table4").grid("draw");