JSON to Table Online — Visualize JSON as HTML Table
Convert JSON arrays to CSV — nested flattening · custom delimiter · live preview · Excel download · 100% Free
Tabular visualization of JSON data makes it immediately understandable for both developers and non-technical stakeholders. This tool converts JSON arrays to HTML tables with sortable columns, search/filter capability and copy functionality. Use it for quick data review, generating HTML table code for documentation or copying clean tabular output to paste into reports.
What is JSON to CSV Conversion?
JSON to CSV conversion transforms JavaScript Object Notation (JSON) data into Comma Separated Values (CSV) — a flat, plain-text format that can be opened in Microsoft Excel, Google Sheets, LibreOffice Calc, or imported into any database. CalcNation's JSON to CSV converter handles nested objects, arrays, inconsistent keys, and custom delimiters — all 100% in your browser.
Options Explained
Flatten Nested JSON — Converts nested objects to dot-notation columns. E.g. { "address": { "city": "X" } } becomes the column address.city. Flatten Arrays — Expands array items to separate columns: tags[0], tags[1]… Delimiter — Choose comma (standard), semicolon (European Excel), tab (TSV for Excel paste), pipe, or a custom character. Header Row — Toggle whether the first CSV row contains column names.
Frequently Asked Questions
How do I convert JSON to an HTML table for my website?
This tool generates the HTML table code — click "Copy HTML". Paste into your webpage. For dynamic generation in JavaScript: const table = document.createElement("table"); const header = Object.keys(data[0]); header.forEach(key => { const th = document.createElement("th"); th.textContent = key; }). Or use a library like DataTables for sorting and pagination.
Can I export JSON to a styled HTML table?
Yes — this tool generates a styled HTML table with CSS included. For custom styling: copy the HTML and modify the CSS classes. For Bootstrap tables: use table-striped table-hover table-sm classes. For Tailwind: apply utility classes. The generated table code is clean and can be dropped into any web project.
How do I display JSON data in Angular as a table?
Angular with *ngFor: <tr *ngFor="let item of data"><td>{{item.name}}</td><td>{{item.price}}</td></tr>. For dynamic columns: <th *ngFor="let col of columns">{{col}}</th><td *ngFor="let col of columns">{{item[col]}}</td>. Use Angular Material table (mat-table) for sorting, filtering and virtual scrolling in large datasets.
How do I make a JSON table sortable?
In vanilla JavaScript: add click handlers to <th> elements, sort the JSON array by the clicked column, re-render the table. In Angular: MatSort directive + MatTableDataSource handles sorting. In React: react-table library provides sort, filter and pagination. This online tool includes basic sorting — for production tables in apps, use a proper table library.