Skip to main content

Table

When an array component is configured with arrayType: "table", the repeated items are rendered in a tabular layout.
Each field defined in properties becomes a column, and each item in the array corresponds to a row in the table.

This layout is useful when the repeated fields share a simple, structured format — such as lists of persons, vehicles, or other entities — and when the user needs to quickly view or compare entries.

Table structure​

By default, the rendered table includes two additional columns:

  1. Index column (first column) — Displays the iteration number (starting from 1).
    This helps users identify the position of each entry in the list.
  2. Actions column (last column) — Contains a button allowing the user to remove the corresponding item.

Each field defined in properties becomes a column in between, using the field's label as the table header.

At the bottom of the table, a footer row is rendered.
This footer contains, centered, the "Add" button used to create a new item.

Example​

{
  "members": {
    "type": "array",
    "arrayType": "table",
    "array_actions": {
      "add_label": "Add member",
      "remove_label": "Remove",
      "title": "Member",
      "actions_title": "Actions"
    },
    "properties": {
      "name": {
        "label": "Name",
        "component": "text"
      },
      "email": {
        "label": "Email",
        "component": "text"
      },
      "role": {
        "label": "Role",
        "component": "select",
        "list": [
          { "value": "admin", "label": "Admin" },
          { "value": "user", "label": "User" }
        ]
      }
    }
  }
}

This configuration produces a table with the following columns:

#NameEmailRoleActions
1[text][text][select][Remove]
2.........[Remove]
[Add member]

Behavior​

  • Each row represents one object from the array.
  • The index column updates automatically when items are added or removed.
  • Clicking the “Remove” button deletes the corresponding row and updates the array output.
  • The footer “Add” button creates a new row based on the properties definition.
  • Field validations and visibility behave identically to other form components.
  • The table headers are generated from the field label values.

--

Customization​

showRowId​

We can hide the column with the index by setting the option showRowId to false.

{
  "member_list": {
    "type": "array",
    "label": "",
    "arrayType": "table",
    "showRowId": false,
    "array_actions": {
      "remove": true,
      "add": false
    },
    "properties": {
      "name": {
        "label": "Name",
        "component": "text"
      }
    }
  }
}

Column size​

Each field defined in properties is rendered as a column when using arrayType: "table".
A field can define column-specific attributes through a column object, allowing control over its layout within the table.

The most common attribute is size, which controls the column width.

{
  "member_list": {
    "type": "array",
    "label": "",
    "arrayType": "table",
    "array_actions": false,
    "properties": {
      "name": {
        "label": "Name",
        "component": "text",
        "column": {
          "size": "1/4"
        }
      }
    }
  }
}
tip

The size value can be expressed in two ways:

  • As a fraction (e.g. "1/4", "1/3", "1/2"), which is automatically converted to an appropriate percentage.
  • As a percentage string (e.g. "25%", "33%", "50%") for direct width control.

If no size is defined, columns are distributed evenly across the table width by default.

Default entries​

You may want the table to display a predefined number of rows when it is first rendered, without requiring the user to click Add.
This can be achieved using the default.entries option.

{
  "member_list": {
    "type": "array",
    "label": "",
    "arrayType": "table",
    "default": {
      "entries": 6
    },
    "properties": {
      "name": {
        "label": "Name",
        "component": "text"
      }
    }
  }
}

In this example, the table will initially display six rows, allowing the user to directly fill them in.

The entries value can be defined in two ways:

  • As a number, to indicate a fixed number of default rows.
  • As an object referencing another field in the data, allowing the number of rows to be dynamically controlled:
{
  "default": {
    "entries": {
      "from": "motorbikes_count"
    }
  }
}
tip

The standard table options (such as adding or removing rows) remain fully compatible with this feature.
For example, if you want a fixed number of rows that must all be completed:

  • Disable the ability to remove items.
  • Disable the ability to add new items.
  • Apply a required validation on each field within the iteration.

This ensures all predefined rows must be filled out before submission.

Column tooltips​

You can add tooltips next to column headers in a table to provide additional context or explanations for each field.
To do so, define a columnTooltip property on the field definition.

{
  "name": {
    "label": "Name",
    "component": "text",
    "columnTooltip": "This is a tooltip for the name column"
  }
}

In this example, the Name column header will display a tooltip icon beside its label. When the user hovers over the icon, the tooltip text will appear with the specified message.

This feature is useful for clarifying the meaning or purpose of certain columns without cluttering the interface.

Column class name​

You can add a class name to the column by defining a column.className property on the field definition.

{
  "name": {
    "label": "Name",
    "component": "text",
    "column": {
      "className": "text-info"
    }
  }
}

Notes​

  • The actions_title label from array_actions is used as the header for the actions column.
  • If remove_label is defined, it is used as the button text in the last column.
  • The table automatically adapts to the number of fields defined in properties.
  • When the array is empty, the “empty_label” text is displayed instead of an empty table.

Storybook examples​