Array

Render a list of items with a subset of fields. Extends Base.

Interactive Demo

Example

Apple
Banana

const config = {
  components: {
    Example: {
      fields: {
        items: {
          type: "array",
          min: 1,
          max: 3,
          arrayFields: {
            title: { type: "text" },
          },
        },
      },
      render: ({ items }) => {
        return (
          <ul>
            {items.map((item, i) => (
              <li key={i}>{item.title}</li>
            ))}
          </ul>
        );
      },
    },
  },
};

Params

Param	Example	Type	Status
`type`	`type: "array"`	"array"	Required
`arrayFields`	`arrayFields: { title: { type: "text" } }`	Object	Required
`min`	`min: 1`	Number	-
`max`	`max: 3`	Number	-
`defaultItemProps`	`defaultItemProps: { title: "Hello, world" }`	String	-
`getItemSummary()`	`getItemSummary: (item) => item.title`	Function	-

Required params

`type`

The type of the field. Must be "array" for Array fields.

const config = {
  components: {
    Example: {
      fields: {
        items: {
          type: "array",
          arrayFields: {
            title: { type: "text" },
          },
        },
      },
      // ...
    },
  },
};

`arrayFields`

Describe the fields for each item in the array. Shares an API with fields.

Can include any field type, including nested array fields.

const config = {
  components: {
    Example: {
      fields: {
        items: {
          type: "array",
          arrayFields: {
            title: { type: "text" },
          },
        },
      },
      // ...
    },
  },
};

Optional params

`min`

Set the minimum amount of items allowed in the array

const config = {
  components: {
    Example: {
      fields: {
        items: {
          type: "array",
          arrayFields: {
            title: { type: "text" },
          },
          min: 1,
        },
      },
      // ...
    },
  },
};

Interactive Demo

Example

Apple
Banana

`max`

Set the maximum amount of items allowed in the array

const config = {
  components: {
    Example: {
      fields: {
        items: {
          type: "array",
          arrayFields: {
            title: { type: "text" },
          },
          max: 3,
        },
      },
      // ...
    },
  },
};

Interactive Demo

Example

Apple
Banana

`defaultItemProps`

Set the default values when a new item is added to the array.

const config = {
  components: {
    Example: {
      fields: {
        items: {
          type: "array",
          arrayFields: {
            title: { type: "text" },
          },
          defaultItemProps: {
            title: "Hello, world",
          },
        },
      },
      // ...
    },
  },
};

Interactive Demo

Example

Apple
Banana

`getItemSummary(item, index)`

Get a label of each item in the array.

const config = {
  components: {
    Example: {
      fields: {
        items: {
          type: "array",
          arrayFields: {
            title: { type: "text" },
          },
          getItemSummary: (item) => item.title || "Item",
        },
      },
      // ...
    },
  },
};

Interactive Demo

Example

Apple
Banana

Base Custom