Json view table html - html

Question

im not programer, i have json file, want to see in html file, i try to convert with https://www.convertjson.com/ its work, but thats only make a basic table, like excel, no filter, dropdown not as shown on the web preview, what should I do so that the html results are as displayed on the web
preview on the web
<table class="table table-bordered table-hover table-condensed">
<thead><tr><th title="Field #1">keyword</th>
<th title="Field #2">products</th>
<th title="Field #3">date</th>
</tr></thead>
<tbody><tr>
<td>smooth operator</td>
<td align="right">583</td>
<td align="right">1642435207616</td>
</tr>
<tr>
<td>yuke</td>
<td align="right">24</td>
<td align="right">1642436355563</td>
</tr>
<tr>
<td>yuna ffx</td>
<td align="right">433</td>
<td align="right">1642436363173</td>
</tr>
<tr>
<td>so yul</td>
<td align="right">29</td>
<td align="right">1642436365296</td>
</tr>
<tr>
<td>statistics yup</td>
<td align="right">21</td>
<td align="right">1642436368027</td>
</tr>
<tr>
<td>snooker masters</td>
<td align="right">157</td>
<td align="right">1642437410041</td>
</tr>
<tr>
<td>snooker cue</td>
<td align="right">4067</td>
<td align="right">1642437414446</td>
</tr>
<tr>
<td>snake io</td>
<td align="right">187</td>
<td align="right">1642437422957</td>
</tr>
<tr>
<td>scott morrison pm</td>
<td align="right">294</td>
<td align="right">1642439850739</td>
</tr>
<tr>
<td>school is important but surfing is importanter</td>
<td align="right">193</td>
<td align="right">1642439885920</td>
</tr>
<tr>
<td>schlatt</td>
<td align="right">1814</td>
<td align="right">1642440651019</td>
</tr>
<tr>
<td>scrunge cat</td>
<td align="right">14</td>
<td align="right">1642440653282</td>
</tr>
<tr>
<td>elite way school</td>
<td align="right">40</td>
<td align="right">1642440658943</td>
</tr>
<tr>
<td>valentines day school</td>
<td align="right">20996</td>
<td align="right">1642440944250</td>
</tr>
<tr>
<td>video game high school</td>
<td align="right">2781</td>
<td align="right">1642440972825</td>
</tr>
<tr>
<td>love scars</td>
<td align="right">1400</td>
<td align="right">1642441411736</td>
</tr>
<tr>
<td>black history is more than slavery</td>
<td align="right">441</td>
<td align="right">1642441420869</td>
</tr>
<tr>
<td>black history month facts</td>
<td align="right">3751</td>
<td align="right">1642441561952</td>
</tr>
<tr>
<td>black history month quotes</td>
<td align="right">8450</td>
<td align="right">1642441753406</td>
</tr>
<tr>
<td>black wolf with blue eyes</td>
<td align="right">62</td>
<td align="right">1642441758697</td>
</tr>
<tr>
<td>blueycapsules</td>
<td align="right">20</td>
<td align="right">1642441760393</td>
</tr>
<tr>
<td>black history month ideas</td>
<td align="right">5430</td>
<td align="right">1642441979096</td>
</tr>
<tr>
<td>blessed be the fruit loops</td>
<td align="right">45</td>
<td align="right">1642441983668</td>
</tr>
<tr>
<td>blue peter</td>
<td align="right">3346</td>
<td align="right">1642442195322</td>
</tr>
<tr>
<td>bliss</td>
<td align="right">17820</td>
<td align="right">1642442740461</td>
</tr>
<tr>
<td>black and gray</td>
<td align="right">31466</td>
<td align="right">1642443079939</td>
</tr>
<tr>
<td>blades aerobatic team</td>
<td align="right">25</td>
<td align="right">1642443083091</td>
</tr>
<tr>
<td>funny color blind</td>
<td align="right">586</td>
<td align="right">1642443702500</td>
</tr>
<tr>
<td>color blind</td>
<td align="right">2002</td>
<td align="right">1642444166164</td>
</tr>
<tr>
<td>roses are red violets are blue i want queso and tacos too</td>
<td align="right">188</td>
<td align="right">1642444171433</td>
</tr>
<tr>
<td>falling sakura cherry blossom</td>
<td align="right">419</td>
<td align="right">1642444733452</td>
</tr>
<tr>
<td>vaccinated by the blood of jesus</td>
<td align="right">237</td>
<td align="right">1642444737052</td>
</tr>
<tr>
<td>navy blue and gold</td>
<td align="right">2583</td>
<td align="right">1642445186483</td>
</tr>
<tr>
<td>the blue ark</td>
<td align="right">98</td>
<td align="right">1642445189394</td>
</tr>
<tr>
<td>roses are red violets are blue i want tacos and queso too</td>
<td align="right">188</td>
<td align="right">1642445193220</td>
</tr>
<tr>
<td>kim jong un blood</td>
<td align="right">64</td>
<td align="right">1642445195692</td>
</tr>
<tr>
<td>lick swallow</td>
<td align="right">448</td>
<td align="right">1642445201457</td>
</tr>
<tr>
<td>lion is my spirit animal</td>
<td align="right">214</td>
<td align="right">1642445204839</td>
</tr>
<tr>
<td>little valentine in the making</td>
<td align="right">458</td>
<td align="right">1642445209546</td>
</tr>
<tr>
<td>lil timmy tim</td>
<td align="right">976</td>
<td align="right">1642446416898</td>
</tr>
<tr>
<td>life begins where fear ends</td>
<td align="right">1474</td>
<td align="right">1642446421119</td>
</tr>
<tr>
<td>limewire</td>
<td align="right">113</td>
<td align="right">1642447069083</td>
</tr>
<tr>
<td>lip service</td>
<td align="right">190</td>
<td align="right">1642447084650</td>
</tr>
<tr>
<td>lily pulitzer case</td>
<td align="right">176</td>
<td align="right">1642447088493</td>
</tr>
<tr>
<td>list of products</td>
<td align="right">1861</td>
<td align="right">1642447092677</td>
</tr>
<tr>
<td>lisa bonet</td>
<td align="right">102</td>
<td align="right">1642447274533</td>
</tr>
<tr>
<td>line cook</td>
<td align="right">1660</td>
<td align="right">1642447527890</td>
</tr>
<tr>
<td>libraries matter</td>
<td align="right">303</td>
<td align="right">1642447532008</td>
</tr>
<tr>
<td>little hearts</td>
<td align="right">33597</td>
<td align="right">1642447678671</td>
</tr>
<tr>
<td>lion a skate</td>
<td align="right">195</td>
<td align="right">1642447683925</td>
</tr>
<tr>
<td>lolipop red lips</td>
<td align="right">373</td>
<td align="right">1642447704399</td>
</tr>
<tr>
<td>i lick</td>
<td align="right">1800</td>
<td align="right">1642447822094</td>
</tr>
<tr>
<td>stealing hearts like i steal pucks</td>
<td align="right">318</td>
<td align="right">1642447825677</td>
</tr>
<tr>
<td>to do list your mom</td>
<td align="right">1006</td>
<td align="right">1642447831298</td>
</tr>
<tr>
<td>she was like a shot of espresso</td>
<td align="right">103</td>
<td align="right">1642447834669</td>
</tr>
<tr>
<td>i lick i swallow</td>
<td align="right">245</td>
<td align="right">1642447837988</td>
</tr>
<tr>
<td>betty white quotes</td>
<td align="right">1733</td>
<td align="right">1642448073106</td>
</tr>
<tr>
<td>bills afc east champion</td>
<td align="right">222</td>
<td align="right">1642448076331</td>
</tr>
<tr>
<td>bills run the east</td>
<td align="right">947</td>
<td align="right">1642448081763</td>
</tr>
<tr>
<td>born year of the tiger</td>
<td align="right">1942</td>
<td align="right">1642448086454</td>
</tr>
<tr>
<td>budgie band</td>
<td align="right">163</td>
<td align="right">1642448487167</td>
</tr>
<tr>
<td>baker miller pink</td>
<td align="right">59</td>
<td align="right">1642448610822</td>
</tr>
<tr>
<td>baby we bare bears</td>
<td align="right">1073</td>
<td align="right">1642448615055</td>
</tr>
<tr>
<td>birthday january quotes</td>
<td align="right">7247</td>
<td align="right">1642448954399</td>
</tr>
<tr>
<td>buffalo bills afc east champions</td>
<td align="right">163</td>
<td align="right">1642448958555</td>
</tr>
<tr>
<td>burns night</td>
<td align="right">3268</td>
<td align="right">1642449350786</td>
</tr>
<tr>
<td>bigweld</td>
<td align="right">39</td>
<td align="right">1642449874809</td>
</tr>
<tr>
<td>being upside down is my normal</td>
<td align="right">90</td>
<td align="right">1642449878903</td>
</tr>
<tr>
<td>brushed watercolor painted sun</td>
<td align="right">115</td>
<td align="right">1642450180271</td>
</tr>
<tr>
<td>bat style</td>
<td align="right">3353</td>
<td align="right">1642450185077</td>
</tr>
<tr>
<td>boesarts</td>
<td align="right">1149</td>
<td align="right">1642450256733</td>
</tr>
<tr>
<td>bts valentine</td>
<td align="right">1797</td>
<td align="right">1642450702254</td>
</tr>
<tr>
<td>battlebots</td>
<td align="right">322</td>
<td align="right">1642450914337</td>
</tr>
<tr>
<td>basketball is my valentine</td>
<td align="right">842</td>
<td align="right">1642451575958</td>
</tr>
<tr>
<td>ace skull</td>
<td align="right">2143</td>
<td align="right">1642451656956</td>
</tr>
<tr>
<td>acrilic</td>
<td align="right">787</td>
<td align="right">1642451731038</td>
</tr>
<tr>
<td>acrobatic gymnastics</td>
<td align="right">4775</td>
<td align="right">1642451752746</td>
</tr>
<tr>
<td>activities assistant</td>
<td align="right">800</td>
<td align="right">1642451891621</td>
</tr>
<tr>
<td>actions</td>
<td align="right">123598</td>
<td align="right">1642451957042</td>
</tr>
<tr>
<td>acadiane</td>
<td align="right">17</td>
<td align="right">1642451960005</td>
</tr>
<tr>
<td>act justly micah</td>
<td align="right">256</td>
<td align="right">1642451964557</td>
</tr>
<tr>
<td>this is how i roll active</td>
<td align="right">553</td>
<td align="right">1642451969104</td>
</tr>
<tr>
<td>funny this is how i roll active</td>
<td align="right">415</td>
<td align="right">1642451973016</td>
</tr>
<tr>
<td>my hero academia memes</td>
<td align="right">4822</td>
<td align="right">1642451977420</td>
</tr>
<tr>
<td>greenhouse academy eagles</td>
<td align="right">46</td>
<td align="right">1642451979364</td>
</tr>
<tr>
<td>four aces</td>
<td align="right">622</td>
<td align="right">1642452128394</td>
</tr>
<tr>
<td>randy rhoads</td>
<td align="right">160</td>
<td align="right">1642452287605</td>
</tr>
<tr>
<td>ragnarok netflix</td>
<td align="right">77</td>
<td align="right">1642452290275</td>
</tr>
<tr>
<td>rainbow polka dot</td>
<td align="right">4098</td>
<td align="right">1642452309938</td>
</tr>
<tr>
<td>rand paul</td>
<td align="right">885</td>
<td align="right">1642452396472</td>
</tr>
<tr>
<td>ranch hand</td>
<td align="right">595</td>
<td align="right">1642452422401</td>
</tr>
<tr>
<td>rancor</td>
<td align="right">99</td>
<td align="right">1642452635933</td>
</tr>
<tr>
<td>rapists</td>
<td align="right">221</td>
<td align="right">1642452638614</td>
</tr>
<tr>
<td>randy moss straight cash homie</td>
<td align="right">88</td>
<td align="right">1642452641640</td>
</tr>
<tr>
<td>rapper collage</td>
<td align="right">1297</td>
<td align="right">1642452645635</td>
</tr>
<tr>
<td>rainytale studio</td>
<td align="right">64</td>
<td align="right">1642452649264</td>
</tr>
<tr>
<td>i teach the sweetest hearts rainbow teacher valentines day</td>
<td align="right">246</td>
<td align="right">1642452653877</td>
</tr>
<tr>
<td>yellowstone dutton ranch arrows</td>
<td align="right">18</td>
<td align="right">1642452656675</td>
</tr>
<tr>
<td>tusken raider</td>
<td align="right">72</td>
<td align="right">1642452917407</td>
</tr>
<tr>
<td>i would rather be with my cat</td>
<td align="right">393</td>
<td align="right">1642452922279</td>
</tr>
<tr>
<td>cat eating ramen cute noodles</td>
<td align="right">1140</td>
<td align="right">1642452926838</td>
</tr>
<tr>
<td>professional rawdogger</td>
<td align="right">58</td>
<td align="right">1642453027048</td>
</tr>
<tr>
<td>i find this rather humerus</td>
<td align="right">36</td>
<td align="right">1642453030104</td>
</tr>
<tr>
<td>luke rawlings</td>
<td align="right">36</td>
<td align="right">1642453032163</td>
</tr>
<tr>
<td>ham radio call</td>
<td align="right">153</td>
<td align="right">1642453035613</td>
</tr>
<tr>
<td>self care rap</td>
<td align="right">331</td>
<td align="right">1642453038717</td>
</tr>
<tr>
<td>mcbean tartan</td>
<td align="right">15</td>
<td align="right">1642453043739</td>
</tr>
<tr>
<td>mclaren formula one</td>
<td align="right">3221</td>
<td align="right">1642453046775</td>
</tr>
<tr>
<td>reba mcentire tour</td>
<td align="right">98</td>
<td align="right">1642453051029</td>
</tr>
<tr>
<td>lea roche</td>
<td align="right">590</td>
<td align="right">1642453349110</td>
</tr>
<tr>
<td>leicester tigers</td>
<td align="right">79</td>
<td align="right">1642453459842</td>
</tr>
<tr>
<td>lesbian valentines day</td>
<td align="right">6934</td>
<td align="right">1642454643197</td>
</tr>
<tr>
<td>lets go darwin funny</td>
<td align="right">3229</td>
<td align="right">1642454791946</td>
</tr>
<tr>
<td>let them go</td>
<td align="right">1972</td>
<td align="right">1642454819221</td>
</tr>
<tr>
<td>leek</td>
<td align="right">2241</td>
<td align="right">1642454870409</td>
</tr>
<tr>
<td>levin</td>
<td align="right">1552</td>
<td align="right">1642454897230</td>
</tr>
<tr>
<td>xmas cookie shaped letter</td>
<td align="right">99</td>
<td align="right">1642454900902</td>
</tr>
<tr>
<td>i left my bed for this</td>
<td align="right">942</td>
<td align="right">1642454906398</td>
</tr>
<tr>
<td>for the legneds for the legneds for the legneds for the legneds</td>
<td align="right">57</td>
<td align="right">1642454908997</td>
</tr>
<tr>
<td>the crow brandon lee</td>
<td align="right">466</td>
<td align="right">1642454912088</td>
</tr>
<tr>
<td>at least my cat loves me</td>
<td align="right">1355</td>
<td align="right">1642454917028</td>
</tr>
<tr>
<td>various not less</td>
<td align="right">1933</td>
<td align="right">1642454922062</td>
</tr>
<tr>
<td>the boring company</td>
<td align="right">303</td>
<td align="right">1642455022212</td>
</tr>
<tr>
<td>this man ate my son</td>
<td align="right">426</td>
<td align="right">1642455025389</td>
</tr>
<tr>
<td>thai pongal</td>
<td align="right">59</td>
<td align="right">1642455126732</td>
</tr>
<tr>
<td>the danger zone</td>
<td align="right">639</td>
<td align="right">1642455131603</td>
</tr>
<tr>
<td>the ultimate taco twosday</td>
<td align="right">22222</td>
<td align="right">1642455136173</td>
</tr>
<tr>
<td>the expanse rocinante</td>
<td align="right">188</td>
<td align="right">1642455333142</td>
</tr>
<tr>
<td>the ronettes</td>
<td align="right">145</td>
<td align="right">1642456152057</td>
</tr>
<tr>
<td>the force is strong with this teacher</td>
<td align="right">527</td>
<td align="right">1642456157248</td>
</tr>
<tr>
<td>the cheesecake factory</td>
<td align="right">53</td>
<td align="right">1642456160724</td>
</tr>
<tr>
<td>the book of boba</td>
<td align="right">230</td>
<td align="right">1642456164173</td>
</tr>
<tr>
<td>the witcher medallion</td>
<td align="right">82</td>
<td align="right">1642456166848</td>
</tr>
<tr>
<td>the office valentine</td>
<td align="right">2802</td>
<td align="right">1642456171043</td>
</tr>
<tr>
<td>the rumbling</td>
<td align="right">112</td>
<td align="right">1642456596843</td>
</tr>
<tr>
<td>this teacher loves her kids</td>
<td align="right">3883</td>
<td align="right">1642456601430</td>
</tr>
<tr>
<td>thomas petrou</td>
<td align="right">197</td>
<td align="right">1642456727484</td>
</tr>
<tr>
<td>the orion experience</td>
<td align="right">21</td>
<td align="right">1642456729374</td>
</tr>
<tr>
<td>the sweetest valentine of them all</td>
<td align="right">169</td>
<td align="right">1642456735384</td>
</tr>
<tr>
<td>the girl on the couch</td>
<td align="right">181</td>
<td align="right">1642456738884</td>
</tr>
</tbody></table>

Answer 1

So to keep it simple let's say you have the code for a table stored in a document called tableview.html
Your html document needs a few extra essential lines of code before it works like you want it do. In tableview.html you first add the code below in an simple text-editor like Notepad. Then copy-paste your <table>....</table> code that you've shown in your question between the <body>... </body> part.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>DataTables example - Zero configuration</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script> $(document).ready(function() {$('table').DataTable();} ); </script>
</head>
<body>
</body>
</html>
End for the finishing touch you might want to add the class table-striped in your first line of the table, like:
<table class="table table-bordered table-hover table-condensed table-striped">

Answer 2

You can use bootstrap librariy.
https://getbootstrap.com/docs/4.0/content/tables/
Or, you can use open-source javascript grid libraries.
https://blog.logrocket.com/5-open-source-javascript-datagrids/