Formio.createForm(document.getElementById('formio'), {
  components: [
    {
      label: 'Children',
      key: 'children',
      type: 'editgrid',
      input: true,
      templates: {
        header:
          '' +
          '<div class="row">' +
          '  {% util.eachComponent(components, function(component) { %} ' +
          '    <div class="col-sm-2">' +
          '      <strong>{{ component.label }}</strong>' +
          '    </div>' +
          '  {% }) %}' +
          '</div>',
        row:
          '' +
          '<div class="row">' +
          '  {%util.eachComponent(components, function(component) { %}' +
          '    <div class="col-sm-2">' +
          '      {{ row[component.key] }}' +
          '    </div>' +
          '  {% }) %}' +
          '  <div class="col-sm-2">' +
          '    <div class="btn-group pull-right">' +
          '      <div class="btn btn-default btn-sm editRow"><i class="bi bi-edit"></i></div>' +
          '      <div class="btn btn-danger btn-sm removeRow"><i class="bi bi-trash"></i></div>' +
          '    </div>' +
          '  </div>' +
          '</div>',
        footer: '',
      },
      components: [
        {
          label: 'First Name',
          key: 'firstName',
          type: 'textfield',
          input: true,
        },
        {
          label: 'Last Name',
          key: 'lastName',
          type: 'textfield',
          input: true,
        },
        {
          label: 'Gender',
          key: 'gender',
          type: 'select',
          input: true,
          data: {
            values: [
              {
                value: 'male',
                label: 'Male',
              },
              {
                value: 'female',
                label: 'Female',
              },
              {
                value: 'other',
                label: 'Other',
              },
            ],
          },
          dataSrc: 'values',
          template: '<span>{{ item.label }}</span>',
        },
        {
          type: 'checkbox',
          label: 'Dependant',
          key: 'dependant',
          inputType: 'checkbox',
          input: true,
        },
        {
          label: 'Birthdate',
          key: 'birthdate',
          type: 'datetime',
          input: true,
          format: 'yyyy-MM-dd hh:mm a',
          enableDate: true,
          enableTime: true,
          defaultDate: '',
          datepickerMode: 'day',
          datePicker: {
            showWeeks: true,
            startingDay: 0,
            initDate: '',
            minMode: 'day',
            maxMode: 'year',
            yearRows: 4,
            yearColumns: 5,
            datepickerMode: 'day',
          },
          timePicker: {
            hourStep: 1,
            minuteStep: 1,
            showMeridian: true,
            readonlyInput: false,
            mousewheel: true,
            arrowkeys: true,
          },
          conditional: {
            eq: 'true',
            when: 'dependant',
            show: 'true',
          },
        },
      ],
    },
  ],
}).then(function (form) {
  // Provide a default submission.
  form.submission = {
    data: {
      children: [
        {
          firstName: 'Joe',
          lastName: 'Smith',
          gender: 'male',
          dependant: true,
          birthdate: '1982-05-18',
        },
        {
          firstName: 'Mary',
          lastName: 'Smith',
          gender: 'female',
          dependant: false,
          birthdate: '1979-02-17',
        },
      ],
    },
  };
});