📄 Documentation: Dynamic Table from JSON

This page documents the functionality of a dynamic HTML table that loads and formats data from an external JSON file using Bootstrap 5 for styling.

🔧 Overview

Loads JSON from jsonCode.json
Renders a table with headers and rows
Formats cell content based on type: badge, link, currency, date, code, boolean, text
Uses Bootstrap 5 for styling

🧠 JSON Structure

The JSON file should contain two keys: headers and data.

{
  "headers": [
    { "key": "status", "label": "Status", "type": "badge", "class": "text-center", "tooltip": "Current status" },
    { "key": "amount", "label": "Amount", "type": "currency" }
  ],
  "data": [
    { "status": "Published", "amount": 1234.56 },
    { "status": "Error", "amount": 0 }
  ]
}

📦 Supported Types

Type	Description	Example Output
`badge`	Bootstrap badge with contextual color	Published
`link`	Clickable hyperlink	https://example.com
`currency`	Formatted dollar amount	$1,234.56
`date`	Formatted date string	Aug 20, 2025
`code`	Monospaced code block	`init()`
`boolean`	True/false icon	✅ / ❌
`text`	Plain text	Hello World

📜 JavaScript Functions

`formatCell(value, type)`

Formats a cell based on its type.

`renderTable(json)`

Builds the table from the JSON object and injects it into the page.

`fetch("jsonCode.json")`

Loads the JSON file and calls renderTable().

🧩 Extending the Code

Add new types to formatCell() for images, progress bars, etc.

Enable sorting by clicking column headers

✅ Bootstrap Integration

Ensure Bootstrap 5 is loaded in the <head>:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">