VanillaJs Web Components table example

<!-- edited from original so might be some issues-->

<table id='oss_report'>
    <template id="row">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </template>
    <thead>
        <tr>
            <th>Row</th>
            <th>OSS Project Name</th>
            <th>OSS My Version</th>
            <th>OSS Current Version</th>
        </tr>
    <tbody is="oss-report-rows">
    </tbody>
</table>

<script>
        // resources
        // https://html.spec.whatwg.org/multipage/tables.html#the-tbody-element

        class OssReport extends HTMLTableSectionElement {

            constructor(){
                self = super();
                this.dataUrl = "data.json"
            }

            connectedCallback(){
                    this.makeRequest(this.dataUrl).then( (projRequest) => {
                        var tableData = [{name:"jquery", myVersion:"1.18", currentVersion:"3.2"}]
                        this.makeHtmlTable(tableData);
                    })
            }

            makeHtmlTable (data) {
                // todo: use better selectors other than id for #row
                //var template = document.querySelector('template#row');
                const template = document.querySelector('#exception_report > template ');
                for (var i = 0; i < data.length; i += 1) {
                    let row = data[i];
                    let clone = template.content.cloneNode(true);
                    let cells = clone.querySelectorAll('td');
                    let ci = 0; //cell index
                    cells[ci++].textContent = i +1; //row id or count
                    cells[ci++].textContent = row;
                    cells[ci++].textContent = row.name;
                    cells[ci++].textContent = row.myVersion;
                    cells[ci++].textContent = row.currentVersion;
                    this.appendChild(clone);
                }
            }

            makeRequest(url) {
                var request = new XMLHttpRequest();
                return new Promise(function (resolve, reject) {
                    request.onreadystatechange = function () {
                        if (request.readyState !== 4) return;
                        if (request.status >= 200 && request.status < 300) {
                            resolve(request);
                        } else {
                            reject({
                                status: request.status,
                                statusText: request.statusText
                            });
                        }
                    };
                    request.open("GET", url, true);
                    request.send();
                });
            };

    }
    customElements.define('oss-report-rows', OssReport, {extends: 'tbody' } );

</script>