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',
            attrs: [{
              attr: '',
              value: '',
            }, ],
 ...