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">

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

JavaScript

const formDefinition = {
  display: "form",
  components: [{
    type: "editgrid",
    key: "editGrid",
    label: "Edit Grid",
    components: [{
      type: "textfield",
      key: "first",
      label: "First Name",
      input: true,
    }, {
      type: "textfield",
      key: "last",
      label: "Last Name",
      input: true,
    }]
  }]
}
Formio.createForm(document.getElementById('formio'), formDefinition).then((form) => {
  form.on('editGridSelectRow', (args) => {
    console.log("Edit Grid select row!");
    console.log(args);
  })
});