Contact

Tools  /  Generators  /  JSON → HTML Table

JSON → HTML Table

Convert a JSON array of objects (or arrays, or a wrapped payload) into a clean, accessible HTML table — a union of keys as columns, dot-path flattening of nested objects, column pick / reorder / rename, numeric right-alignment, zebra striping, a sticky header and optional click-to-sort — with a live rendered preview and HTML + CSS (+ JS) output, or Markdown, CSV, or a React component.

What this tool does

It reads a JSON array and builds a real HTML <table>, rendering it live so you can see and sort it.

Input shapes

An array of objects, an array of arrays, or a single object whose first array property is the data ({ "results": [...] }) — all work. Objects don't need matching keys; the columns are the union of every key seen.

Nested data

Nested objects are flattened with dot paths (address.city) up to the depth you choose; deeper values and arrays are shown as compact JSON.

Columns

Pick which columns appear, drag to reorder, and rename any header without touching the data.

Presentation & sorting

Numeric columns right-align automatically; add zebra striping, a sticky header, and click-to-sort with aria-sort.

Output

HTML + CSS (+ JS), a Markdown table, CSV, or a React component.

Privacy

Everything runs in your browser. Nothing is uploaded.

Frequently asked questions

What if my objects have different keys?
The column list is the union of all keys in order of first appearance. Missing values render as an empty cell (or your chosen placeholder).
How are nested objects handled?
They are flattened to dot-path columns like user.name and user.address.city, up to the flatten depth you set. Beyond that depth, and for arrays, the value is shown as minified JSON.
Can I reorder or hide columns?
Yes — the column panel lets you toggle each column on/off, drag to reorder, and type a display label that overrides the raw key.
My JSON is wrapped in an object — will it work?
Yes. If you paste an object rather than an array, the tool uses its first property that is an array (e.g. data, results, items).
Is anything sent to a server?
No. Parsing and rendering happen entirely in your browser.
Theme Accent