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 formDefinition = {
  "type": "form",
  "display": "form",
  "tags": [],
  "components": [{
      "label": "Number of Rows",
      "applyMaskOn": "change",
      "mask": false,
      "tableView": false,
      "delimiter": false,
      "requireDecimal": false,
      "inputFormat": "plain",
      "truncateMultipleSpaces": false,
      "key": "numberOfRows",
      "type": "number",
      "input": true
    },
    {
      "label": "My Data Grid",
      "reorder": false,
      "addAnotherPosition": "bottom",
      "layoutFixed": false,
      "enableRowGroups": false,
      "initEmpty": false,
      "tableView": false,
      "defaultValue": [{
        "firstName": "",
        "lastName": "",
        "position": ""
      }],
      "calculateValue": "reconcileRows(instance, data)",
      "key": "myDataGrid",
      "type": "datagrid",
      "input": true,
      "components": [{
          "label": "First Name",
          "applyMaskOn": "change",
          "tableView": true,
          "key": "firstName",
          "type": "textfield",
          "input": true
        },
        {
          "label": "Last Name",
          "applyMaskOn": "change",
          "tableView": true,
          "key": "lastName",
          "type": "textfield",
          "input": true
        },
        {
          "label": "Position",
          "applyMaskOn": "change",
          "tableView": true,
          "key": "position",
          "type": "textfield",
          "input": true
        }
      ]
    },
    {
      "type": "button",
      "label": "Submit",
      "key": "submit",
      "disableOnInvalid": true,
      "input": true,
      "tableView": false
    }
  ],
}
Formio.createForm(document.getElementById('formio'), formDefinition).then(function(form) {
  
});

function reconcileRows(component, data) {
  let current = component.rows.length;
  let expected = data.numberOfRows || 1;
  if (current > expected) {
    for (let i = 0; i <= current - expected; i++) {
      component.removeRow(current...