VanillaJS Form.io Renderer

by brendanbond

HTML

<script src="https://unpkg.com/formiojs@latest/dist/formio.full.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/formiojs@latest/dist/formio.full.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="page-content">
  <div class="container-fluid">
    <div id="formio"></div>
  </div>
</div>

JavaScript

const formJson = {
  "components": [{
    "label": "Table",
    "cellAlignment": "left",
    "customClass": "standardTable tableSpacing",
    "bordered": true,
    "hover": true,
    "key": "table22",
    "type": "table",
    "numRows": 6,
    "numCols": 4,
    "input": false,
    "tableView": false,
    "rows": [
      [{
          "components": []
        },
        {
          "components": [{
            "label": "HTML",
            "attrs": [{
              "attr": "",
              "value": ""
            }],
            "content": "<div style=\"text-align:center ; background-color : #900000 ; height: 100%;\"><h3 style=\"color:white;font-weight: bold;\">No binari</h3></div>",
            "refreshOnChange": false,
            "key": "html154",
            "type": "htmlelement",
            "input": false,
            "tableView": false
          }]
        },
        {
          "components": []
        },
        {
          "components": []
        }
      ],
      [{
          "components": [{
            "label": "HTML",
            "attrs": [{
              "attr": "",
              "value": ""
            }],
            "content": "<div>Persones de menys de 16 anys</div>",
            "refreshOnChange": false,
            "key": "html155",
            "type": "htmlelement",
            "input": false,
            "tableView": false
          }]
        },
        {
          "components": [{
            "label": "Number",
            "hideLabel": true,
            "mask": false,
            "tableView": false,
            "delimiter": false,
            "requireDecimal": false,
            "inputFormat": "plain",
            "truncateMultipleSpaces": false,
            "key": "personesAtesesNoBinari17",
            "type": "number",
            "input": true
          }]
        },
        {
          "components": []
        },
        {
          "components": []
        }
      ],
      [{
          "components": [{
            "label": "HTML",
   ...