Table / JSON to DOM

A table is not built by the runtime directly.

The runtime asks for a table blueprint, receives JSON, and then hands that JSON to @keshavsoft/json-to-tag so the browser can create real HTML table elements.

1. Business data enters

const rows = [
  { id: 1, customer: 'Alpha', city: 'Hyderabad', amount: 1200 },
  { id: 2, customer: 'Beta', city: 'Bengaluru', amount: 2200 },
  { id: 3, customer: 'Gamma', city: 'Pune', amount: 1600 }
];

2. Builder creates the table spec

const spec = jsonRenderBuild({
  type: 'table',
  data: rows,
  columns: ['customer', 'city', 'amount']
});

// spec is JSON, not live DOM
// it describes table, header, rows, cells

3. The real DOM creation happens here

const nodeList = jsonToTag(spec);

// json-to-tag converts JSON into browser elements
// HTMLTableElement, HTMLTableRowElement, HTMLTableCellElement
// and all their children

4. Runtime only mounts the result

const target = document.getElementById('table-container');
target.innerHTML = '';
target.append(...nodeList);

// json-renderers is the shell that mounts
// it does not hand-code every table element

What the builder output looks like

{
  "type": "table",
  "children": [
    {
      "type": "thead",
      "children": [{ "type": "tr", "children": ["Customer", "City", "Amount"] }]
    },
    {
      "type": "tbody",
      "children": [
        { "type": "tr", "children": ["Alpha", "Hyderabad", 1200] },
        { "type": "tr", "children": ["Beta", "Bengaluru", 2200] }
      ]
    }
  ]
}

Live render

This is the final DOM that is mounted after the JSON spec is turned into real browser nodes.