JSON to HTML Table Renderer

JSON to HTML Table Renderer

Convert a JSON array of objects into a styled, interactive HTML table. Paste your JSON data and instantly see a rendered table with sortable columns, configurable styles, nested object handling, and column visibility controls. Export the result as embeddable HTML with inline CSS, CSV, or Markdown table format.

Cara Penggunaan

Paste a JSON array of objects into the input area. The tool auto-detects all unique keys across objects and renders them as table columns. Choose a table style (Plain, Striped, Bordered, Compact, or Dark), configure how nested objects are displayed, and toggle column visibility. Click column headers to sort. Copy the generated HTML, CSV, or Markdown, or download a complete .html file with inline styles.

Fitur

• 5 Table Styles — Plain, Striped, Bordered, Compact, and Dark themes. Each generates self-contained inline CSS so the table looks correct when embedded anywhere.
• Nested Object Handling — Three modes: Stringify (show as JSON string), Expand Inline (flatten with dot-notation keys like “address.city”), or Collapsible (expand/collapse nested content in-place).
• Sortable Columns — Click any column header to sort ascending or descending. Works with text, numbers, and dates.
• Column Visibility — Auto-populated checkboxes for each detected column. Hide or show specific fields to customize the table output.
• Pagination — Automatic pagination for datasets over 50 rows with prev/next navigation and row count display.
• Export HTML — Copy or download complete, self-contained HTML with inline CSS. Embeddable in any webpage, email, or document.
• Ekspor CSV — Properly quoted CSV output that handles commas, quotes, and special characters in values.
• Export Markdown — Clean Markdown table format compatible with GitHub, GitLab, and any Markdown renderer.
• Sample Data — Load example JSON to see the tool in action before pasting your own data.

Supported JSON Format

The tool expects a JSON array of objects: [{"name": "Alice", "age": 30}, {"name": "Bob", "age": 25}]. Objects don’t need identical keys — missing keys in some objects produce empty cells. Nested objects and arrays are handled according to the selected mode. Primitive values (strings, numbers, booleans, null) are displayed directly in table cells.