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",
    "key": "table",
    "type": "table",
    "numRows": 4,
    "input": false,
    "tableView": false,
    "rows": [
      [{
          "components": []
        },
        {
          "components": [{
            "label": "HTML",
            "attrs": [{
              "attr": "",
              "value": ""
            }],
            "content": "Column 1",
            "refreshOnChange": false,
            "key": "html111",
            "type": "htmlelement",
            "input": false,
            "tableView": false
          }]
        },
        {
          "components": [{
            "label": "HTML",
            "attrs": [{
              "attr": "",
              "value": ""
            }],
            "content": "Column 2",
            "refreshOnChange": false,
            "key": "html121",
            "type": "htmlelement",
            "input": false,
            "tableView": false
          }]
        },
        {
          "components": [{
            "label": "HTML",
            "attrs": [{
              "attr": "",
              "value": ""
            }],
            "content": "Column total",
            "refreshOnChange": false,
            "key": "html124",
            "type": "htmlelement",
            "input": false,
            "tableView": false
          }]
        }
      ],
      [{
          "components": [{
            "label": "HTML",
            "attrs": [{
              "attr": "",
              "value": ""
            }],
            "content": "Row 1",
            "refreshOnChange": false,
            "key": "html125",
            "type": "htmlelement",
            "input": false,
            "tableView": false
          }]
        },
        {
          "components": [{
            "label": "Number",
            "hideLabel": true,
            "mask": false,
            "tableView": false,
            "delimiter": false,
            "requireDecimal":...