Data

Repeating rows

A data grid with per-row validation and a minimum row count — validate to see contacts[0].name style errors.

Loading the builder…

View the spec
Open in the playground
{
  "type": "panel",
  "id": "column",
  "name": "Form",
  "configs": {
    "key": "grid"
  },
  "children": [
    {
      "type": "collection",
      "dataType": "array",
      "id": "data-grid",
      "name": "Contacts",
      "configs": {
        "key": "contacts",
        "label": "Team contacts"
      },
      "validations": [
        {
          "validator": "minItems",
          "value": 1
        }
      ],
      "children": [
        {
          "type": "input",
          "dataType": "string",
          "id": "text",
          "name": "Name",
          "configs": {
            "key": "name",
            "label": "Name"
          },
          "validations": [
            {
              "validator": "required"
            }
          ]
        },
        {
          "type": "input",
          "dataType": "string",
          "id": "email",
          "name": "Email",
          "configs": {
            "key": "email",
            "label": "Email"
          },
          "validations": [
            {
              "validator": "email"
            }
          ]
        },
        {
          "type": "input",
          "dataType": "string",
          "id": "select",
          "name": "Role",
          "configs": {
            "key": "role",
            "label": "Role",
            "optionsSource": "static",
            "options": "Developer\nDesigner\nManager"
          }
        }
      ]
    }
  ]
}