JSFiddle - React, Tailwind, and code Playground

HTML

<body onload="Javascript:populateTable()">  
    <div id="productTable">
    </div>
</body>

JavaScript

function populateTable(){
                var myTableDiv = document.getElementById("productTable");
                var table = document.createElement('TABLE')
                var tableBody = document.createElement('TBODY')

                table.border=1;
                table.appendChild(tableBody);

                //table header
                var heading = new Array();
                heading[0] = "id"
                heading[1] = "Category"
                heading[2] = "Name"
                heading[3] = "Price"
                heading[4] = "Description"
                heading[5] = "Stock"

                //table data
                var data = new Array();
                data[0] = new Array("1","Mobile Phone", "iPhone", "500.00", "Apple iPhone 16GB", "250");
                data[1] = new Array("1","Mobile Phone", "Nexus", "400.00", "Google Nexus 16GB", "150");

                //table columns
                var tr = document.createElement('TR');
                tableBody.appendChild(tr);
                for(i = 0 ; i < heading.length; i++ ){
                    var th = document.createElement('TH');
                    th.width = '75';
                    th.appendChild(document.createTextNode(heading[i]));
                    tr.appendChild(th);
                }

                //table rows
                for(i = 0; i < data.length; i++){
                    var tr = document.createElement('TR');
                    for(j = 0; j < data[i].length; j++){
                        var td = document.createElement('TD');
                        td.appendChild(document.createTextNode(data[i][j]));
                        tr.appendChild(td);
                    }
                    tableBody.appendChild(tr);
                }
                myTableDiv.appendChild(table);
            }