JSFiddle - React, Tailwind, and code Playground

by brendanbond

HTML

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
        <link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.full.css" />
        <div class="container m-2">
          <p>
            Populating a data grid programatically is the same as populating any other component - just update the submission object! In other words, the thing that will determine the number of rows in a data grid is the submission object. You can do it when the form promise resolves, or at runtime later on via an event (like a button click). I've placed the button outside of the form to make clear that it's <em>just</em> the submission object in play here, but this could easily be a button that's integrated into your form, for example.
          </p>

          <div id="formio"></div>
         
        </div>
        <script src="https://cdn.form.io/formiojs/formio.full.min.js"></script>

JavaScript

const formDefinition = {
  "_id": "66842a316b0fc9f142b3f0b5",
  "title": "PDF Webform Hybrid",
  "name": "pdfWebformHybrid",
  "path": "pdfwebformhybrid",
  "type": "pdf",
  "display": "pdf",
  "tags": [],
  "access": [{
      "type": "create_own",
      "roles": []
    },
    {
      "type": "create_all",
      "roles": []
    },
    {
      "type": "read_own",
      "roles": []
    },
    {
      "type": "read_all",
      "roles": [
        "6672f627cde4ce175347314f",
        "6672f627cde4ce1753473153",
        "6672f627cde4ce1753473157"
      ]
    },
    {
      "type": "update_own",
      "roles": []
    },
    {
      "type": "update_all",
      "roles": []
    },
    {
      "type": "delete_own",
      "roles": []
    },
    {
      "type": "delete_all",
      "roles": []
    },
    {
      "type": "team_read",
      "roles": []
    },
    {
      "type": "team_write",
      "roles": []
    },
    {
      "type": "team_admin",
      "roles": []
    }
  ],
  "submissionAccess": [{
      "type": "create_own",
      "roles": []
    },
    {
      "type": "create_all",
      "roles": []
    },
    {
      "type": "read_own",
      "roles": []
    },
    {
      "type": "read_all",
      "roles": []
    },
    {
      "type": "update_own",
      "roles": []
    },
    {
      "type": "update_all",
      "roles": []
    },
    {
      "type": "delete_own",
      "roles": []
    },
    {
      "type": "delete_all",
      "roles": []
    },
    {
      "type": "team_read",
      "roles": []
    },
    {
      "type": "team_write",
      "roles": []
    },
    {
      "type": "team_admin",
      "roles": []
    }
  ],
  "owner": "6672f60dcde4ce17534730a2",
  "components": [{
      "label": "First Name",
      "applyMaskOn": "change",
      "tableView": true,
      "validateWhenHidden": false,
      "key": "firstName",
      "overlay": {
        "page": 1,
        "left": 168.388,
        "top": 167.31822000000017,
        "width": 317.2850000000001,
       ...