JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<div id='destination'></div>

CSS

table{
    table-layout:fixed; 
}
td
{
    border: 1px solid black;    
}

JavaScript

data = {
    ver: [
        {"0":"1","id_pemasang":"1","1":"1","id_jenis_pemasang":"1","2":null,"npwp":null,"3":"Yos Sudarso","nama":"Yos Sudarso","4":"Perumahan Griya Perwita No.10","alamat":"Perumahan Griya Perwita No.10","5":"Yogyakarta","kota":"Yogyakarta","6":"0274-541056","telepon":"0274-541056","7":"08134570378","handphone":"08134570378","8":"0","diskon":"0"},
        {"0":"2","id_pemasang":"2","1":"2","id_jenis_pemasang":"2","2":"34.081.203.1-342.000","npwp":"34.081.203.1-342.000","3":"CV. Prima Agung","nama":"CV. Prima Agung","4":"Jl. Cenderawasih No.72 Warungboto","alamat":"Jl. Cenderawasih No.72 Warungboto","5":"Yogyakarta","kota":"Yogyakarta","6":"0274-878906","telepon":"0274-878906","7":null,"handphone":null,"8":"5","diskon":"5"},
        {"0":"3","id_pemasang":"3","1":"2","id_jenis_pemasang":"2","2":null,"npwp":null,"3":"PT. Tampil Jaya","nama":"PT. Tampil Jaya","4":"Jl. Alamanda No.3","alamat":"Jl. Alamanda No.3","5":"Yogyakarta","kota":"Yogyakarta","6":"0274-552233","telepon":"0274-552233","7":null,"handphone":null,"8":"20","diskon":"20"}
    ] 
};

function ToTable(dataArray)
{
    html = '<table>'; 
    var len = dataArray.length;
    for(var i = 0; i < len; i++){
        html += '<tr>'; 
        for(var key in dataArray[i]){
            html += '<td>' + dataArray[i][key] + '</td>'; 
        }
        html += '</tr>';
    }
    html += '</table>'; 
    return html; 
}

document.getElementById('destination').innerHTML = ToTable(data.ver);