dataengineeringtools/json-table.html at main · prabakaras/dataengineeringtools · GitHub

1
2
3
4
5
6
7
8
9
10
<!doctype html>
<html lang="en">
  <head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>JSON to Table | Prabakar's GitHub Tools</title><link rel="preconnect" href="https://fonts.googleapis.com" /><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /><link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet" /><link rel="stylesheet" href="styles.css" /></head>
  <body class="tool-page"><main class="tool-layout">
    <nav class="tool-nav"><a class="brand" href="index.html" aria-label="Prabakar's GitHub home"><span class="brand-mark" aria-hidden="true">PG</span><span class="brand-name">PRABAKAR'S GITHUB</span></a><div class="nav-links"><a href="index.html#tools">ALL TOOLS</a><a class="active" href="json-table.html">JSON TABLE</a></div></nav>
    <header class="tool-header"><p class="eyebrow">TOOL 13 / DATA VIEW</p><h1>JSON to <em>Table</em></h1><p>Turn API responses and JSON records into a searchable table. Nested values are flattened into dot-path columns, and everything stays in your browser.</p></header>
    <div class="control-row"><button type="button" id="json-table-sample">LOAD SAMPLE</button><label class="file-button">IMPORT JSON<input type="file" id="json-table-file" accept=".json,application/json,text/plain" /></label><button type="button" id="json-table-csv" disabled>EXPORT CSV</button><button type="button" id="json-table-excel" disabled>EXPORT EXCEL</button></div>
    <section class="work-area convert-layout"><div class="work-panel"><div class="panel-header"><label for="json-table-input">JSON INPUT</label><span class="panel-meta">AUTO-CONVERTS</span></div><textarea id="json-table-input" spellcheck="false" placeholder='[{"id":1,"name":"Ada"}]' aria-label="JSON input"></textarea></div><div class="work-panel"><div class="panel-header"><label>TABLE OUTPUT</label><input id="json-table-search" class="table-search" type="search" placeholder="Filter rows..." disabled /></div><div id="json-table-output" class="result-area data-preview" aria-live="polite">Paste an object or an array of objects to create a table.</div></div></section><p id="json-table-status" class="status" aria-live="polite">Nested objects use dot paths such as <code>customer.email</code>; arrays are kept as JSON in a cell.</p>
  </main><script src="app.js"></script></body>
</html>