JSFiddle - React, Tailwind, and code Playground

by Jitendra Zaa

HTML

<table class="tablemain"><thead><tr><th>Row No</th><th>Description</th><th>Path to Row</th><th>Level</th><th>Status</th></tr></thead>
<tbody id="treet1">
<tr><td>1</td><td>Child of 0</td><td>[0, 1]</td><td>1</td><td></td></tr>
<tr><td>2</td><td>Child of 0</td><td>[0, 2]&nbsp;</td><td>1</td><td></td></tr>
<tr><td>3</td><td>Child of 2</td><td>[0, 2, 3]&nbsp;</td><td>2</td><td></td></tr>
<tr><td>4</td><td>Child of 3</td><td>[0, 2, 3, 4]&nbsp;</td><td>3</td><td></td></tr>
<tr><td>5</td><td>Child of 4</td><td>[0, 2, 3, 4, 5]&nbsp;</td><td>4</td><td></td></tr>
<tr><td>6</td><td>Child of 4</td><td>[0, 2, 3, 4, 6]&nbsp;</td><td>4</td><td></td></tr>
<tr><td>7</td><td>Child of 6</td><td>[0, 2, 3, 4, 6, 7]&nbsp;</td><td>5</td><td></td></tr>
<tr><td>8</td><td>Child of 4</td><td>[0, 2, 3, 4, 8]&nbsp;</td><td>4</td><td></td></tr>
<tr><td>9</td><td>Child of 2</td><td>[0, 2, 9]&nbsp;</td><td>2</td><td></td></tr>
<tr><td>10</td><td>Child of 9</td><td>[0, 2, 9, 10]&nbsp;</td><td>3</td><td></td></tr>
<tr><td>11</td><td>Child of 10</td><td>[0, 2, 9, 10, 11]&nbsp;</td><td>4</td><td></td></tr>
<tr><td>12</td><td>Child of 0</td><td>[0, 12]&nbsp;</td><td>1</td><td></td></tr>
<tr><td>13</td><td>Child of 0</td><td>[0, 13]&nbsp;</td><td>1</td><td></td></tr>
<tr><td>14</td><td>Child of 13</td><td>[0, 13, 14]&nbsp;</td><td>2</td><td></td></tr>
<tr><td>15</td><td>Child of 0</td><td>[0, 15]&nbsp;</td><td>1</td><td></td></tr>
<tr><td>16</td><td>Child of 0</td><td>[0, 16]&nbsp;</td><td>1</td><td></td></tr>
<tr><td>17</td><td>Child of 0</td><td>[0, 17]&nbsp;</td><td>1</td><td></td></tr>

<tr><td>18</td><td>Child of 17</td><td>[0, 17, 18]&nbsp;</td><td>2</td><td></td></tr>
<tr><td>19</td><td>Child of 17</td><td>[0, 17, 19]&nbsp;</td><td>2</td><td></td></tr>
<tr><td>20</td><td>Child of 0</td><td>[0, 20]&nbsp;</td><td>1</td><td></td></tr>
</tbody></table>

CSS

.collapsed { display: none; }
.tablemain {background-color:#ccf;border-collapse: collapse; border: solid 1px #447; padding: 0px; text-align: left; }
.tablemain td {margin-left:3px;}
#treet1 {background-color:#ffc}
#treet2 {background-color:#ffc}
#treet1 td { font: normal 10pt Arial; padding: 0px 2px 0px 0px; cursor: pointer;}
#treet2 td { font: normal 10pt Arial; padding: 0px 2px 0px 0px; cursor: pointer;}
.adeimg, .ttimage, .parimg, .preimg { border: none; margin: 0px; padding: 0px; vertical-align: bottom; width: 16px; height: 16px; }
.adeimg, .parimg {cursor: pointer; }
.even { background-color: #ddd; }
.over { background-color: #66f; }

JavaScript

(function(jq) {
    jq.fn.jqTreeTable = function(map, options) {
        var opts = jq.extend({
            openImg: "",
            shutImg: "",
            leafImg: "",
            lastOpenImg: "",
            lastShutImg: "",
            lastLeafImg: "",
            vertLineImg: "",
            blankImg: "",
            collapse: false,
            column: 0,
            striped: false,
            highlight: false,
            state: true
        }, options),
            mapa = [],
            mapb = [],
            tid = this.attr("id"),
            collarr = [],
            stripe = function() {
                if (opts.striped) {
                    $("#" + tid + " tr:visible").filter(":even").addClass("even").end().filter(":odd").removeClass("even");
                }
            },
            buildText = function(parno, preStr) { //Recursively build up the text for the images that make it work
                var mp = mapa[parno],
                    ro = 0,
                    pre = "",
                    pref, img;
                for (var y = 0, yl = mp.length; y < yl; y++) {
                    ro = mp[y];
                    if (mapa[ro]) { //It's a parent as well. Build it's string and move on to it's children
                        pre = (y == yl - 1) ? opts.blankImg : opts.vertLineImg;
                        img = (y == yl - 1) ? opts.lastOpenImg : opts.openImg;
                        mapb[ro - 1] = preStr + '<img src="' + img + '" class="parimg" id="' + tid + ro + '">';
                        pref = preStr + '<img src="' + pre + '" class="preimg">';
                        arguments.callee(ro, pref);
                    } else { //it's a child
                        img = (y == yl - 1) ? opts.lastLeafImg : opts.leafImg; //It's the last child, It's child will have a blank field behind it
                        mapb[ro - 1] = preStr + '<img src="' + img + '" class="ttimage" id="' + tid + ro + '">';
                    }
                }
 ...