How to Display JSON as Table in Browser

1. What Is a JSON to Table Conversion?

JSON is a tree structure — objects nested inside arrays, arrays inside objects. A table is flat. Converting JSON to a table means taking an array of objects where each object becomes a row and each key becomes a column header:

[
  { "name": "Alice", "role": "Engineer", "salary": 95000 },
  { "name": "Bob",   "role": "Designer", "salary": 82000 },
  { "name": "Carol", "role": "Manager",  "salary": 110000 }
]

The tool extracts all unique keys across the array and creates one column per key. If an object is missing a key, that cell is left empty.

2. Loading JSON into the Table Generator

There are three common ways to get JSON into a browser table tool:

• Paste JSON directly — Copy from your editor or API response and paste into the input panel.
• Upload a .json file — Most tools support file upload via drag-and-drop or a file picker.
• Fetch from URL — Some tools can fetch JSON from a URL and render it as a table.

// Example: array of user objects
[
  { "id": 1, "name": "Alice", "email": "alice@example.com" },
  { "id": 2, "name": "Bob",   "email": "bob@example.com" }
]

For large files, use the JSON Viewer first to understand the structure, then paste relevant sections into the table generator.

3. Handling Nested Objects and Arrays

JSON often contains nested structures. Most table tools flatten these using dot notation:

{
  "name": "Alice",
  "address": {
    "city": "New York",
    "zip": "10001"
  },
  "projects": ["Alpha", "Beta"]
}

Becomes columns: name, address.city, address.zip, projects (shown as a comma-separated list). Some advanced tools support expandable rows that reveal the full nested object on click.

For deeply nested JSON with multiple levels, you may want to flatten it manually before pasting into the table tool. Each level of nesting adds more columns.

4. Sortable Columns — Click to Reorder

Once your data is rendered as a table, clicking a column header sorts the entire table by that column. This is implemented with a simple JavaScript comparator:

// Pseudo-code: sort by column key
const sortBy = (data, key, asc) =>
  data.sort((a, b) => {
    if (a[key] < b[key]) return asc ? -1 : 1;
    if (a[key] > b[key]) return asc ? 1 : -1;
    return 0;
  });

Click once for ascending sort, click again for descending. The column header usually shows an arrow indicator (▲ or ▼). This makes it easy to find the highest salary, the oldest date, or alphabetically sort names without any server-side processing.

Use the JSON to Table tool to try sortable columns instantly with your own data.

5. Styling the HTML Table with CSS

A clean table design makes data readable. Here's a minimal stylesheet for your JSON-generated table:

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
th {
  background: #F5F5F0;
  cursor: pointer;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 2px solid #E8E8E3;
}
td {
  padding: 8px 12px;
  border-bottom: 1px solid #E8E8E3;
}
tr:hover {
  background: #FAFAF7;
}

The cursor: pointer on headers signals they are clickable for sorting. The hover effect helps track which row you're reading.

6. Exporting the Table to HTML, CSV, or Markdown

After generating your table, you can export it in several formats:

• HTML: Exports the full table with inline styles — embed directly in any web page.
• CSV: Exports plain comma-separated values for Excel, Google Sheets, or data pipelines.
• Markdown: Exports a GitHub-flavored Markdown table for documentation and README files.

If you need CSV specifically, see the JSON to CSV converter for dedicated CSV export options.

Best Practices for JSON Tables

• Flatten nested objects first. Deeply nested JSON creates many columns. If you only need top-level fields, extract them before converting to table.
• Use the JSON Viewer first. Before converting, view the structure to understand nesting depth and key names.
• Check for inconsistent keys. If objects in the array have different keys, you'll get sparse columns. Normalize your data first.
• Sort before exporting. Sort by the most important column before exporting to ensure your output is already in the right order.
• Consider pagination for large arrays. For arrays over 1,000 rows, look for a tool with pagination or virtual scrolling to avoid browser slowdown.

Related Tools

Frequently Asked Questions

Looking for more guides? See the full JSONXX How To index.