​Table Object Array Editor

Renders array items in a tabular format

​Activation Conditions

  • "type": "array"
  • "x-format": "table-object"
  • "items": { "type": "object" }

​Example 

{
  "x-format": "table-object",
  "title": "users",
  "type": "array",
  "items": {
    "type": "object",
    "title": "Person",
    "description": "User",
    "properties": {
      "name": {
        "type": "string",
        "title": "Name"
      },
      "age": {
        "type": "integer",
        "title": "Age"
      }
    }
  },
  "default": [
    {
      "name": "Albert",
      "age": 23
    },
    {
      "name": "Betti",
      "age": 56
    },
    {
      "name": "Carl",
      "age": 18
    }
  ]
}

Adds a footer row with add and/or delete-all buttons. Use x-arrayDeleteAll to also show a "Delete all" button in the header.

  • x-arrayDeleteAll — Adds a "Delete all" button to the header
  • x-arrayFooterAdd — Adds an "Add item" button in the footer
  • x-arrayFooterDeleteAll — Adds a "Delete all" button in the footer
  • x-arrayFooterButtonsPosition — Aligns footer buttons ('left' or 'right', default: 'right')
{
  "x-format": "table-object",
  "title": "Users",
  "type": "array",
  "x-arrayDeleteAll": true,
  "x-arrayFooterAdd": true,
  "x-arrayFooterDeleteAll": true,
  "items": {
    "type": "object",
    "title": "Person",
    "properties": {
      "name": {
        "type": "string",
        "title": "Name"
      },
      "age": {
        "type": "integer",
        "title": "Age"
      }
    }
  },
  "default": [
    {
      "name": "Albert",
      "age": 23
    },
    {
      "name": "Betti",
      "age": 56
    },
    {
      "name": "Carl",
      "age": 18
    }
  ]
}